Fix: img modal when window is too narrow

This commit is contained in:
cutls 2020-02-11 01:55:40 +09:00
parent 2732161dd2
commit c8786ca00f
6 changed files with 23 additions and 18 deletions

View File

@ -57,7 +57,7 @@ option {
padding: 0; padding: 0;
} }
#imagemodal .modal-footer { #imagemodal .modal-footer {
overflow-x: scroll; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
} }

View File

@ -205,7 +205,7 @@ function escapeCsv(str) {
return str return str
} }
var result var result
result = str.replace(/\"/g, '""') result = str.toString().replace(/\"/g, '""')
if (result.indexOf(',') >= 0) { if (result.indexOf(',') >= 0) {
result = '"' + result + '"' result = '"' + result + '"'
} }

View File

@ -128,13 +128,13 @@ function imageXhr(id, key, murl) {
$('#imagemodal').css('bottom', '0') $('#imagemodal').css('bottom', '0')
$('#imagemodal img').css('width', 'auto') $('#imagemodal img').css('width', 'auto')
if (height < windowH) { if (height < windowH) {
$('#imagemodal').css('height', height + 60 + 'px') $('#imagemodal').css('height', height + 100 + 'px')
$('#imagemodal img').css('height', '100%') $('#imagemodal img').css('height', height + 'px')
if (width > windowW * 0.8) { if (width > windowW * 0.8) {
$('#imagemodal').css('width', '80vw') $('#imagemodal').css('width', '80vw')
$('#imagemodal img').css('width', '100%') $('#imagemodal img').css('width', 'auto')
var heightS = ((windowW * 0.8) / width) * height var heightS = ((windowW * 0.8) / width) * height
$('#imagemodal').css('height', heightS + 60 + 'px') $('#imagemodal').css('height', heightS + 100 + 'px')
} else { } else {
$('#imagemodal').css('width', width + 'px') $('#imagemodal').css('width', width + 'px')
} }

View File

@ -56,9 +56,9 @@
"jimp": "^0.9.3", "jimp": "^0.9.3",
"jquery": "^3.4.1", "jquery": "^3.4.1",
"jquery-ui-dist": "^1.12.1", "jquery-ui-dist": "^1.12.1",
"materialize-css": "git://github.com/cutls/materialize#v1-dev",
"json5": "^2.1.1", "json5": "^2.1.1",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"materialize-css": "git://github.com/cutls/materialize#v1-dev",
"sumchecker": "^3.0.1", "sumchecker": "^3.0.1",
"sweetalert2": "^9.7.2", "sweetalert2": "^9.7.2",
"vue": "^2.6.11" "vue": "^2.6.11"
@ -69,7 +69,7 @@
}, },
"devDependencies": { "devDependencies": {
"chokidar": "^3.3.1", "chokidar": "^3.3.1",
"electron": "^7.1.8", "electron": "^8.0.0",
"electron-builder": "^22.1.0", "electron-builder": "^22.1.0",
"electron-rebuild": "^1.10.0", "electron-rebuild": "^1.10.0",
"readline-sync": "1.4.10" "readline-sync": "1.4.10"

View File

@ -1071,7 +1071,7 @@
</div> </div>
</div> </div>
<!-- Modal Structure Image--> <!-- 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 class="modal-content">
<div id="imagewrap"> <div id="imagewrap">
<img src="" id="imgmodal" /> <img src="" id="imgmodal" />
@ -1080,20 +1080,25 @@
<br /> <br />
</div> </div>
<div class="modal-footer"> <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)"> <a class="waves-effect white-text" onclick="zoom(2)">
<i class="material-icons">zoom_in</i> <i class="material-icons">zoom_in</i>
</a> </a>
<a class="waves-effect white-text" onclick="zoom(0.5)"> <a class="waves-effect white-text" onclick="zoom(0.5)">
<i class="material-icons">zoom_out</i> <i class="material-icons">zoom_out</i>
</a> </a>
<button class="btn waves-effect blue" onclick="copyImgUrl()"> <button class="btn waves-effect blue" onclick="copyImgUrl()" title="@@copyURL@@">
<i class="material-icons left">link</i>@@copyURL@@ <i class="material-icons">link</i>
</button> </button>
<button class="btn waves-effect purple" onclick="dlImg()"> <button class="btn waves-effect purple" onclick="dlImg()">
<i class="material-icons">file_download</i> <i class="material-icons">file_download</i>
</button> </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"> <button class="btn waves-effect orange" onclick="imgCont('prev')" id="image-prev">
<i class="material-icons">keyboard_arrow_left</i> <i class="material-icons">keyboard_arrow_left</i>
</button> </button>

View File

@ -1060,10 +1060,10 @@ electron-rebuild@^1.10.0:
spawn-rx "^3.0.0" spawn-rx "^3.0.0"
yargs "^14.2.0" yargs "^14.2.0"
electron@^7.1.8: electron@^8.0.0:
version "7.1.8" version "8.0.0"
resolved "https://registry.yarnpkg.com/electron/-/electron-7.1.8.tgz#7cd50fdf42c55c9de86ab126e983d23fd89d5d99" resolved "https://registry.yarnpkg.com/electron/-/electron-8.0.0.tgz#b5f105cda6985ca2f2496de15e44b2bbb0c8e4f4"
integrity sha512-1cWT7toVcSTKu3HdnhDQpbTmI5QCSKtIbg+wHUkSZCdAqjPcuH+dpm+j21g38LbE2DoIzdryaN0RTZOqTPebMA== integrity sha512-vBXUKRqTUq0jv1upvISdvScDDH3uCPwXj4eA5BeR3UDbJp2hOhq7eJxwjIQbfLQql98aYz4X6pSlzBnhfyQqHA==
dependencies: dependencies:
"@electron/get" "^1.0.1" "@electron/get" "^1.0.1"
"@types/node" "^12.0.12" "@types/node" "^12.0.12"
@ -1863,7 +1863,7 @@ matcher@^2.0.0:
"materialize-css@git://github.com/cutls/materialize#v1-dev": "materialize-css@git://github.com/cutls/materialize#v1-dev":
version "1.0.0" version "1.0.0"
resolved "git://github.com/cutls/materialize#2387ea3897c3378fbcd65d0563538287e16df48f" resolved "git://github.com/cutls/materialize#e7fedb112cc28af96cc0119bccf3f8c13c4a98a6"
dependencies: dependencies:
grapheme-splitter "^1.0.4" grapheme-splitter "^1.0.4"