Last styling tweaks

UI/BigComponents/FilterView.ts

@@ -32,7 +32,11 @@ export default class FilterView extends VariableUiElement {
         super(
             filteredLayer.map((filteredLayers) => {
                     // Create the views which toggle layers (and filters them) ...
-                    let elements = filteredLayers?.map(l => FilterView.createOneFilteredLayerElement(l))
+                    let elements = filteredLayers
+                        ?.map(l => FilterView.createOneFilteredLayerElement(l)?.SetClass("filter-panel"))
+                        ?.filter(l => l !== undefined)
+                    elements[0].SetClass("first-filter-panel")
+                
                     // ... create views for non-interactive layers ...
                     elements = elements.concat(tileLayers.map(tl => FilterView.createOverlayToggle(tl)))
                     // ... and add the dropdown to select a different background
@@ -115,7 +119,7 @@ export default class FilterView extends VariableUiElement {
             )
 
 
-        const toggleClasses = "layer-toggle flex flex-wrap items-center pt-2 pb-1 px-0";
+        const toggleClasses = "layer-toggle flex flex-wrap items-center pt-2 pb-2 px-0";
         const layerIcon = layer.defaultIcon()?.SetClass("flex-shrink-0 w-8 h-8 ml-2")
         const layerIconUnchecked = layer.defaultIcon()?.SetClass("flex-shrink-0 opacity-50  w-8 h-8 ml-2")
 
@@ -164,7 +168,7 @@ export default class FilterView extends VariableUiElement {
         }
 
         return new Combine(toShow)
-            .SetClass("flex flex-col p-2 ml-12 pl-1 pt-0 border-b-2 border-detail mb-4")
+            .SetClass("flex flex-col p-2 ml-12 pl-1 pt-0 layer-filters")
 
     }
 

assets/themes/natuurpunt/natuurpunt.css

@@ -61,6 +61,19 @@ h1, h2, h3, h4 {
     stroke: white !important;
 }
 
+.btn-secondary {
+    background-color: var(--unsubtle-detail-color);
+}
+
+.btn-secondary:hover {
+    background-color: var(--catch-detail-color);
+}
+
+.layer-toggle {
+    border-top: 2px solid var(--foreground-color);
+    margin-top: 0.25rem;
+}
+
 .md\:rounded-xl {
     border-radius: unset !important;
 }
@@ -72,3 +85,26 @@ h1, h2, h3, h4 {
 .rounded-3xl {
     border-radius: unset !important;
 }
+
+.layer-toggle {
+    /* The checkbox that toggles a single layer */
+}
+
+.filter-panel {
+    /* The panel for a single layer, containing both the toggle and the filters (if any) */
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-top: 2px solid var(--foreground-color);
+    display: block;
+    border-bottom: unset;
+    margin-bottom: unset;
+}
+
+.layer-filters {
+    /* If needed, the panel which contains the extra filters for a layer */
+}
+
+.first-filter-panel {
+    /* Additional class on the first layer filter */
+    border-top: unset !important;
+}

css/index-tailwind-output.css

@@ -1394,10 +1394,6 @@ video {
   border-bottom-width: 1px;
 }
 
-.border-b-2 {
-  border-bottom-width: 2px;
-}
-
 .border-gray-500 {
   --tw-border-opacity: 1;
   border-color: rgba(107, 114, 128, var(--tw-border-opacity));
@@ -1550,6 +1546,10 @@ video {
   padding-top: 0.5rem;
 }
 
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .pt-0 {
   padding-top: 0px;
 }
@@ -1578,10 +1578,6 @@ video {
   padding-top: 0.125rem;
 }
 
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1930,7 +1926,8 @@ a {
 }
 
 .btn-secondary {
-  background-color: var(--unsubtle-detail-color);
+  background-color: var(--catch-detail-color);
+  filter: saturate(0.8);
 }
 
 .btn-secondary:hover {
@@ -2354,6 +2351,25 @@ input {
   background-color: #f2f2f2;
 }
 
+.layer-toggle {
+  /* The checkbox that toggles a single layer */
+}
+
+.layer-filters {
+  /* If needed, the panel which contains the extra filters for a layer */
+  margin-bottom: 1rem;
+}
+
+.filter-panel {
+  /* The panel for a single layer, containing both the toggle and the filters (if any) */
+  border-bottom: 2px solid lightgrey;
+  margin-bottom: 0.5rem;
+}
+
+.first-filter-panel {
+  /* Additional class on the first layer filter */
+}
+
 .hover\:bg-indigo-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(199, 210, 254, var(--tw-bg-opacity));
@@ -2645,3 +2661,4 @@ input {
     display: inline;
   }
 }
+

index.css

@@ -163,7 +163,8 @@ a {
 }
 
 .btn-secondary {
-    background-color: var(--unsubtle-detail-color);
+    background-color: var(--catch-detail-color);
+    filter: saturate(0.8);
 }
 
 .btn-secondary:hover {
@@ -540,3 +541,23 @@ input {
 .zebra-table tr:nth-child(even) {
     background-color: #f2f2f2;
 }
+
+.layer-toggle {
+    /* The checkbox that toggles a single layer */
+}
+
+.layer-filters {
+    /* If needed, the panel which contains the extra filters for a layer */
+    margin-bottom: 1rem;
+}
+
+.filter-panel {
+    /* The panel for a single layer, containing both the toggle and the filters (if any) */
+    border-bottom: 2px solid lightgrey;
+    margin-bottom: 0.5rem;
+}
+
+.first-filter-panel {
+    /* Additional class on the first layer filter */
+}
+