diff options
Diffstat (limited to 'juick-www/src/main')
| -rw-r--r-- | juick-www/src/main/static/scripts.js | 34 | ||||
| -rw-r--r-- | juick-www/src/main/static/style.css | 30 | ||||
| -rw-r--r-- | juick-www/src/main/webapp/WEB-INF/views/blog.html | 9 | ||||
| -rw-r--r-- | juick-www/src/main/webapp/WEB-INF/views/index.html | 3 |
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> |