From c8786ca00f77bd61bf6b92cb3af9aa78eeb11107 Mon Sep 17 00:00:00 2001
From: cutls <web-pro@cutls.com>
Date: Tue, 11 Feb 2020 01:55:40 +0900
Subject: [PATCH] Fix: img modal when window is too narrow

---
 app/css/master.css              |  2 +-
 app/js/platform/first.js        |  2 +-
 app/js/ui/img.js                |  8 ++++----
 app/package.json                |  4 ++--
 app/view/make/index.sample.html | 15 ++++++++++-----
 app/yarn.lock                   | 10 +++++-----
 6 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/app/css/master.css b/app/css/master.css
index 54ebc758..4568487a 100644
--- a/app/css/master.css
+++ b/app/css/master.css
@@ -57,7 +57,7 @@ option {
 	padding: 0;
 }
 #imagemodal .modal-footer {
-	overflow-x: scroll;
+	overflow-x: hidden;
 	overflow-y: hidden;
 }
 
diff --git a/app/js/platform/first.js b/app/js/platform/first.js
index d309c3d4..6fd6276d 100644
--- a/app/js/platform/first.js
+++ b/app/js/platform/first.js
@@ -205,7 +205,7 @@ function escapeCsv(str) {
 		return str
 	}
 	var result
-	result = str.replace(/\"/g, '""')
+	result = str.toString().replace(/\"/g, '""')
 	if (result.indexOf(',') >= 0) {
 		result = '"' + result + '"'
 	}
diff --git a/app/js/ui/img.js b/app/js/ui/img.js
index 702d53a7..65325eda 100644
--- a/app/js/ui/img.js
+++ b/app/js/ui/img.js
@@ -128,13 +128,13 @@ function imageXhr(id, key, murl) {
 					$('#imagemodal').css('bottom', '0')
 					$('#imagemodal img').css('width', 'auto')
 					if (height < windowH) {
-						$('#imagemodal').css('height', height + 60 + 'px')
-						$('#imagemodal img').css('height', '100%')
+						$('#imagemodal').css('height', height + 100 + 'px')
+						$('#imagemodal img').css('height',  height + 'px')
 						if (width > windowW * 0.8) {
 							$('#imagemodal').css('width', '80vw')
-							$('#imagemodal img').css('width', '100%')
+							$('#imagemodal img').css('width', 'auto')
 							var heightS = ((windowW * 0.8) / width) * height
-							$('#imagemodal').css('height', heightS + 60 + 'px')
+							$('#imagemodal').css('height', heightS + 100 + 'px')
 						} else {
 							$('#imagemodal').css('width', width + 'px')
 						}
diff --git a/app/package.json b/app/package.json
index a69ca49c..d25416e1 100644
--- a/app/package.json
+++ b/app/package.json
@@ -56,9 +56,9 @@
     "jimp": "^0.9.3",
     "jquery": "^3.4.1",
     "jquery-ui-dist": "^1.12.1",
-    "materialize-css": "git://github.com/cutls/materialize#v1-dev",
     "json5": "^2.1.1",
     "lodash": "^4.17.15",
+    "materialize-css": "git://github.com/cutls/materialize#v1-dev",
     "sumchecker": "^3.0.1",
     "sweetalert2": "^9.7.2",
     "vue": "^2.6.11"
@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "chokidar": "^3.3.1",
-    "electron": "^7.1.8",
+    "electron": "^8.0.0",
     "electron-builder": "^22.1.0",
     "electron-rebuild": "^1.10.0",
     "readline-sync": "1.4.10"
diff --git a/app/view/make/index.sample.html b/app/view/make/index.sample.html
index cb9f30e2..431ea2da 100644
--- a/app/view/make/index.sample.html
+++ b/app/view/make/index.sample.html
@@ -1071,7 +1071,7 @@
 			</div>
 		</div>
 		<!-- Modal Structure Image-->
-		<div id="imagemodal" class="modal modal-fixed-footer" style="min-width:550px">
+		<div id="imagemodal" class="modal modal-fixed-footer">
 			<div class="modal-content">
 				<div id="imagewrap">
 					<img src="" id="imgmodal" />
@@ -1080,20 +1080,25 @@
 				<br />
 			</div>
 			<div class="modal-footer">
-				DL:<span id="imgprog"></span>% (<span id="imgsec"></span>ms, <span id="imgbyte"></span>KB)
+				<div style="float: left;padding-top:3px;line-height: normal;">
+					<span id="imgprog"></span>% <br />
+					<span id="imgsec"></span>ms <br /><span id="imgbyte"></span>KB
+				</div>
 				<a class="waves-effect white-text" onclick="zoom(2)">
 					<i class="material-icons">zoom_in</i>
 				</a>
 				<a class="waves-effect white-text" onclick="zoom(0.5)">
 					<i class="material-icons">zoom_out</i>
 				</a>
-				<button class="btn waves-effect blue" onclick="copyImgUrl()">
-					<i class="material-icons left">link</i>@@copyURL@@
+				<button class="btn waves-effect blue" onclick="copyImgUrl()" title="@@copyURL@@">
+					<i class="material-icons">link</i>
 				</button>
 				<button class="btn waves-effect purple" onclick="dlImg()">
 					<i class="material-icons">file_download</i>
 				</button>
-				<button class="btn waves-effect brown" onclick="detFromImg()">@@thisToot@@</button>
+				<button class="btn waves-effect brown" onclick="detFromImg()" title="@@thisToot@@">
+					<i class="material-icons">pageview</i>
+				</button>
 				<button class="btn waves-effect orange" onclick="imgCont('prev')" id="image-prev">
 					<i class="material-icons">keyboard_arrow_left</i>
 				</button>
diff --git a/app/yarn.lock b/app/yarn.lock
index 0af755a7..9a8a6476 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -1060,10 +1060,10 @@ electron-rebuild@^1.10.0:
     spawn-rx "^3.0.0"
     yargs "^14.2.0"
 
-electron@^7.1.8:
-  version "7.1.8"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-7.1.8.tgz#7cd50fdf42c55c9de86ab126e983d23fd89d5d99"
-  integrity sha512-1cWT7toVcSTKu3HdnhDQpbTmI5QCSKtIbg+wHUkSZCdAqjPcuH+dpm+j21g38LbE2DoIzdryaN0RTZOqTPebMA==
+electron@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-8.0.0.tgz#b5f105cda6985ca2f2496de15e44b2bbb0c8e4f4"
+  integrity sha512-vBXUKRqTUq0jv1upvISdvScDDH3uCPwXj4eA5BeR3UDbJp2hOhq7eJxwjIQbfLQql98aYz4X6pSlzBnhfyQqHA==
   dependencies:
     "@electron/get" "^1.0.1"
     "@types/node" "^12.0.12"
@@ -1863,7 +1863,7 @@ matcher@^2.0.0:
 
 "materialize-css@git://github.com/cutls/materialize#v1-dev":
   version "1.0.0"
-  resolved "git://github.com/cutls/materialize#2387ea3897c3378fbcd65d0563538287e16df48f"
+  resolved "git://github.com/cutls/materialize#e7fedb112cc28af96cc0119bccf3f8c13c4a98a6"
   dependencies:
     grapheme-splitter "^1.0.4"