From 51df4a3aa7d76a0457c89efc55c35f0fa8e17896 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Fri, 27 Oct 2017 08:00:26 +0000 Subject: www: drop dialog-close bitmap --- juick-www/src/main/static/dialog-close.png | Bin 1097 -> 0 bytes juick-www/src/main/static/scripts.js | 14 ++++++++++---- juick-www/src/main/static/style.css | 22 ++++++++++++++-------- 3 files changed, 24 insertions(+), 12 deletions(-) delete mode 100644 juick-www/src/main/static/dialog-close.png (limited to 'juick-www/src') 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 Binary files a/juick-www/src/main/static/dialog-close.png and /dev/null 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(``); + openDialog(``, true); return false; } else { - openDialog(``); + openDialog(``, true); return false; } } @@ -478,18 +478,24 @@ function openPostDialog() { return openDialog(newmessageTemplate); } -function openDialog(html) { +function openDialog(html, image) { var dialogHtml = `
-
+
+
${evilIcon('ei-close')}
+
${html}
`; 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; -- cgit v1.2.3