From 6590a8dd9fb8e122e5a42ca686639b62329ac715 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 1 Feb 2023 11:11:30 +0100
Subject: [PATCH] Move location hint under location select on group and
 settings form

---
 webapp/components/Group/GroupForm.vue | 13 ++++++++-----
 webapp/locales/de.json                |  2 +-
 webapp/locales/en.json                |  2 +-
 webapp/pages/settings/index.vue       | 16 ++++++++++++++--
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 086f899ba..739235b34 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -125,11 +125,7 @@
         <!-- location -->
         <ds-select
           id="city"
-          :label="
-            $t('settings.data.labelCity') +
-            locationNameLabelAddOnOldName +
-            $t('settings.data.labelCityHint')
-          "
+          :label="$t('settings.data.labelCity') + locationNameLabelAddOnOldName"
           v-model="formData.locationName"
           :options="cities"
           icon="map-marker"
@@ -146,6 +142,9 @@
           style="position: relative; display: inline-block; right: -96%; top: -33px; width: 26px"
           @click="formData.locationName = ''"
         ></base-button>
+        <ds-text class="location-hint" color="softer">
+          {{ $t('settings.data.labelCityHint') }}
+        </ds-text>
 
         <ds-space margin-top="small" />
 
@@ -440,5 +439,9 @@ export default {
     align-self: flex-end;
     margin-top: $space-base;
   }
+
+  > .location-hint {
+    margin-top: -$space-base + $space-xxx-small;
+  }
 }
 </style>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 9fd97e1c3..1389ac95e 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -816,7 +816,7 @@
     "data": {
       "labelBio": "Über Dich",
       "labelCity": "Deine Stadt oder Region",
-      "labelCityHint": " (zeigt ungenaue Position auf der Landkarte)",
+      "labelCityHint": "(zeigt ungefähre Position auf der Landkarte)",
       "labelName": "Dein Name",
       "labelSlug": "Dein eindeutiger Benutzername",
       "name": "Deine Daten",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 12c64c694..b5529e790 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -816,7 +816,7 @@
     "data": {
       "labelBio": "About You",
       "labelCity": "Your City or Region",
-      "labelCityHint": " (shows inaccurate position on map)",
+      "labelCityHint": "(shows approximate position on map)",
       "labelName": "Your Name",
       "labelSlug": "Your unique user name",
       "name": "Your data",
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index 67c09bd21..6cae7e44c 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-form v-model="form" :schema="formSchema" @submit="submit">
+  <ds-form class="settings-form" v-model="form" :schema="formSchema" @submit="submit">
     <template #default="{ errors }">
       <base-card>
         <h2 class="title">{{ $t('settings.data.name') }}</h2>
@@ -17,11 +17,14 @@
           model="locationName"
           icon="map-marker"
           :options="cities"
-          :label="$t('settings.data.labelCity') + $t('settings.data.labelCityHint')"
+          :label="$t('settings.data.labelCity')"
           :placeholder="$t('settings.data.labelCity')"
           :loading="loadingGeo"
           @input.native="handleCityInput"
         />
+        <ds-text class="location-hint" color="softer">
+          {{ $t('settings.data.labelCityHint') }}
+        </ds-text>
         <!-- eslint-enable vue/use-v-on-exact -->
         <ds-input
           id="about"
@@ -158,3 +161,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+// .settings-form {
+// >
+.location-hint {
+  margin-top: -$space-x-small - $space-xxx-small - $space-xxx-small;
+}
+// }
+</style>