aboutsummaryrefslogtreecommitdiff
path: root/juick-www/src/main
diff options
context:
space:
mode:
Diffstat (limited to 'juick-www/src/main')
-rw-r--r--juick-www/src/main/static/dialog-close.pngbin1097 -> 0 bytes
-rw-r--r--juick-www/src/main/static/scripts.js14
-rw-r--r--juick-www/src/main/static/style.css22
3 files changed, 24 insertions, 12 deletions
diff --git a/juick-www/src/main/static/dialog-close.png b/juick-www/src/main/static/dialog-close.png
deleted file mode 100644
index 9c4275cc..00000000
--- a/juick-www/src/main/static/dialog-close.png
+++ /dev/null
Binary files differ
diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index 06fd78c7..7dc24dd2 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -455,10 +455,10 @@ function showPhotoDialog(fname) {
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>`);
+ openDialog(`<a href="//i.juick.com/p/${fname}"><img src="//i.juick.com/photos-1024/${fname}"/></a>`, true);
return false;
} else {
- openDialog(`<a href="//i.juick.com/p/${fname}"><img src="//i.juick.com/p/${fname}"/></a>`);
+ openDialog(`<a href="//i.juick.com/p/${fname}"><img src="//i.juick.com/p/${fname}"/></a>`, true);
return false;
}
}
@@ -478,18 +478,24 @@ function openPostDialog() {
return openDialog(newmessageTemplate);
}
-function openDialog(html) {
+function openDialog(html, image) {
var dialogHtml = `
<div id="dialogt">
<div id="dialogb"></div>
<div id="dialogw">
- <div id="dialogc"></div>
+ <div id="dialog_header">
+ <div id="dialogc">${evilIcon('ei-close')}</div>
+ </div>
${html}
</div>
</div>`;
let body = document.querySelector('body');
body.classList.add('dialog-opened');
body.insertAdjacentHTML('afterbegin', dialogHtml);
+ if (image) {
+ let header = document.querySelector('#dialog_header');
+ header.classList.add('header_image');
+ }
document.addEventListener('keydown', closeDialogListener);
document.querySelector('#dialogb').addEventListener('click', closeDialog);
document.querySelector('#dialogc').addEventListener('click', closeDialog);
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index 84cfaba6..080a179e 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -558,6 +558,7 @@ q {
border: 1px solid #CCC;
box-sizing: border-box;
margin: 0 0 5px 0;
+ margin-top: 20px;
max-height: 6em;
min-width: 280px;
padding: 4px;
@@ -684,15 +685,21 @@ q {
max-height: 90vh;
max-width: 100%;
}
+#dialog_header {
+ width: 100%;
+ height: 44px;
+ position: fixed;
+ display: flex;
+ flex-direction: row-reverse;
+ align-items: center;
+}
+.header_image {
+ background: rgba(0, 0, 0, 0.28);
+}
#dialogc {
- background: url("dialog-close.png");
cursor: pointer;
- height: 30px;
- position: absolute;
- right: -15px;
- top: -15px;
- width: 30px;
- z-index: 12;
+ color: #ccc;
+ padding-right: 6px;
}
.dialoglogin {
background: #EEEEE5;
@@ -730,7 +737,6 @@ q {
}
.dialogshare {
background: #EEEEE5;
- border: 1px solid #999;
min-width: 300px;
overflow: auto;
padding: 20px;