caddy config frontend

frontend/src/app/pages/home/home.scss

@@ -13,8 +13,8 @@
     + button{
       margin-left: 10px;
       margin-bottom: 10px;
-      
+
-  } 
+  }
   }
 }
 
@@ -30,7 +30,7 @@
   border-right: 1px solid rgba(0,0,0,0.06);
   box-shadow: 2px 0 12px rgba(0,0,0,0.03);
   padding: 16px;
-  padding-bottom: 150px; 
+  padding-bottom: 150px;
   overflow: auto;
 }
 
@@ -46,7 +46,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
-  
+
   .loading {
     color: #007bff;
     font-size: 12px;
@@ -59,40 +59,40 @@
   background: #f8f9fa;
   border-radius: 6px;
   border: 1px solid #e9ecef;
-  
+
   .control-group {
     margin-bottom: 12px;
-    
+
     &:last-child {
       margin-bottom: 0;
     }
-    
+
     label {
       display: block;
       font-size: 12px;
       font-weight: 600;
       color: #495057;
       margin-bottom: 4px;
-      
+
       input[type="checkbox"] {
         margin-right: 6px;
       }
     }
-    
+
     input[type="number"] {
       width: 100%;
       padding: 6px 8px;
       border: 1px solid #ced4da;
       border-radius: 4px;
       font-size: 14px;
-      
+
       &:focus {
         outline: none;
         border-color: #007bff;
         box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
       }
     }
-    
+
     .btn {
       width: 100%;
       padding: 8px 12px;
@@ -103,7 +103,7 @@
       cursor: pointer;
       font-size: 12px;
       transition: background-color 0.2s;
-      
+
       &:hover {
         background: #5a6268;
       }
@@ -124,7 +124,7 @@
   width: 50vw;
   max-height: 80vh;
   display: block;
-  
+
 }
 app-edit-form{
   position: fixed;
@@ -141,4 +141,4 @@ app-edit-form{
   box-shadow: 0 0 10px rgba(0,0,0,0.1);
   z-index: 1000;
   padding-bottom: 150px;
-}
+}

frontend/src/app/pages/home/menu/menu.html

@@ -17,6 +17,9 @@
 
             {{ oedbc.label }}
           </div>
+          <div class="what">
+            {{ whats[$index] }}
+          </div>
         </div>
       }
     </div> -->

frontend/src/app/pages/home/menu/menu.ts

@@ -15,17 +15,21 @@ export class Menu {
   public onToggleView?: () => void;
   public onDownloadGeoJSON?: () => void;
   public onDownloadCSV?: () => void;
+  protected whats: any = [];
 
   constructor() {
     let keys = Object.keys(oedb_what_categories.presets.what);
 
     this.oedb_what_categories = [];
+    this.whats = [];
 
     keys.forEach((key) => {
       this.oedb_what_categories.push(
         oedb_what_categories.presets.what[key as keyof typeof oedb_what_categories.presets.what]
       );
+      this.whats.push(key)
     })
+
   }
 
   toggleView() { this.onToggleView && this.onToggleView(); }

frontend/src/styles.scss

@@ -39,16 +39,20 @@ button, .button{
   }
 }
 input{
-  width: 100%;
+  width: 200px;
   padding: 10px 12px;
   border-radius: 10px;
   border: 1px solid rgba(0, 0, 0, 0.12);
   background: #ffffff;
   color: #22303a;
   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02);
+  display: block;
+  margin-bottom: 0.5rem;
+  margin-top: 0.25rem;
 }
 
 
+
 app-root, app-home {
   display: block;
   min-height: 100vh;