More styling of the dashboard

Models/ThemeConfig/LayerConfig.ts

@@ -367,9 +367,9 @@ export default class LayerConfig extends WithContextLoader {
                 extraProps.push('This layer is not visible by default and must be enabled in the filter by the user. ')
             }
             if (this.title === undefined) {
-                extraProps.push("This layer cannot be toggled in the filter view. If you import this layer in your theme, override `title` to make this toggleable.")
+                extraProps.push("Elements don't have a title set and cannot be toggled nor will they show up in the dashboard. If you import this layer in your theme, override `title` to make this toggleable.")
             }
-            if (this.title === undefined && this.shownByDefault === false) {
+            if (this.name === undefined && this.shownByDefault === false) {
                 extraProps.push("This layer is not visible by default and the visibility cannot be toggled, effectively resulting in a fully hidden layer. This can be useful, e.g. to calculate some metatags. If you want to render this layer (e.g. for debugging), enable it by setting the URL-parameter layer-<id>=true")
             }
             if (this.name === undefined) {

UI/BigComponents/TagRenderingChart.ts

@@ -44,7 +44,8 @@ export default class TagRenderingChart extends Combine {
 
         const mappings = tagRendering.mappings ?? []
         if (mappings.length === 0 && tagRendering.freeform?.key === undefined) {
-            super(["TagRendering", tagRendering.id, "does not have mapping or a freeform key - no stats can be made"])
+            super([])
+            this.SetClass("hidden")
             return;
         }
         let unknownCount = 0;
@@ -96,7 +97,8 @@ export default class TagRenderingChart extends Combine {
         }
 
         if (unknownCount + notApplicable === features.length) {
-            super(["No relevant data for ", tagRendering.id])
+            super([])
+            this.SetClass("hidden")
             return
         }
 

UI/DashboardGui.ts

@@ -108,6 +108,9 @@ export default class DashboardGui {
         let seenElements = new Set<string>()
         for (const elementsWithMetaElement of elementsWithMeta) {
             const layer = layers[elementsWithMetaElement.layer]
+            if(layer.title === undefined){
+                continue
+            }
             const filtered = this.state.filteredLayers.data.find(fl => fl.layerDef == layer);
             for (let i = 0; i < elementsWithMetaElement.features.length; i++) {
                 const element = elementsWithMetaElement.features[i];
@@ -249,13 +252,16 @@ export default class DashboardGui {
                         continue
                     }
                     els.push(new Title(layer.name))
+                    
+                    const layerStats = []
                     for (const tagRendering of layer.tagRenderings) {
                         const chart = new TagRenderingChart(featuresForLayer, tagRendering, {
                             chartclasses: "w-full",
                             chartstyle: "height: 60rem"
                         })
-                        els.push(chart)
+                        layerStats.push(chart.SetClass("w-full lg:w-1/3"))
                     }
+                    els.push(new Combine(layerStats).SetClass("flex flex-wrap"))
                 }
                 return new Combine(els)
             }))
@@ -282,13 +288,13 @@ export default class DashboardGui {
                 this.allDocumentationButtons(),
                 new LanguagePicker(Object.keys(state.layoutToUse.title.translations)).SetClass("mt-2"),
                 new BackToIndex()
-            ]).SetClass("w-1/2 m-4 flex flex-col shrink-0 grow-0"),
+            ]).SetClass("w-1/2 lg:w-1/4 m-4 flex flex-col shrink-0 grow-0"),
             new VariableUiElement(this.currentView.map(({title, contents}) => {
                 return new Combine([
                     new Title(Translations.W(title), 2).SetClass("shrink-0 border-b-4 border-subtle"),
                     Translations.W(contents).SetClass("shrink-2 overflow-y-auto block")
                 ]).SetClass("flex flex-col h-full")
-            })).SetClass("w-1/2 m-4 p-2 border-2 border-subtle rounded-xl m-4 ml-0 mr-8 shrink-0 grow-0"),
+            })).SetClass("w-1/2 lg:w-3/4 m-4 p-2 border-2 border-subtle rounded-xl m-4 ml-0 mr-8 shrink-0 grow-0"),
            
         ]).SetClass("flex h-full")
             .AttachTo("leafletDiv")

assets/layers/pedestrian_path/pedestrian_path.json

@@ -16,7 +16,6 @@
       ]
     }
   },
-  "title": {},
   "description": {
     "en": "Pedestrian footpaths, especially used for indoor navigation and snapping entrances to this layer",
     "nl": "Pad voor voetgangers, in het bijzonder gebruikt voor navigatie binnen gebouwen en om aan toegangen vast te klikken in deze laag",

css/index-tailwind-output.css

@@ -1050,10 +1050,6 @@ video {
   height: 6rem;
 }
 
-.h-80 {
-  height: 20rem;
-}
-
 .h-64 {
   height: 16rem;
 }
@@ -1138,10 +1134,6 @@ video {
   width: 100%;
 }
 
-.w-80 {
-  width: 20rem;
-}
-
 .w-24 {
   width: 6rem;
 }
@@ -1192,6 +1184,10 @@ video {
   width: max-content;
 }
 
+.w-32 {
+  width: 8rem;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -2829,6 +2825,14 @@ input {
     width: 75%;
   }
 
+  .lg\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .lg\:w-1\/4 {
+    width: 25%;
+  }
+
   .lg\:w-1\/6 {
     width: 16.666667%;
   }