diff options
Diffstat (limited to 'juick-www/src')
-rw-r--r-- | juick-www/src/main/static/dialog-close.png | bin | 1097 -> 0 bytes | |||
-rw-r--r-- | juick-www/src/main/static/scripts.js | 14 | ||||
-rw-r--r-- | juick-www/src/main/static/style.css | 22 |
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 Binary files differdeleted file mode 100644 index 9c4275cc..00000000 --- a/juick-www/src/main/static/dialog-close.png +++ /dev/null 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; |