UX: make 'save' button and question sticky, make big questions scrollable

public/css/openinghourstable.css

@@ -19,7 +19,7 @@
 }
 
 .oh-timecell {
-    background-color: white;
+    background: white;
     position: relative;
     box-sizing: border-box;
 }
@@ -27,32 +27,38 @@
 .oh-table th {
     font-weight: bold;
     font-size: medium;
-    background-color: #ddd;
+    background: #ddd;
 }
 
 .oh-table td {
     vertical-align: top;
 }
 
-.oh-timecell:hover {
-    background-color: var(--catch-detail-color) !important;
+.oh-timecell:hover, .oh-timecell-half:hover {
+    background: var(--catch-detail-color) !important;
 }
 
 
 .oh-timecell-selected {
-    background-color: var(--catch-detail-color);
+    background: var(--catch-detail-color);
 }
 
+.oh-timecell.oh-timecell-5:not(.oh-timecell-half), .oh-timecell.oh-timecell-6:not(.oh-timecell-half) {
+    background: repeating-linear-gradient(-65deg, var(--background-color) 0 4.8px, var(--subtle-detail-color) 7px)
+}
 
 .oh-timecell-half {
     border-bottom: 1px solid #ddd;
-    background-color: var(--subtle-detail-color);
+    background: var(--subtle-detail-color);
 }
 
+
+
 .oh-timecell-half.oh-timecell-selected {
-    background-color: var(--catch-detail-color);
+    background: var(--catch-detail-color);
 }
 
+
 .oh-table tr {
     background: #ddd;
 }
@@ -81,7 +87,7 @@
 }
 
 .oh-timecol-selected > span {
-    background-color: var(--catch-detail-color);
+    background: var(--catch-detail-color);
     color: var(--background-color);
     width: 100%;
     display: block;

src/UI/Base/ModalRight.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div
-  class="absolute top-0 right-0 h-screen w-full overflow-auto drop-shadow-2xl md:w-6/12 lg:w-5/12 xl:w-4/12"
+  class="absolute top-0 right-0 h-screen w-full overflow-y-auto drop-shadow-2xl md:w-6/12 lg:w-5/12 xl:w-4/12"
   style="max-width: 100vw; max-height: 100vh"
 >
   <div class="normal-background m-0 flex flex-col">

src/UI/InputElement/Helpers/OpeningHoursInput.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">/**
+     * Opens the 'Opening hours input' in another top level window
+     */
+    import { UIEventSource } from "../../../Logic/UIEventSource"
+import ToSvelte from "../../Base/ToSvelte.svelte"
+import OpeningHoursInput from "../../OpeningHours/OpeningHoursInput"
+
+export let value: UIEventSource<string>
+</script>
+
+<ToSvelte construct={new OpeningHoursInput(value)}></ToSvelte>

src/UI/InputElement/InputHelpers.ts

@@ -6,13 +6,13 @@ import { MapProperties } from "../../Models/MapProperties"
 import DateInput from "./Helpers/DateInput.svelte"
 import ColorInput from "./Helpers/ColorInput.svelte"
 import BaseUIElement from "../BaseUIElement"
-import OpeningHoursInput from "../OpeningHours/OpeningHoursInput"
 import WikidataSearchBox from "../Wikipedia/WikidataSearchBox"
 import Wikidata from "../../Logic/Web/Wikidata"
 import { Utils } from "../../Utils"
 import Locale from "../i18n/Locale"
 import { Feature } from "geojson"
 import { GeoOperations } from "../../Logic/GeoOperations"
+import OpeningHoursInput from "./Helpers/OpeningHoursInput.svelte"
 
 export interface InputHelperProperties {
     /**
@@ -53,7 +53,7 @@ export default class InputHelpers {
             }),
         date: (value) => new SvelteUIElement(DateInput, { value }),
         color: (value) => new SvelteUIElement(ColorInput, { value }),
-        opening_hours: (value) => new OpeningHoursInput(value),
+        opening_hours: (value) => new SvelteUIElement(OpeningHoursInput, {value}),
         wikidata: InputHelpers.constructWikidataHelper,
     } as const
 

src/UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -178,8 +178,10 @@
 </script>
 
 {#if config.question !== undefined}
-  <div class="interactive border-interactive flex flex-col p-1 px-2">
-    <div class="flex justify-between">
+  <div class="interactive border-interactive flex flex-col p-1 px-2 relative overflow-y-auto" style="max-height: 85vh">
+    <div class="sticky top-0" style="z-index: 11">
+      
+    <div class="flex justify-between sticky top-0 interactive">
       <span class="font-bold">
         <SpecialTranslation t={config.question} {tags} {state} {layer} feature={selectedElement} />
       </span>
@@ -197,9 +199,10 @@
         />
       </div>
     {/if}
+    </div>
 
     {#if config.mappings?.length >= 8}
-      <div class="flex w-full">
+      <div class="flex w-full sticky">
         <img src="./assets/svg/search.svg" class="h-6 w-6" />
         <input type="text" bind:value={$searchTerm} class="w-full" />
       </div>
@@ -309,7 +312,7 @@
           <Tr t={$feedback} />
         </div>
       {/if}
-      <div class="flex flex-wrap-reverse items-stretch justify-end sm:flex-nowrap">
+      <div class="flex flex-wrap-reverse items-stretch justify-end sm:flex-nowrap sticky bottom-0 interactive" style="z-index: 11">
         <!-- TagRenderingQuestion-buttons -->
         <slot name="cancel" />
         <slot name="save-button" {selectedTags}>