Usertest: add 'back to theme overview'-button on theme intro page, fix #1457

UI/Base/TabbedGroup.svelte

@@ -17,7 +17,7 @@
   }
 </script>
 
-<div class="tabbedgroup h-full w-full">
+<div class="tabbedgroup h-full flex w-full">
   <TabGroup
     class="flex h-full w-full flex-col"
     defaultIndex={1}
@@ -67,23 +67,23 @@
       </TabList>
       <slot name="post-tablist" />
     </div>
-    <div class="normal-background overflow-y-auto">
-      <TabPanels defaultIndex={$tab}>
-        <TabPanel>
+    <div class="normal-background overflow-y-auto h-full">
+      <TabPanels class="tabpanels" defaultIndex={$tab}>
+        <TabPanel class="tabpanel">
           <slot name="content0">
             <div>Empty</div>
           </slot>
         </TabPanel>
-        <TabPanel>
+        <TabPanel class="tabpanel">
           <slot name="content1" />
         </TabPanel>
-        <TabPanel>
+        <TabPanel class="tabpanel">
           <slot name="content2" />
         </TabPanel>
-        <TabPanel>
+        <TabPanel class="tabpanel">
           <slot name="content3" />
         </TabPanel>
-        <TabPanel>
+        <TabPanel class="tabpanel">
           <slot name="content4" />
         </TabPanel>
       </TabPanels>
@@ -97,6 +97,15 @@
     height: 100%;
   }
   
+  :global(.tabpanel) {
+    height:100%;
+  }
+
+  :global(.tabpanels) {
+    height: calc( 100% - 2rem );
+  }
+
+
   :global(.tab) {
     margin: 0.25rem;
     padding: 0.25rem;

UI/BigComponents/ThemeIntroPanel.svelte

@@ -8,9 +8,10 @@
     import ToSvelte from "../Base/ToSvelte.svelte"
     import ThemeViewState from "../../Models/ThemeViewState"
     import If from "../Base/If.svelte"
-  import { UIEventSource } from "../../Logic/UIEventSource"
-  import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
-  import { twJoin } from "tailwind-merge"
+    import {UIEventSource} from "../../Logic/UIEventSource"
+    import {SearchIcon} from "@rgossiaux/svelte-heroicons/solid"
+    import {twJoin} from "tailwind-merge"
+    import {Utils} from "../../Utils";
 
     /**
      * The theme introduction panel
@@ -28,7 +29,7 @@
         if (glstate.currentGPSLocation.data !== undefined) {
             const c: GeolocationCoordinates = glstate.currentGPSLocation.data
             state.guistate.themeIsOpened.setData(false)
-      const coor = { lon: c.longitude, lat: c.latitude }
+            const coor = {lon: c.longitude, lat: c.latitude}
             state.mapProperties.location.setData(coor)
         }
         if (glstate.permission.data !== "granted") {
@@ -38,29 +39,34 @@
     }
 </script>
 
-<Tr t={layout.description} />
-<Tr t={Translations.t.general.welcomeExplanation.general} />
-{#if layout.layers.some((l) => l.presets?.length > 0)}
+<div class="flex flex-col justify-between h-full">
+
+    <div>
+
+        <!-- Intro, description, ... -->
+        <Tr t={layout.description}/>
+        <Tr t={Translations.t.general.welcomeExplanation.general}/>
+        {#if layout.layers.some((l) => l.presets?.length > 0)}
             <If condition={state.featureSwitches.featureSwitchAddNew}>
-    <Tr t={Translations.t.general.welcomeExplanation.addNew} />
+                <Tr t={Translations.t.general.welcomeExplanation.addNew}/>
             </If>
-{/if}
+        {/if}
 
-<!--toTheMap,
-loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-400"),
--->
-<Tr t={layout.descriptionTail} />
-<NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
+        <Tr t={layout.descriptionTail}/>
+      
+      
+        <!-- Buttons: open map, go to location, search -->
+        <NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
             <div class="flex w-full justify-center text-2xl">
-    <Tr t={Translations.t.general.openTheMap} />
+                <Tr t={Translations.t.general.openTheMap}/>
             </div>
-</NextButton>
+        </NextButton>
 
-<div class="flex w-full flex-wrap sm:flex-nowrap">
+        <div class="flex w-full flex-wrap sm:flex-nowrap">
             <IfNot condition={state.geolocation.geolocationState.permission.map((p) => p === "denied")}>
                 <button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
-      <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")} />
-      <Tr t={Translations.t.general.openTheMapAtGeolocation} />
+                    <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")}/>
+                    <Tr t={Translations.t.general.openTheMapAtGeolocation}/>
                 </button>
             </IfNot>
 
@@ -81,8 +87,18 @@ loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-40
                 <button
                         class={twJoin("flex items-center justify-between gap-x-2", !searchEnabled && "disabled")}
                         on:click={() => triggerSearch.ping()}>
-      <Tr t={Translations.t.general.search.searchShort} />
-      <SearchIcon class="h-6 w-6" />
+                    <Tr t={Translations.t.general.search.searchShort}/>
+                    <SearchIcon class="h-6 w-6"/>
                 </button>
             </div>
+        </div>
+    </div>
+  
+    <div class="links-as-button links-w-full m-2 flex flex-col gap-y-1">
+    <!-- bottom buttons, a bit hidden away: switch layout -->
+    <a class="flex" href={Utils.HomepageLink()}>
+      <img class="h-6 w-6" src="./assets/svg/add.svg"/>
+      <Tr t={Translations.t.general.backToIndex}/>
+    </a>
+  </div>
 </div>

UI/ThemeViewGUI.svelte

@@ -269,7 +269,7 @@
                 <Tr t={layout.title}/>
             </div>
 
-            <div class="m-4" slot="content0">
+            <div class="m-4 h-full" slot="content0">
                 <ThemeIntroPanel {state}/>
             </div>