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

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.2857838548",
   "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.2857838548", "build":"2857838548", "date":"17/09/2026"}