💄 UI responsiveness fixes

Neon-gh/assets/style.css

@@ -1,12 +1,14 @@
 /* 
-    Note: Bulma styles are a mess. We need to get rid of it eventually. 
-    In the meantime, we use !important occasionally to override Bulma.
+    Note: Bulma styles are outdated and are not up to industry standards. 
+    We need to get rid of it eventually. 
+    In the meantime, we use '!important' occasionally to override Bulma.
 */
 
 @import url("https://unpkg.com/[email protected]/build/diva.css");
 
-
-/* Section: General styles */
+/* ----------------------- */
+/* General styles
+/* ----------------------- */
 
 html {
     overflow: hidden;
@@ -21,6 +23,7 @@ body {
     margin: 0px;
     display: flex;
     flex-direction: column;
+    overflow: scroll;
 }
 
 a {
@@ -36,8 +39,10 @@ a:hover {
     justify-content: flex-end;
 }
 
+/* ----------------------- */
+/* Section: Top Navbar 
+/* ----------------------- */
 
-/* Section: Top Navbar */
 /* CSS in here could use a little clean-up */
 
 .navbar.is-light {
@@ -209,45 +214,80 @@ a:hover {
     display: block;
 }
 
-/* Tablet and mobile styles for navbar */
-@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;
         background-color: #e2e2e2;
+        min-height: 91vh;
+        justify-content: space-between;
+        overflow: scroll;
+        gap: 30px;
+        padding: 0;
+    }
+    .navbar-start {
+        gap: 20px;
     }
     .navbar-main-content-container {
         display: flex;
-        flex-direction: column;
-        height: 50%;
+        flex-direction: row;
+        height: fit-content;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+        align-content: space-between;
+        gap: 40px 0px;
+    }
+    #unsaved-changes-container {
+        transform: scale(0.5);
     }
     .navbar-item.has-dropdown.is-hoverable {
         color: #68A7AD;
-        margin-top: 3vh;
+        flex-grow: 1;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        align-items: flex-start;
     }
     .navbar-item.has-dropdown.is-hoverable:hover {
         background-color: #e2e2e2 !important;
         color: #68A7AD !important;
         border-radius: 0px;
     }
+    .navbar-element.navbar-btn {
+        cursor: pointer;
+        overflow: hidden;
+        border-bottom: 1px solid #7cb1b7;
+        font-size: 1.2rem;
+        width: 100%;
+    }
+    .navbar-btn-text {
+        font-weight: bold;
+    }
     .navbar-dropdown {
-        border-top: 1px solid #7cb1b7;
+        border-top: none;
         box-shadow: none;
         min-width: 13vw;
+        gap: 5px;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        padding: 0;
     }
-    .navbar-element.navbar-btn:hover {
-        background-color: #e2e2e2;
-        color: #7cb1b7 !important;
-        cursor: auto;
+    .navbar-dropdown-item {
+        font-size: 1rem;
     }
-}
-@media only screen and (max-width: 900px) {
-    #navMenu {
-        height: 100%;
+    #feedback-form-btn-container {
+        margin: 0;
+        border: none;
+        border-radius: 0;
     }
 }
 
-/* Section: Editor Main Body */
+/* ----------------------- */
+/* Editor Main Body
+/* ----------------------- */
 
 #editor-body-container {
     overflow: hidden;
@@ -294,8 +334,10 @@ a:hover {
     height: 100%;
 }
 
+/* ----------------------- */
+/* Section: Editor Panel
+/* ----------------------- */
 
-/* Section: Editor Panel */
 /* Could use a little clean-up */
 
 #right-column {
@@ -325,7 +367,6 @@ a:hover {
 .panel-heading.focused {
     text-decoration: underline;
     text-decoration-thickness: 2px;
-    /* background-color: #b6d8f2; */
 }
 .panel-heading-title {
     max-width: 0px;
@@ -455,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);
@@ -527,6 +569,7 @@ a:hover {
     font-size: 0.875em;
     justify-content: center;
     width: 100%;
+    flex-wrap: wrap;
 }
 #displayContents .button {
     width: 10.5em;
@@ -646,30 +689,44 @@ 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-left: 10px; */
-    /* padding-right: 10px; */
     padding: 10px;
-    /* border: 1px solid lightgray; */
     background-color: #efefef;
     border-radius: 4px;
     display: flex;
     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;
 }
 
-/* Section: Neon Notifications */
+/* 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
+/* ----------------------- */
 
 /* notification keyframes */
 @keyframes slideInFromLeft {
@@ -708,16 +765,16 @@ a:hover {
 }
 
 .neon-notification-warning {
-    /* background: #fae095; */
     background: #f5c144;
 }
 
 .neon-notification-success {
     background: #6dc492;
 }
 
-
-/* Section: Loading Animation */ 
+/* ---------------------------- */
+/* Section: Loading Animation
+/* ---------------------------- */ 
 
 /* loading animation keyframes */
 @keyframes spin {
@@ -750,7 +807,9 @@ a:hover {
     animation: spin 2s linear infinite;
 }
 
-/* Section: Modal Windows */
+/* ----------------------- */
+/* Section: Modal Windows
+/* ----------------------- */
 
 /* neon modal veil */
 #neon-modal-window-container {

Neon-gh/assets/template.html

@@ -20,7 +20,7 @@
       <div class="navbar-main-content-container" id="navbar-main-content-container-top">
         <div class="navbar-element" id="filename"></div>
         <div id="unsaved-changes-container">
-          <img class="navbar-element" id="file-saved" src="/Neon/assets/img/saved-icon.svg">
+          <img class="navbar-element" id="file-saved" src="/Neon/assets/img/saved-icon.svg" alt="Your work is saved">
         </div>
         <div class="navbar-element" id="file-status"></div>
       </div>
@@ -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>