aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar KillyMXI2017-06-21 20:25:04 +0300
committerGravatar KillyMXI2017-06-21 21:49:48 +0300
commit0b6a7c341ecf0dc04f9708f727b8cc134dbd7e85 (patch)
tree56ccdeecf3549aa1c2e250074a9d09112ef00ca8
parent4df1f1aa6f104df1161954b7def736373e14ca65 (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.
-rw-r--r--juick-www/src/main/static/scripts.js34
-rw-r--r--juick-www/src/main/static/style.css30
-rw-r--r--juick-www/src/main/webapp/WEB-INF/views/blog.html9
-rw-r--r--juick-www/src/main/webapp/WEB-INF/views/index.html3
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>