From 7a2f13f46645f2b1ebdaa7ba4ed783a8a82a8581 Mon Sep 17 00:00:00 2001
From: Peter <graphhopper@gmx.de>
Date: Sat, 2 Sep 2023 19:15:40 +0200
Subject: [PATCH] back button on left side

---
 src/sidebar/search/AddressInput.module.css    | 13 ++--
 src/sidebar/search/AddressInput.tsx           | 71 ++++++++++---------
 .../AddressInputAutocomplete.module.css       |  6 +-
 src/sidebar/search/arrow_back.svg             |  1 +
 4 files changed, 47 insertions(+), 44 deletions(-)
 create mode 100644 src/sidebar/search/arrow_back.svg

diff --git a/src/sidebar/search/AddressInput.module.css b/src/sidebar/search/AddressInput.module.css
index 169f4f71..4cd9fca2 100644
--- a/src/sidebar/search/AddressInput.module.css
+++ b/src/sidebar/search/AddressInput.module.css
@@ -35,14 +35,17 @@
     }
 
     .fullscreen .inputContainer {
-        grid-gap: 0.5rem;
+        grid-template-columns: auto 1fr;
+    }
+
+    .fullscreen .smallList {
+        grid-column: 2 / 2;
     }
 
     .fullscreen .btnClose {
-        display: flex;
-        align-self: stretch;
-        justify-self: stretch;
-        align-items: center;
+        display: block;
+        margin: 0;
+        padding: 5px 15px 5px 5px;
     }
 }
 
diff --git a/src/sidebar/search/AddressInput.tsx b/src/sidebar/search/AddressInput.tsx
index 534cdb47..e2312a49 100644
--- a/src/sidebar/search/AddressInput.tsx
+++ b/src/sidebar/search/AddressInput.tsx
@@ -8,6 +8,7 @@ import Autocomplete, {
     SelectCurrentLocationItem,
 } from '@/sidebar/search/AddressInputAutocomplete'
 
+import ArrowBack from './arrow_back.svg'
 import styles from './AddressInput.module.css'
 import Api, { getApi } from '@/api/Api'
 import { tr } from '@/translation/Translation'
@@ -132,6 +133,15 @@ export default function AddressInput(props: AddressInputProps) {
                         : {},
                 ].join(' ')}
             >
+                <PlainButton
+                    className={styles.btnClose}
+                    onClick={() => {
+                        setHasFocus(false)
+                        hideSuggestions()
+                    }}
+                >
+                    <ArrowBack/>
+                </PlainButton>
                 <input
                     style={props.moveStartIndex == props.index ? { borderWidth: '2px', margin: '-1px' } : {}}
                     className={styles.input}
@@ -163,40 +173,31 @@ export default function AddressInput(props: AddressInputProps) {
                         type == QueryPointType.From ? 'from_hint' : type == QueryPointType.To ? 'to_hint' : 'via_hint'
                     )}
                 />
-                <PlainButton
-                    className={styles.btnClose}
-                    onClick={() => {
-                        setHasFocus(false)
-                        hideSuggestions()
-                    }}
-                >
-                    {tr('back_to_map')}
-                </PlainButton>
-            </div>
 
-            {autocompleteItems.length > 0 && (
-                <ResponsiveAutocomplete inputRef={searchInput.current!} isSmallScreen={isSmallScreen}>
-                    <Autocomplete
-                        items={autocompleteItems}
-                        highlightedItem={autocompleteItems[highlightedResult]}
-                        setPointerDown={setPointerDownOnSuggestion}
-                        onSelect={item => {
-                            setHasFocus(false)
-                            if (item instanceof GeocodingItem) {
-                                hideSuggestions()
-                                props.onAddressSelected(item.toText(), item.point, item.bbox)
-                            } else if (item instanceof SelectCurrentLocationItem) {
-                                hideSuggestions()
-                                onCurrentLocationSelected(props.onAddressSelected)
-                            } else if (item instanceof MoreResultsItem) {
-                                // do not hide autocomplete items
-                                const coordinate = textToCoordinate(item.search)
-                                if (!coordinate) geocoder.request(item.search, 'nominatim')
-                            }
-                        }}
-                    />
-                </ResponsiveAutocomplete>
-            )}
+                {autocompleteItems.length > 0 && (
+                    <ResponsiveAutocomplete inputRef={searchInput.current!} isSmallScreen={isSmallScreen}>
+                        <Autocomplete
+                            items={autocompleteItems}
+                            highlightedItem={autocompleteItems[highlightedResult]}
+                            setPointerDown={setPointerDownOnSuggestion}
+                            onSelect={item => {
+                                setHasFocus(false)
+                                if (item instanceof GeocodingItem) {
+                                    hideSuggestions()
+                                    props.onAddressSelected(item.toText(), item.point, item.bbox)
+                                } else if (item instanceof SelectCurrentLocationItem) {
+                                    hideSuggestions()
+                                    onCurrentLocationSelected(props.onAddressSelected)
+                                } else if (item instanceof MoreResultsItem) {
+                                    // do not hide autocomplete items
+                                    const coordinate = textToCoordinate(item.search)
+                                    if (!coordinate) geocoder.request(item.search, 'nominatim')
+                                }
+                            }}
+                        />
+                    </ResponsiveAutocomplete>
+                )}
+            </div>
         </div>
     )
 }
@@ -206,7 +207,9 @@ function ResponsiveAutocomplete({ inputRef, children, isSmallScreen }: { inputRe
     return (
         <>
             {isSmallScreen ? (
-                children
+                <div className={styles.smallList}>
+                    {children}
+                </div>
             ) : (
                 <PopUp inputElement={inputRef} keepClearAtBottom={270}>
                     {children}
diff --git a/src/sidebar/search/AddressInputAutocomplete.module.css b/src/sidebar/search/AddressInputAutocomplete.module.css
index d692d7f1..f504da11 100644
--- a/src/sidebar/search/AddressInputAutocomplete.module.css
+++ b/src/sidebar/search/AddressInputAutocomplete.module.css
@@ -1,7 +1,3 @@
-.autocompleteItem:not(:last-child) {
-    border-bottom: 1px lightgray solid;
-}
-
 .selectableItem {
     display: block;
     width: 100%;
@@ -61,6 +57,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-    font-size: small;
+    font-size: x-small;
     color: #5b616a;
 }
diff --git a/src/sidebar/search/arrow_back.svg b/src/sidebar/search/arrow_back.svg
new file mode 100644
index 00000000..3c30733a
--- /dev/null
+++ b/src/sidebar/search/arrow_back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="currentColor" d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg>
\ No newline at end of file