From 16a466a06dc9f4cb15c312ab5e122809d161707c Mon Sep 17 00:00:00 2001 From: David Peterman Date: Tue, 27 Jun 2023 10:29:29 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20'viewport'=20meta=20tag=20?= =?UTF-8?q?and=20improve=20navigation=20panel=20responsiveness?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Viewport meta tag is needed to force mobile browser to NOT render the page in a virtual viewport. --- assets/style.css | 27 ++++++++++++++++++++++----- assets/template.html | 2 +- deployment/server/editor.html | 1 + src/SquareEdit/Contents.ts | 2 +- 4 files changed, 25 insertions(+), 7 deletions(-) diff --git a/assets/style.css b/assets/style.css index 7efb69031..4bfad0c20 100644 --- a/assets/style.css +++ b/assets/style.css @@ -214,8 +214,8 @@ a:hover { display: block; } -/* Neon document-editor-navbar styles for smaller devices */ -@media screen and (max-width: 1023px) { +/* Tov navbar styles styles for smaller devices */ +@media screen and (max-width: 1023px) { .navbar-menu.is-active { display: flex; flex-direction: column; @@ -496,6 +496,7 @@ a:hover { flex-direction: row; align-items: center; justify-content: flex-start; + flex-wrap: wrap; } #display-options-separator { border-right: 2px solid rgb(232 232 232); @@ -568,6 +569,7 @@ a:hover { font-size: 0.875em; justify-content: center; width: 100%; + flex-wrap: wrap; } #displayContents .button { width: 10.5em; @@ -687,8 +689,10 @@ a:hover { flex-direction: row; align-items: center; justify-content: space-between; - width: 95%; + width: 98%; + flex-wrap: wrap; margin: 5px 0px; + gap: 10px; } .notification-wrapper { padding: 10px; @@ -698,15 +702,28 @@ a:hover { justify-content: space-between; align-items: center; width: 85%; + flex-grow: 1; } .remove-notif-icon-wrapper { - height: 100%; - width: 7%; + /* height: 100%; */ + width: 30px; } .remove-notif-icon { cursor: pointer; } +/* Navigation panel styles for smaller devices */ +@media screen and (max-width: 1023px) { + .notification-container { + justify-content: center; + gap: 7px; + } + .remove-notif-icon-wrapper { + min-width: 30px; + } +} + + /* ----------------------- */ /* Neon Notifications /* ----------------------- */ diff --git a/assets/template.html b/assets/template.html index a125a3cf4..7e20774de 100644 --- a/assets/template.html +++ b/assets/template.html @@ -151,7 +151,7 @@
-
+
diff --git a/deployment/server/editor.html b/deployment/server/editor.html index 9fa1ab37a..e57ab18bd 100644 --- a/deployment/server/editor.html +++ b/deployment/server/editor.html @@ -1,6 +1,7 @@ + Neon