fmlist integration, new admin panel, bugfixes

web/css/breadcrumbs.css

@@ -191,40 +191,22 @@ label {
   }
   
   .checkbox label {
-    position: relative;
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    user-select: none;
-  }
-  
-  .checkbox label:before {
-    content:'';
-    appearance: none;
-    -webkit-appearance: none;
-    background-color: transparent;
-    border: 2px solid var(--color-4);
-    padding: 10px;
-    display: inline-block;
-    position: relative;
-    vertical-align: middle;
-    cursor: pointer;
-    margin-right: 5px;
-  }
-  
-  .form-group input:checked + label:before {
-    background-color: var(--color-4);
-  }
-
-  .form-group input:checked + label:after {
-    content: '✓';
     display: block;
-    position: absolute;
-    font-size: 18px;
-    top: -1px;
-    left: 5px;
-    width: 18px;
-    height: 18px;
+    user-select: none;
+    padding: 7px 20px;
+    border-radius: 15px;
+    text-align: center;
+    border: 2px solid var(--color-4);
+    box-sizing: border-box;
+    transition: 0.35s ease background-color, 0.35s ease color;
+  }
+  .checkbox label:hover {
+    background-color: var(--color-2);
+  }
+  
+ .form-group input:checked + label {
+    background-color: var(--color-4);
     color: var(--color-main);
   }
 

web/css/buttons.css

@@ -18,6 +18,10 @@ button:hover {
     opacity: 0.6;
 }
 
+.cursor-disabled {
+    cursor: not-allowed;
+}
+
 .btn-next {
     width: 200px;
     padding: 10px;

web/css/helpers.css

@@ -190,6 +190,10 @@
     padding: 10px;
 }
 
+.p-20 {
+    padding: 20px;
+}
+
 .p-left-10 {
     padding-left: 10px;
 }

web/css/main.css

@@ -73,7 +73,6 @@ body {
 .wrapper-outer-static {
     display: block !important;
     padding-top: 10px;
-    padding-bottom: 10px;
 }
 
 #wrapper {
@@ -84,6 +83,8 @@ body {
     margin: auto;
     position: static;
     transform: none;
+    width: calc(100% - 420px);
+    margin-left: 420px;
 }
 
 a {
@@ -141,4 +142,15 @@ hr {
         margin: 50px auto;
         width: 100%;
     }
+}
+
+@media (max-width: 768px) {
+    #wrapper.setup-wrapper {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    .setup-wrapper h2 {
+        display: initial;
+    }
 }

web/css/panels.css

@@ -52,6 +52,19 @@
     width: 98%;
 }
 
+.panel-100-real {
+    width: 100%;
+}
+
+.panel-full {
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+    max-width: 100% !important;
+    transition: 0.35s ease;
+    box-sizing: border-box;
+}
+
 @media only screen and (max-width: 768px) {
     .panel-75 {
         width: 90%;

web/css/setup.css

@@ -10,14 +10,13 @@
 }
 
 .setup-wrapper h2 {
-    font-size: 32px;
+    font-size: 42px;
     font-weight: 300;
-    padding: 10px;
-    text-transform: uppercase;
+    padding: 20px 15px;
+    text-align: left;
 }
 
-
-.setup-wrapper textarea {
+#wrapper textarea {
     width: 100%;
     max-width: 768px;
     background-color: var(--color-2);
@@ -26,34 +25,92 @@
     padding-top: 10px;
 }
 
+.sidenav {
+    background-color: var(--color-main);
+  }
+
+  .sidenav li a:focus {
+    outline: none;
+  }
+
+  .sidenav-content {
+    flex: 1;
+    position: relative;
+    overflow-y: auto;
+  }
+  
+  .sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+  }
+
+  .sidenav h1 {
+    font-size: 42px;
+    text-transform: initial;
+    font-weight: 300;
+    text-align: center;
+  }
 ul.nav {
     list-style-type: none;
     padding: 15px 0;
-    background: var(--color-2);
     border-radius: 15px;
 }
 
 ul.nav li {
-    display: inline;
-    padding: 15px;
+    padding: 12px 20px;
     cursor: pointer;
     transition: color 0.3s ease, background-color 0.3s ease;
     user-select: none;
 }
 
-ul.nav li:hover {
-    color: var(--color-main);
-    background-color: var(--color-4);
+ul.nav li a {
+    color: var(--color-5) !important;
 }
 
-li.active {
+
+ul.nav li:hover {
     background-color: var(--color-3);
 }
 
+ul.nav li:hover a {
+    color: var(--color-main) !important;
+}
+
+ul.nav li.active a {
+    color: var(--color-main) !important;
+    font-weight: bold;
+}
+
+
+li.active {
+    background-color: var(--color-4);
+}
+
 .tab-content {
     display: none;
 }
 
+#navigation {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 420px; /* Width of the sidenav */
+    height: 100%;
+    z-index: 1000; /* Ensure it's above other content */
+    transition: margin-left 0.3s ease; /* Smooth transition */
+  }
+  
+  .admin-wrapper {
+    transition: margin-left 0.3s ease, width 0.3s ease;
+  }
+
+  .admin-wrapper > .panel-full > .panel-full {
+    min-height: 100vh;
+  }
+
 #map {
     height:400px;
     width:100%;
@@ -66,6 +123,12 @@ li.active {
 .setup-wrapper h3 {
     font-weight: 300;
     margin: 8px;
+    font-size: 36px;
+    color: var(--color-5)
+}
+
+.setup-wrapper h4 {
+    color: var(--color-4);
 }
 
 
@@ -87,18 +150,15 @@ li.active {
 }
 
 @media only screen and (max-width: 768px) {
-    ul.nav {
-        display: flex;
-        overflow-y: scroll;
-        background: transparent;
-    }
-
-    ul.nav li {
-        background-color: var(--color-4);
-        color: var(--color-main);
-        margin: 0px 10px;
-        padding: 15px 35px;
-        border-radius: 15px;
-        min-width: fit-content;
+    .setup-wrapper .panel-33, .setup-wrapper .panel-50 {
+        background: var(--color-1-transparent);
     }
+    #navigation {
+        width: 100vw; /* You can make the sidenav full width on mobile if you want */
+      }
+      
+      .admin-wrapper {
+        margin-left: 0;
+        width: 100%;
+      }
 }

web/css/toast.css

@@ -1,4 +1,11 @@
   /* Basic Toast Styling */
+  #toast-container {
+    position: fixed;
+    top: 20px;
+    right: 96px;
+    z-index: 9999;
+  }
+
   .toast {
     padding: 15px;
     margin-top: 10px;
@@ -8,7 +15,7 @@
     position: relative;
     transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
     transform: translateY(-10px); /* Initial animation state */
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(50px);
   }
 
   .toast:hover {
@@ -87,4 +94,14 @@
     font-size: 16px;
     color: #fff;
     cursor: pointer;
-  }
+  }
+
+  @media only screen and (max-width: 768px) {
+    #toast-container {
+      left: 0;
+      right: 0;
+    }
+    .toast {
+      margin: auto;
+    }
+}