From a90fa5cd63c2b944cf8d322fcbd3e0b636800421 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Wed, 20 Jul 2022 14:39:19 +0200 Subject: [PATCH] More styling of the dashboard --- Models/ThemeConfig/LayerConfig.ts | 4 ++-- UI/BigComponents/TagRenderingChart.ts | 6 ++++-- UI/DashboardGui.ts | 12 ++++++++--- .../pedestrian_path/pedestrian_path.json | 1 - css/index-tailwind-output.css | 20 +++++++++++-------- 5 files changed, 27 insertions(+), 16 deletions(-) diff --git a/Models/ThemeConfig/LayerConfig.ts b/Models/ThemeConfig/LayerConfig.ts index 1ecf1966f..f904a8db7 100644 --- a/Models/ThemeConfig/LayerConfig.ts +++ b/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-=true") } if (this.name === undefined) { diff --git a/UI/BigComponents/TagRenderingChart.ts b/UI/BigComponents/TagRenderingChart.ts index f877688c3..e7ef2060a 100644 --- a/UI/BigComponents/TagRenderingChart.ts +++ b/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 } diff --git a/UI/DashboardGui.ts b/UI/DashboardGui.ts index 05dda2770..600783c56 100644 --- a/UI/DashboardGui.ts +++ b/UI/DashboardGui.ts @@ -108,6 +108,9 @@ export default class DashboardGui { let seenElements = new Set() 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") diff --git a/assets/layers/pedestrian_path/pedestrian_path.json b/assets/layers/pedestrian_path/pedestrian_path.json index 8231a262c..72d61a4bd 100644 --- a/assets/layers/pedestrian_path/pedestrian_path.json +++ b/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", diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index 2419d3ccd..b90fea279 100644 --- a/css/index-tailwind-output.css +++ b/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%; }