💄 Add 'viewport' meta tag and improve navigation panel responsiveness

- Viewport meta tag is needed to force mobile browser to NOT render the page in a virtual viewport.
DDMAL · Jul 5, 2023 · 2262bd2 · 2262bd2
1 parent cc90d41
commit 2262bd2
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git 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
@@ -151,7 +151,7 @@
   <div id="left-column">
     <div id="container"></div>
   </div>
-  <div class="is-hidden-mobile" id="right-column">
+  <div id="right-column">
       <div id="display_controls"></div>
       <div id="insert_controls"></div>
       <div id="edit_controls"></div>

diff --git a/deployment/server/editor.html b/deployment/server/editor.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width">
   <head>
     <title>Neon</title>
     <script

diff --git a/src/SquareEdit/Contents.ts b/src/SquareEdit/Contents.ts
@@ -561,4 +561,4 @@ export const errorLogsPanelContents =
             <use id="toggleErrorLog" xlink:href="${__ASSET_PREFIX__}/assets/img/icons.svg#dropdown-down"></use>
         </svg>
     </div>
-    <div class="panel-contents" id="errorLogContents" style="overflow: visible; padding: 0.5em 0.75em;"><div>`;
+    <div class="panel-contents" id="errorLogContents" style="overflow: scroll; padding: 0.5em 0.75em;"><div>`;