Fix: styling issues; refactoring: remove 'SearchAndGo'

UI/Base/ModalRight.svelte

@@ -8,7 +8,7 @@
   const dispatch = createEventDispatcher<{ close }>();
 </script>
 
-<div class="absolute top-0 right-0 h-screen overflow-auto w-full md:w-6/12 lg:w-5/12 xl:w-4/12 drop-shadow-2xl">
+<div class="absolute top-0 right-0 h-screen overflow-auto w-full md:w-6/12 lg:w-5/12 xl:w-4/12 drop-shadow-2xl" style="max-width: 100vw; max-height: 100vh">
   <div class="flex flex-col m-0 normal-background">
     <slot name="close-button">
       <div class="w-8 h-8 absolute right-10 top-10 cursor-pointer" on:click={() => dispatch("close")}>

UI/BigComponents/Geosearch.svelte

@@ -43,7 +43,7 @@
       }
       const result = await Geocoding.Search(searchContents, bounds.data);
       if (result.length == 0) {
-        feedback = Translations.t.search.nothing.txt;
+        feedback = Translations.t.general.search.nothing.txt;
         return;
       }
       const poi = result[0];
@@ -61,7 +61,7 @@
       }
     } catch (e) {
       console.error(e);
-      feedback = Translations.t.search.error.txt;
+      feedback = Translations.t.general.search.error.txt;
     } finally {
       isRunning = false;
     }
@@ -70,7 +70,7 @@
 </script>
 
 <div class="flex normal-background rounded-full pl-2 justify-between">
-  <form>
+  <form class="w-full">
 
     {#if isRunning}
       <Loading>{Translations.t.general.search.searching}</Loading>
@@ -81,6 +81,7 @@
     {:else }
       <input
         type="search"
+        class="w-full"
         bind:this={inputElement}
         on:keypress={keypr => keypr.key === "Enter" ? performSearch() : undefined}
 

UI/BigComponents/PdfExportGui.ts

@@ -1,21 +1,20 @@
 import Combine from "../Base/Combine"
-import { FlowPanelFactory, FlowStep } from "../ImportFlow/FlowStep"
+import {FlowPanelFactory, FlowStep} from "../ImportFlow/FlowStep"
-import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
+import {ImmutableStore, Store, UIEventSource} from "../../Logic/UIEventSource"
-import { InputElement } from "../Input/InputElement"
+import {InputElement} from "../Input/InputElement"
-import { SvgToPdf, SvgToPdfOptions } from "../../Utils/svgToPdf"
+import {SvgToPdf, SvgToPdfOptions} from "../../Utils/svgToPdf"
-import { FixedInputElement } from "../Input/FixedInputElement"
+import {FixedInputElement} from "../Input/FixedInputElement"
-import { FixedUiElement } from "../Base/FixedUiElement"
+import {FixedUiElement} from "../Base/FixedUiElement"
 import FileSelectorButton from "../Input/FileSelectorButton"
 import InputElementMap from "../Input/InputElementMap"
-import { RadioButton } from "../Input/RadioButton"
+import {RadioButton} from "../Input/RadioButton"
-import { Utils } from "../../Utils"
+import {Utils} from "../../Utils"
-import { VariableUiElement } from "../Base/VariableUIElement"
+import {VariableUiElement} from "../Base/VariableUIElement"
 import Loading from "../Base/Loading"
 import BaseUIElement from "../BaseUIElement"
 import Img from "../Base/Img"
 import Title from "../Base/Title"
-import { CheckBox } from "../Input/Checkboxes"
+import {CheckBox} from "../Input/Checkboxes"
-import SearchAndGo from "./SearchAndGo"
 import Toggle from "../Input/Toggle"
 import List from "../Base/List"
 import LeftIndex from "../Base/LeftIndex"
@@ -24,7 +23,7 @@ import Toggleable from "../Base/Toggleable"
 import Lazy from "../Base/Lazy"
 import LinkToWeblate from "../Base/LinkToWeblate"
 import Link from "../Base/Link"
-import { AllLanguagesSelector } from "../Popup/AllLanguagesSelector"
+import {AllLanguagesSelector} from "../Popup/AllLanguagesSelector"
 
 class SelectTemplate extends Combine implements FlowStep<{ title: string; pages: string[] }> {
     readonly IsValid: Store<boolean>
@@ -158,7 +157,7 @@ class SelectPdfOptions
             false
         )
         const locationInput = Minimap.createMiniMap().SetClass("block w-full")
-        const searchField = new SearchAndGo({ leafletMap: locationInput.leafletMap })
+        const searchField = undefined // new SearchAndGo({ leafletMap: locationInput.leafletMap })
         const selectLocation = new Combine([
             new Toggle(
                 new Combine([new Title("Select override location"), searchField]).SetClass("flex"),

UI/BigComponents/SearchAndGo.ts

@@ -1,89 +0,0 @@
-import { Store, UIEventSource } from "../../Logic/UIEventSource"
-import { Translation } from "../i18n/Translation"
-import Svg from "../../Svg"
-import { TextField } from "../Input/TextField"
-import { Geocoding } from "../../Logic/Osm/Geocoding"
-import Translations from "../i18n/Translations"
-import Hash from "../../Logic/Web/Hash"
-import Combine from "../Base/Combine"
-import Locale from "../i18n/Locale"
-import { BBox } from "../../Logic/BBox"
-
-export default class SearchAndGo extends Combine {
-    private readonly _searchField: TextField
-    constructor(state: {
-        leafletMap: UIEventSource<any>
-        selectedElement?: UIEventSource<any>
-        bounds?: Store<BBox>
-    }) {
-        const goButton = Svg.search_ui().SetClass("w-8 h-8 full-rounded border-black float-right")
-
-        const placeholder = new UIEventSource<Translation>(Translations.t.general.search.search)
-        const searchField = new TextField({
-            placeholder: placeholder.map(
-                (tr) => tr.textFor(Locale.language.data),
-                [Locale.language]
-            ),
-            value: new UIEventSource<string>(""),
-            inputStyle:
-                " background: transparent;\n" +
-                "    border: none;\n" +
-                "    font-size: large;\n" +
-                "    width: 100%;\n" +
-                "    height: 100%;\n" +
-                "    box-sizing: border-box;\n" +
-                "    color: var(--foreground-color);",
-        })
-
-        searchField.SetClass("relative float-left mt-0 ml-2")
-        searchField.SetStyle("width: calc(100% - 3em);height: 100%")
-
-        super([searchField, goButton])
-
-        this.SetClass("block h-8")
-        this.SetStyle(
-            "background: var(--background-color); color: var(--foreground-color); pointer-evetns:all;"
-        )
-
-        // Triggered by 'enter' or onclick
-        async function runSearch() {
-            const searchString = searchField.GetValue().data
-            if (searchString === undefined || searchString === "") {
-                return
-            }
-            searchField.GetValue().setData("")
-            placeholder.setData(Translations.t.general.search.searching)
-            try {
-                const result = await Geocoding.Search(searchString, state.bounds.data)
-
-                console.log("Search result", result)
-                if (result.length == 0) {
-                    placeholder.setData(Translations.t.general.search.nothing)
-                    return
-                }
-
-                const poi = result[0]
-                const bb = poi.boundingbox
-                const bounds: [[number, number], [number, number]] = [
-                    [bb[0], bb[2]],
-                    [bb[1], bb[3]],
-                ]
-                state.selectedElement?.setData(undefined)
-                Hash.hash.setData(poi.osm_type + "/" + poi.osm_id)
-                state.leafletMap.data.fitBounds(bounds)
-                placeholder.setData(Translations.t.general.search.search)
-            } catch (e) {
-                searchField.GetValue().setData("")
-                placeholder.setData(Translations.t.general.search.error)
-            }
-        }
-
-        searchField.enterPressed.addCallback(runSearch)
-        this._searchField = searchField
-        goButton.onClick(runSearch)
-    }
-
-    focus() {
-        this._searchField.focus()
-    }
-}

UI/BigComponents/SelectedElementView.svelte

@@ -32,7 +32,7 @@
 {#if _tags._deleted === "yes"}
     <Tr t={ Translations.t.delete.isDeleted}/>
 {:else}
-    <div class="absolute flex flex-col h-full normal-background">
+    <div class="absolute flex flex-col h-full w-full normal-background">
         <div class="flex border-b-2 border-black shadow justify-between items-center">
             <div class="flex flex-col">
 

UI/Popup/AllTagsPanel.svelte

@@ -57,7 +57,7 @@
   onDestroy(allTags.addCallbackAndRunD(allTags => {
     _allTags = allTags;
   }));
-  const tagsTable = new Table(["Key", "Value"], _allTags).SetClass("zebra-table");
+  const tagsTable = new Table(["Key", "Value"], _allTags).SetClass("zebra-table break-all");
 </script>
 
 <section>

UI/ThemeViewGUI.svelte

@@ -134,7 +134,7 @@
 
 <If condition={selectedViewElement.map(v => v !== undefined && selectedLayer.data !== undefined && !selectedLayer.data.popupInFloatover,[ selectedLayer] )}>
     <ModalRight on:close={() => {selectedElement.setData(undefined)}}>
-        <ToSvelte construct={new VariableUiElement(selectedViewElement)}></ToSvelte>
+        <ToSvelte construct={new VariableUiElement(selectedViewElement).SetClass("w-full h-full")}></ToSvelte>
     </ModalRight>
 </If>
 

css/index-tailwind-output.css

@@ -1171,10 +1171,6 @@ video {
   flex-shrink: 0;
 }
 
-.flex-grow {
-  flex-grow: 1;
-}
-
 .grow {
   flex-grow: 1;
 }
@@ -1301,12 +1297,6 @@ video {
   row-gap: 0.25rem;
 }
 
-.space-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .self-end {
   align-self: flex-end;
 }
@@ -1323,8 +1313,8 @@ video {
   overflow: hidden;
 }
 
-.overflow-scroll {
+.overflow-y-auto {
-  overflow: scroll;
+  overflow-y: auto;
 }
 
 .truncate {
@@ -1374,10 +1364,6 @@ video {
   border-radius: 0.375rem;
 }
 
-.rounded-2xl {
-  border-radius: 1rem;
-}
-
 .rounded-sm {
   border-radius: 0.125rem;
 }
@@ -1407,8 +1393,8 @@ video {
   border-bottom-width: 1px;
 }
 
-.border-solid {
+.border-b-2 {
-  border-style: solid;
+  border-bottom-width: 2px;
 }
 
 .border-dashed {
@@ -1600,14 +1586,14 @@ video {
   padding-left: 0.75rem;
 }
 
-.pl-1 {
-  padding-left: 0.25rem;
-}
-
 .pr-0 {
   padding-right: 0px;
 }
 
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
 .pr-1 {
   padding-right: 0.25rem;
 }
@@ -1773,6 +1759,12 @@ video {
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.drop-shadow-2xl {
+  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
+  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .grayscale {
   --tw-grayscale: grayscale(100%);
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -2128,7 +2120,7 @@ li::marker {
 }
 
 .shadow {
-  box-shadow: 0 0 10px var(--shadow-color);
+  box-shadow: 0 0 20px var(--shadow-color);
 }
 
 .title-font span {
@@ -2378,10 +2370,6 @@ input {
     max-width: 36rem;
   }
 
-  .sm\:flex-row {
-    flex-direction: row;
-  }
-
   .sm\:items-stretch {
     align-items: stretch;
   }

index.css

@@ -344,7 +344,7 @@ li::marker {
 }
 
 .shadow {
-    box-shadow: 0 0 10px var(--shadow-color);
+    box-shadow: 0 0 20px var(--shadow-color);
 }
 
 .title-font span {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapcomplete",
-  "version": "0.30.2",
+  "version": "0.30.3",
   "repository": "https://github.com/pietervdvn/MapComplete",
   "description": "A small website to edit OSM easily",
   "bugs": "https://github.com/pietervdvn/MapComplete/issues",