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.

4 files changed, 38 insertions, 38 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");
diff --git a/juick-www/src/main/webapp/WEB-INF/views/blog.html b/juick-www/src/main/webapp/WEB-INF/views/blog.html
index 88fe6641..bddaa4e5 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/blog.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/blog.html
@@ -25,17 +25,12 @@
         {{ tags(msg.user.name, msg.tags | tagsList) }}
         </div>
     </header>
-
+    <p>{{ msg | formatMessage }}</p>
     {% if msg.AttachmentType is not empty %}
-    <p class="ir"><a href="//i.juick.com/photos-512/{{ msg.mid }}.{{ msg.AttachmentType }}"
-                     onclick="return showPhotoDialog('{{ msg.mid }}.{{ msg.AttachmentType }}')">
+    <p class="ir"><a href="//i.juick.com/p/{{ msg.mid }}.{{ msg.AttachmentType }}" data-fname="{{ msg.mid }}.{{ msg.AttachmentType }}">
         <img src="//i.juick.com/photos-512/{{ msg.mid }}.{{ msg.AttachmentType }}" alt=""/></a>
     </p>
     {% endif %}
-    <p>{{ msg | formatMessage }}</p>
-    {% if msg.AttachmentType is not empty %}
-    <div class="irbr"></div>
-    {% endif %}
     <nav class="l">
         {% if visitor.uid > 0 %}
         <a href="/post?body=!+%23{{ msg.mid }}" class="a-like">{{ i18n("messages","message.recommend") }}</a>
diff --git a/juick-www/src/main/webapp/WEB-INF/views/index.html b/juick-www/src/main/webapp/WEB-INF/views/index.html
index 082a5464..9299ccf8 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/index.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/index.html
@@ -31,9 +31,6 @@
         <img src="//i.juick.com/photos-512/{{ msg.mid }}.{{ msg.AttachmentType }}" alt=""/></a>
     </p>
     {% endif %}
-    {% if msg.AttachmentType is not empty %}
-    <div class="irbr"></div>
-    {% endif %}
     <nav class="l">
         {% if visitor.uid > 0 %}
         <a href="/post?body=!+%23{{ msg.mid }}" class="a-like">{{ i18n("messages","message.recommend") }}</a>