@geogirafe/lib-geoportal 1.2.0-dev.2854703696 → 1.2.0-dev.2857870396

package/assets/i18n/de.json

@@ -298,6 +298,7 @@
     "layers selected": "ausgewählte Ebene(n)",
     "Layout": "Layout",
     "layout-panel": "Ansichtslayout",
+    "layout-type": "Layout",
     "less than": "kleiner als",
     "less than or equal to": "kleiner oder gleich",
     "LiDAR profile service error": "Fehler beim LiDAR-Profil-Dienst",
@@ -576,7 +577,6 @@
     "using the search bar": "nutzen Sie die Suche",
     "Value": "Wert",
     "Version": "Version",
-    "View": "Ansicht",
     "view_bookmarks": "Lesezeichen anzeigen",
     "visual": "Darstellung",
     "warn": "Warnung",

package/assets/i18n/en.json

@@ -300,6 +300,7 @@
     "layers selected": "layer(s) selected",
     "Layout": "Layout",
     "layout-panel": "Interface layout",
+    "layout-type": "Layout",
     "less than": "less than",
     "less than or equal to": "less than or equal to",
     "LiDAR profile service error": "LiDAR profile service error",
@@ -579,7 +580,6 @@
     "using the search bar": "using the search bar",
     "Value": "Value",
     "Version": "Version",
-    "View": "View",
     "view_bookmarks": "View bookmarks",
     "visual": "Visual",
     "warn": "Warning",

package/assets/i18n/fr.json

@@ -298,6 +298,7 @@
     "layers selected": "couche(s) sélectionnée(s)",
     "Layout": "Mise en page",
     "layout-panel": "Disposition de l'interface",
+    "layout-type": "Disposition",
     "less than": "est inférieur à",
     "less than or equal to": "est inférieur ou égal à",
     "LiDAR profile service error": "Erreur du service de profil LiDAR",
@@ -576,7 +577,6 @@
     "using the search bar": "en utilisant la barre de recherche",
     "Value": "Valeur",
     "Version": "Version",
-    "View": "Vue",
     "view_bookmarks": "Voir les favoris",
     "visual": "Présentation",
     "warn": "Avertissement",

package/assets/i18n/it.json

@@ -298,6 +298,7 @@
     "layers selected": "layer nella selezione",
     "Layout": "Layout",
     "layout-panel": "Layout dell'interfaccia",
+    "layout-type": "Layout",
     "less than": "minore di",
     "less than or equal to": "minore o uguale a",
     "LiDAR profile service error": "Errore del servizio di profilo LiDAR",
@@ -576,7 +577,6 @@
     "using the search bar": "utilizzando la barra di ricerca",
     "Value": "Valore",
     "Version": "Versione",
-    "View": "Vista",
     "view_bookmarks": "Visualizza segnalibri",
     "visual": "Rappresentazione",
     "warn": "Avviso",

package/assets/icons/layout-1x1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path fill="none" stroke="#000" stroke-width="3" d="M3.5 3.5h32v32h-32z"/></svg>

package/assets/icons/layout-1x2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g fill="none" stroke="#000" stroke-width="3"><path d="M3.5 3.5h32v32h-32zM3.5 19.5h32"/></g></svg>

package/assets/icons/layout-2x1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g fill="none" stroke="#000" stroke-width="3"><path d="M3.5 3.5h32v32h-32zM19.5 3.5v32"/></g></svg>

package/assets/icons/layout-2x2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g fill="none" stroke="#000" stroke-width="3"><path d="M3.5 3.5h32v32h-32zM19.5 3.5v32M3.5 19.5h32"/></g></svg>

package/components/layout/component.d.ts

@@ -22,6 +22,11 @@ declare class LayoutComponent extends GirafeHTMLElement implements IGirafePanel
     private get layout();
     /** The Layouts the user can choose between, as configured in the application. */
     get allowedLayouts(): LayoutType[];
+    /** The Layouts the user can choose between, with the icon illustrating each of them. */
+    get layoutButtons(): {
+        type: LayoutType;
+        icon: string;
+    }[];
     /** The Cells of the current Layout, one line of the schema per row of the Grid. */
     get cellRows(): {
         index: number;
@@ -36,7 +41,7 @@ declare class LayoutComponent extends GirafeHTMLElement implements IGirafePanel
      * so that the panel also follows the changes made outside of it (shared state, other components).
      */
     private syncSelects;
-    private onLayoutSelect;
+    onLayoutSelect(selectedLayout: LayoutType): void;
     /**
      * Places a Component in a Cell of the Grid.
      * A Component can only be displayed once: if it is already displayed in another Cell,

package/components/layout/component.js

@@ -1,7 +1,13 @@
 import { html as uHtml } from 'uhtml';
 // SPDX-License-Identifier: Apache-2.0
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
-import { AVAILABLE_CELL_COMPONENTS, distributeCells, getDefaultSizes, getGridSize, isCellComponent, isLayoutType } from '../../tools/state/layout.js';
+import { AVAILABLE_CELL_COMPONENTS, distributeCells, getDefaultSizes, getGridSize, isCellComponent } from '../../tools/state/layout.js';
+const LAYOUT_ICONS = {
+    '1x1': 'icons/layout-1x1.svg',
+    '2x1': 'icons/layout-2x1.svg',
+    '1x2': 'icons/layout-1x2.svg',
+    '2x2': 'icons/layout-2x2.svg'
+};
 class LayoutComponent extends GirafeHTMLElement {
     templateUrl = null;
     styleUrls = null;
@@ -9,10 +15,10 @@ class LayoutComponent extends GirafeHTMLElement {
         return uHtml `<style>
 .hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}button,input,select,textarea{font:inherit}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);cursor:pointer;width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}.tippy-box{background-color:var(--bkg-color)!important;border:var(--app-standard-border)!important}.tippy-content{color:var(--text-color)!important}.tippy-arrow{color:var(--bkg-color)!important}.tippy-box[data-theme~=error]{background-color:var(--error-color);white-space:pre-line}div.tippy-box[data-theme=image-popup]{border:var(--app-standard-border)!important;& div.tippy-content{background-color:var(--bkg-color)!important;& img{max-width:20rem;max-height:20rem}}& div.tippy-arrow{color:var(--bkg-color)!important}}
 </style><style>
-#panel{color:var(--text-color)}#panel>div{padding:1rem}.hidden{display:none}fieldset{margin-top:1rem}.cells-row{gap:.25rem;margin-top:.5rem;display:flex}.cell-select{flex:1 1 0;min-width:0}.option{margin-top:.5rem;display:flex}.option select,.option input{flex-grow:1}.option input.gg-checkbox{flex-grow:0}.option label{margin-right:.5rem}.option label:after{content:" :"}
+#panel{color:var(--text-color)}#panel>div{padding:1rem}.hidden{display:none}fieldset{margin-top:1rem}.layouts-row{gap:.25rem;margin-top:.5rem;display:flex}.layouts-row button{border:1px solid #0000;border-radius:3px}.layouts-row button.selected{border-color:var(--text-color-grad2);background-color:var(--bkg-color-grad1)}.cells-row{gap:.25rem;margin-top:.5rem;display:flex}.cell-select{flex:1 1 0;min-width:0}.option{margin-top:.5rem;display:flex}.option select,.option input{flex-grow:1}.option input.gg-checkbox{flex-grow:0}.option label{margin-right:.5rem}.option label:after{content:" :"}
 </style>
 <style>${this.customStyle}</style>
-<div id="panel"><div><div class="option"><label for="layout" i18n="View" class="gg-label">View</label> <select id="layout" class="gg-select" onchange="${this.onLayoutSelect}">${this.allowedLayouts.map((layout) => uHtml `<option value="${layout}" ?selected="${layout === this.state.layout.type}">${layout}</option>`)}</select></div><fieldset class="cells-group"><legend i18n="Displayed components">Displayed components</legend>${this.cellRows.map((cellRow) => uHtml `<div class="cells-row">${cellRow.map((cell) => uHtml ` <select class="gg-select cell-select" onchange="${(e) => this.onCellSelect(e, cell.index)}"><option i18n="(empty)" value="" ?selected="${cell.content === null}">(empty)</option>${this.availableComponents.map((component) => uHtml `<option i18n="${component.label}" value="${component.id}" ?selected="${cell.content === component.id}">${component.label}</option>`)}</select> `)}</div>`)}</fieldset><fieldset class="${this.is3dDisplayed ? 'shadows-group' : 'shadows-group hidden'}"><legend i18n="Shadows">Shadows</legend><div class="option shadows-option"><label for="shadowsCheckbox" i18n="Enable shadows" class="gg-label">Enable shadows</label> <input id="shadowsCheckbox" type="checkbox" class="gg-checkbox" ?checked="${this.state.globe.shadows}" onchange="${this.onShadowsToggle}"></div><div class="${this.state.globe.shadows ? 'option shadows-date' : 'option shadows-date hidden'}"><label for="shadowsDate" i18n="Date" class="gg-label">Date</label> <input id="shadowsDate" type="datetime-local" class="gg-input"></div></fieldset></div></div>
+<div id="panel"><div><fieldset><legend i18n="layout-type">Layout</legend><div class="layouts-row">${this.layoutButtons.map((layout) => uHtml ` <button tip="${layout.type}" class="${layout.type === this.state.layout.type ? 'gg-icon-button gg-medium selected' : 'gg-icon-button gg-medium'}" onclick="${() => this.onLayoutSelect(layout.type)}"><img alt="${layout.type}" src="${layout.icon}"></button> `)}</div></fieldset><fieldset class="cells-group"><legend i18n="Displayed components">Displayed components</legend>${this.cellRows.map((cellRow) => uHtml `<div class="cells-row">${cellRow.map((cell) => uHtml ` <select class="gg-select cell-select" onchange="${(e) => this.onCellSelect(e, cell.index)}"><option i18n="(empty)" value="" ?selected="${cell.content === null}">(empty)</option>${this.availableComponents.map((component) => uHtml `<option i18n="${component.label}" value="${component.id}" ?selected="${cell.content === component.id}">${component.label}</option>`)}</select> `)}</div>`)}</fieldset><fieldset class="${this.is3dDisplayed ? 'shadows-group' : 'shadows-group hidden'}"><legend i18n="Shadows">Shadows</legend><div class="option shadows-option"><label for="shadowsCheckbox" i18n="Enable shadows" class="gg-label">Enable shadows</label> <input id="shadowsCheckbox" type="checkbox" class="gg-checkbox" ?checked="${this.state.globe.shadows}" onchange="${this.onShadowsToggle}"></div><div class="${this.state.globe.shadows ? 'option shadows-date' : 'option shadows-date hidden'}"><label for="shadowsDate" i18n="Date" class="gg-label">Date</label> <input id="shadowsDate" type="datetime-local" class="gg-input"></div></fieldset></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     isPanelVisible = false;
@@ -22,7 +28,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     availableComponents = AVAILABLE_CELL_COMPONENTS;
     constructor() {
         super('layout');
-        this.onLayoutSelect = this.onLayoutSelect.bind(this);
         this.onShadowsToggle = this.onShadowsToggle.bind(this);
     }
     get layout() {
@@ -32,6 +37,10 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     get allowedLayouts() {
         return this.context.configManager.Config.interface.layouts;
     }
+    /** The Layouts the user can choose between, with the icon illustrating each of them. */
+    get layoutButtons() {
+        return this.allowedLayouts.map((type) => ({ type: type, icon: LAYOUT_ICONS[type] }));
+    }
     /** The Cells of the current Layout, one line of the schema per row of the Grid. */
     get cellRows() {
         const { columns, rows } = getGridSize(this.layout.type);
@@ -61,21 +70,12 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
      * so that the panel also follows the changes made outside of it (shared state, other components).
      */
     syncSelects() {
-        const layoutSelect = this.getById('layout');
-        if (layoutSelect) {
-            layoutSelect.value = this.layout.type;
-        }
         const cells = this.layout.cells;
         this.shadow.querySelectorAll('.cell-select').forEach((select, index) => {
             select.value = cells[index] ?? '';
         });
     }
-    onLayoutSelect(event) {
-        const selectedLayout = event.target?.value;
-        if (!isLayoutType(selectedLayout) || !this.allowedLayouts.includes(selectedLayout)) {
-            console.error(`${selectedLayout} is not a valid layout!`);
-            return;
-        }
+    onLayoutSelect(selectedLayout) {
         this.layout.cells = distributeCells(selectedLayout, this.layout.cells);
         this.layout.sizes = getDefaultSizes(selectedLayout);
         this.layout.type = selectedLayout;

package/components/layout/style.css

@@ -15,6 +15,24 @@ fieldset {
   margin-top: 1rem;
 }
 
+/* The Layouts the user can choose between, one icon button per Layout. */
+.layouts-row {
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+}
+
+/* Transparent border on every button, so that selecting one does not move the others. */
+.layouts-row button {
+  border: solid 1px transparent;
+  border-radius: 3px;
+}
+
+.layouts-row button.selected {
+  border-color: var(--text-color-grad2);
+  background-color: var(--bkg-color-grad1);
+}
+
 /* Schema of the Grid: one row per row of the Grid, one select per Cell. */
 .cells-row {
   display: flex;

package/components/themes-mobile/theme/component.js

@@ -10,7 +10,7 @@ class MobileThemeElementComponent extends GirafeHTMLElement {
         return uHtml `<style>
 .hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}button,input,select,textarea{font:inherit}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
 </style><style>
-header{align-items:center;gap:1rem;font-size:1.5rem;display:flex}
+header{align-items:center;gap:1rem;font-size:1.5rem;display:flex}header>img{max-width:50%}header>span{overflow-wrap:anywhere}
 </style>
 <style>${this.customStyle}</style>
 <header><button onclick="${() => this.state.themes.lastSelectedTheme = null}" class="gg-icon-button gg-small"><img alt="Back button" src="icons/arrow_left.svg"></button> <img alt="Theme icon" src="${this.theme?.icon}"> <span i18n="${this.theme?.name}"></span></header><div class="children">${(this.theme?.children ?? []).map(layer => (layer instanceof _GroupLayer) ? uHtmlFor(layer, layer.treeItemId) `<girafe-group groupid="${layer.treeItemId}"></girafe-group>` : uHtmlFor(layer, layer.treeItemId) `<girafe-layer layerid="${layer.treeItemId}"></girafe-layer>`)}</div>

package/components/themes-mobile/theme/style.css

@@ -5,3 +5,11 @@ header {
   gap: 1rem;
   font-size: 1.5rem;
 }
+
+header > img {
+  max-width: 50%;
+}
+
+header > span {
+  overflow-wrap: anywhere;
+}

package/components/themes-mobile/themes-select/component.js

@@ -11,7 +11,7 @@ export default class MobileThemeComponent extends GirafeHTMLElement {
         return uHtml `<style>
 .hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}button,input,select,textarea{font:inherit}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
 </style><style>
-header{background:#fff;margin:0;position:sticky;top:-5px}.container{scrollbar-width:thin;width:100%}.tiles{grid-template-columns:repeat(3,1fr);align-items:start;gap:.5rem;display:grid}.item{text-align:left;background:0 0;border:none;font-size:.8rem}.item img{border:solid 2px var(--bkg-color);border-radius:5px;width:100%;margin:0}.item.active img{border:solid 2px var(--text-color);border-radius:5px;width:100%;margin:0}h3{text-align:center;font-variant:small-caps;background-color:var(--text-color);color:var(--bkg-color);padding:1rem;font-size:1rem}.counter{float:right}
+header{background:#fff;margin:0;position:sticky;top:-5px}.container{scrollbar-width:thin;width:100%}.tiles{grid-template-columns:repeat(3,1fr);align-items:start;gap:.5rem;display:grid}.item{text-align:left;white-space:normal;overflow-wrap:anywhere;background:0 0;border:none;font-size:.8rem}.item img{border:solid 2px var(--bkg-color);border-radius:5px;width:100%;margin:0}.item.active img{border:solid 2px var(--text-color);border-radius:5px;width:100%;margin:0}h3{text-align:center;font-variant:small-caps;background-color:var(--text-color);color:var(--bkg-color);padding:1rem;font-size:1rem}.counter{float:right}
 </style>
 <style>${this.customStyle}</style>
 <div class="${this.state.interface.swipeupPanelContent === 'selector' ? '' : 'hidden'}"><header class="gg-tabs"><button class="${this.activeTab === 'themes' ? 'gg-tab active' : 'gg-tab'}" i18n="Themes" onclick="${() => this.changeTab('themes')}"></button> <button class="${this.activeTab === 'selected' ? 'gg-tab active' : 'gg-tab'}" onclick="${() => this.changeTab('selected')}"><span i18n="My selection"></span> <span id="counter" class="counter"></span></button> <button id="basemap-button" class="${this.activeTab === 'basemaps' ? 'gg-tab active' : 'gg-tab'}" i18n="Basemaps" onclick="${() => this.changeTab('basemaps')}"></button></header><div class="${this.activeTab === 'themes' ? 'container' : 'hidden'}"><div class="${this.state.themes.lastSelectedTheme !== null ? 'hidden' : 'tiles'}">${Object.values(this.state.themes._allThemes).map((theme) => uHtmlFor(theme, theme.id) ` <button onclick="${() => this.changeTheme(theme)}" class="item"><img alt="Theme icon" src="${theme.icon}"> <span i18n="${theme.name}"></span></button> `)}</div><div class="${this.state.themes.lastSelectedTheme === null ? 'hidden' : 'layers'}"><girafe-theme themeid="${this.state.themes.lastSelectedTheme?.id}"></girafe-theme></div></div><div class="${this.activeTab === 'selected' ? 'container' : 'hidden'}"><div class="layers">${Array.from(this.activeLayersByGroup.keys()).map(group => uHtmlFor(group, group.treeItemId) `<h3 i18n="${group.name}">${group.name}</h3><div class="children">${this.activeLayersByGroup.get(group).map(layer => uHtmlFor(layer, layer.treeItemId) `<girafe-layer-selected layerid="${layer.treeItemId}"></girafe-layer-selected>`)}</div>`)}</div></div><div class="${this.activeTab === 'basemaps' ? 'container' : 'hidden'}"><div class="tiles">${Object.values(this.state.basemaps).map(basemap => uHtmlFor(basemap, basemap.id) ` <button onclick="${() => this.changeBasemap(basemap)}" class="${this.state.activeBasemaps.length > 0 && this.state.activeBasemaps[0] === basemap ? 'item active' : 'item'}"><img alt="Basemap thumbnail" src="${basemap.thumbnail}"> <span i18n="${basemap.name}"></span></button> `)}</div></div></div>

package/components/themes-mobile/themes-select/style.css

@@ -23,6 +23,8 @@ header {
   text-align: left;
   border: none;
   font-size: 0.8rem;
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
 
 .item img {

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geogirafe.org"
   },
-  "version": "1.2.0-dev.2854703696",
+  "version": "1.2.0-dev.2857870396",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.2.0-dev.2854703696", "build":"2854703696", "date":"16/09/2026"}
+{"version":"1.2.0-dev.2857870396", "build":"2857870396", "date":"17/09/2026"}