From 825bf67342c1ec1d5932fbbbdafc8f13cd6b3ec6 Mon Sep 17 00:00:00 2001 From: Matt M Date: Fri, 3 Jun 2022 12:12:27 -0400 Subject: [PATCH 1/3] Modal concept 1 with modal at the bottom. --- layouts/shortcodes/servers.html | 12 ++++++++++++ static/assets/js/modal.js | 22 ++++++++++++++++++++++ static/css/theme-mine.css | 28 ++++++++++++++++++++++++++++ 3 files changed, 62 insertions(+) create mode 100644 static/assets/js/modal.js diff --git a/layouts/shortcodes/servers.html b/layouts/shortcodes/servers.html index 86c3bb7fc..45ed7a3fb 100644 --- a/layouts/shortcodes/servers.html +++ b/layouts/shortcodes/servers.html @@ -1,4 +1,12 @@ +
+

Loading

@@ -50,6 +58,9 @@
Staff last seen:
+
@@ -64,4 +75,5 @@ + \ No newline at end of file diff --git a/static/assets/js/modal.js b/static/assets/js/modal.js new file mode 100644 index 000000000..5061b0a7d --- /dev/null +++ b/static/assets/js/modal.js @@ -0,0 +1,22 @@ +let modal = document.getElementById('serverModal'); +let openModalClass = document.getElementsByClassName('openServerModal'); + +function showModal() { + modal.style.display = "block"; +} +function hideModal() { + modal.style.display = "none"; + +} + +window.onclick = function(event) { + if (event.target == modal) { + hideModal(); + } +} + +window.onload = function() { + for (let i = 0; i < openModalClass.length; i++) { + showModal(); + } +} \ No newline at end of file diff --git a/static/css/theme-mine.css b/static/css/theme-mine.css index 611434d2f..63b2b2eb5 100644 --- a/static/css/theme-mine.css +++ b/static/css/theme-mine.css @@ -625,6 +625,34 @@ svg { } +#serverModal { + height: 100%; + width: 100%; + position: fixed; + left: 0; + top: 0; + background-color: rgba(0,0,0,0.4) !important; + display: none; + z-index: 9998 !important; +} + +.serverModalContent { + text-align: center; + margin: auto; + position: fixed; + width: 100%; + bottom: 0; + background-color: #633884; + z-index: 9999 !important; + + /*transform: translateY(-50%);*/ +} +.modalLink { + color: #CCC; +} +.modalLink:hover { + color: #8888ff; +} @-webkit-keyframes spin { from { From fa4a566b446c1295151a90c4c6878f08cd994ebd Mon Sep 17 00:00:00 2001 From: Matt M Date: Sat, 4 Jun 2022 03:14:34 -0400 Subject: [PATCH 2/3] Modal concept tweaks. Flushed it out with some realistic content. --- layouts/shortcodes/servers.html | 11 ++++++--- static/css/theme-mine.css | 43 +++++++++++++++++++++++++++++---- 2 files changed, 46 insertions(+), 8 deletions(-) diff --git a/layouts/shortcodes/servers.html b/layouts/shortcodes/servers.html index 45ed7a3fb..ee5b641e3 100644 --- a/layouts/shortcodes/servers.html +++ b/layouts/shortcodes/servers.html @@ -1,8 +1,13 @@
diff --git a/static/css/theme-mine.css b/static/css/theme-mine.css index 63b2b2eb5..9d1b5420e 100644 --- a/static/css/theme-mine.css +++ b/static/css/theme-mine.css @@ -641,19 +641,52 @@ svg { margin: auto; position: fixed; width: 100%; + padding-bottom: 5%; + left: 0; bottom: 0; - background-color: #633884; + overflow: scroll; z-index: 9999 !important; - - /*transform: translateY(-50%);*/ + background-color: #2D3033; +} +.modalHeader { + top: 0; + position: relative; + background-color: #633884; + color: #FFF; +} +.modalBody { + margin: auto; + width: 80%; + max-width: 500px; } .modalLink { - color: #CCC; + color: #FFF; + border-radius: 6px; + padding: 6px; + background-color: #633884; + border-color: #633884; } .modalLink:hover { - color: #8888ff; + color: #FFF; + animation: buttonGlow; } +/*.modalDownload {*/ +/* background-color: #633884;*/ +/* border: #792cac;*/ +/*}*/ + +@keyframes buttonGlow { + 0% { + box-shadow: 0 0 3px #2ba805; + } + 50% { + box-shadow: 0 0 10px #49e819; + } + 100% { + box-shadow: 0 0 3px #2ba805; + } +} @-webkit-keyframes spin { from { -webkit-transform: translate(-50%, -50%) rotateZ(0deg); From 7be79323295bef0333b6f0170c882342bb4d909a Mon Sep 17 00:00:00 2001 From: Matt M Date: Sat, 4 Jun 2022 16:48:59 -0400 Subject: [PATCH 3/3] Removed extra gray space at the top of the modal. Minor code cleanup --- static/css/theme-mine.css | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/static/css/theme-mine.css b/static/css/theme-mine.css index 9d1b5420e..1376655ee 100644 --- a/static/css/theme-mine.css +++ b/static/css/theme-mine.css @@ -631,6 +631,7 @@ svg { position: fixed; left: 0; top: 0; + padding-top: 0; background-color: rgba(0,0,0,0.4) !important; display: none; z-index: 9998 !important; @@ -638,7 +639,7 @@ svg { .serverModalContent { text-align: center; - margin: auto; + margin: 0 auto; position: fixed; width: 100%; padding-bottom: 5%; @@ -648,17 +649,22 @@ svg { z-index: 9999 !important; background-color: #2D3033; } + .modalHeader { - top: 0; - position: relative; background-color: #633884; color: #FFF; } + +.modalHeader h2 { + margin-top: 0 !important; +} + .modalBody { margin: auto; width: 80%; max-width: 500px; } + .modalLink { color: #FFF; border-radius: 6px; @@ -666,15 +672,12 @@ svg { background-color: #633884; border-color: #633884; } + .modalLink:hover { color: #FFF; animation: buttonGlow; } -/*.modalDownload {*/ -/* background-color: #633884;*/ -/* border: #792cac;*/ -/*}*/ @keyframes buttonGlow { 0% {