diff options
author | 2017-06-21 20:25:04 +0300 | |
---|---|---|
committer | 2017-06-21 21:49:48 +0300 | |
commit | 0b6a7c341ecf0dc04f9708f727b8cc134dbd7e85 (patch) | |
tree | 56ccdeecf3549aa1c2e250074a9d09112ef00ca8 /juick-www/src/main/static | |
parent | 4df1f1aa6f104df1161954b7def736373e14ca65 (diff) |
juick-www: better lightbox(dialog), fixed "no lightbox in user blog",
photo-512 - used on page,
photo-1024 - used in lightbox if smaller screen dimension is under 1280,
p (original size) - used in lightbox on huge screens.
Diffstat (limited to 'juick-www/src/main/static')
-rw-r--r-- | juick-www/src/main/static/scripts.js | 34 | ||||
-rw-r--r-- | juick-www/src/main/static/style.css | 30 |
2 files changed, 36 insertions, 28 deletions
diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js index 22731671..78dc71f4 100644 --- a/juick-www/src/main/static/scripts.js +++ b/juick-www/src/main/static/scripts.js @@ -388,24 +388,30 @@ function showMessageLinksDialog(mid, rid) { } function showPhotoDialog(fname) { - var width = window.innerWidth, - height = window.innerHeight * 0.9; - if (width < 640) { - return true; - } else if (width < 1280) { - openDialog('<a href="//i.juick.com/p/' + fname + '"><img src="//i.juick.com/photos-512/' + fname + '"/></a>'); - document.querySelector('#dialogw img').style.maxHeight = height + 'px'; + let width = window.innerWidth; + let height = window.innerHeight; + let minDimension = (width < height) ? width : height; + if (minDimension < 640) { + return true; // no dialog, open the link + } else if (minDimension < 1280) { + openDialog(`<a href="//i.juick.com/p/${fname}"><img src="//i.juick.com/photos-1024/${fname}"/></a>`); return false; } else { - openDialog('<a href="//i.juick.com/p/' + fname + '"><img src="//i.juick.com/photos-1024/' + fname + '"/></a>'); - document.querySelector('#dialogw img').style.maxHeight = height + 'px'; + openDialog(`<a href="//i.juick.com/p/${fname}"><img src="//i.juick.com/p/${fname}"/></a>`); return false; } } function openDialog(html) { - var dhtml = '<table id="dialogt"><tr><td><div id="dialogb"></div><div id="dialogw"><div id="dialogc"></div>' + html + '</div></td></tr></table>'; - document.querySelector('body').insertAdjacentHTML('afterbegin', dhtml); + var dialogHtml = ` + <div id="dialogt"> + <div id="dialogb"></div> + <div id="dialogw"> + <div id="dialogc"></div> + ${html} + </div> + </div>`; + document.querySelector('body').insertAdjacentHTML('afterbegin', dialogHtml); document.querySelector('#dialogb').addEventListener('click', closeDialog); document.querySelector('#dialogc').addEventListener('click', closeDialog); } @@ -634,9 +640,9 @@ ready(function () { e.preventDefault(); }); }); - document.querySelectorAll('.ir a').forEach(function (e) { - e.addEventListener('click', function (e) { - var fname = e.target.closest('[data-fname]').getAttribute('data-fname'); + document.querySelectorAll('.ir a[data-fname]').forEach(function (el) { + el.addEventListener('click', function (e) { + let fname = e.target.closest('[data-fname]').getAttribute('data-fname'); if (!showPhotoDialog(fname)) { e.preventDefault(); } diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css index c843cf8e..0958f5e5 100644 --- a/juick-www/src/main/static/style.css +++ b/juick-www/src/main/static/style.css @@ -203,20 +203,15 @@ article .i { text-align: center; } article .ir { - margin-bottom: 10px; - margin-left: 10px; text-align: center; } article .ir a { cursor: -moz-zoom-in; cursor: -webkit-zoom-in; + display: block; } article .ir img { - max-height: 200px; - max-width: 200px; -} -article .irbr { - clear: right; + max-width: 100%; } article>nav.l { display: inline-block; @@ -581,16 +576,23 @@ q { top: 0; width: 100%; z-index: 10; -} -#dialogt td { - text-align: center; - vertical-align: middle; + display: flex; + align-items: center; + justify-content: center; } #dialogw { - display: inline-block; - position: relative; - text-align: left; z-index: 11; + position: relative; + max-height: 90%; + max-width: 90%; +} +#dialogw a { + display: block; +} +#dialogw img { + max-height: 100%; + max-height: 90vh; + max-width: 100%; } #dialogc { background: url("dialog-close.png"); |