UI/UX improvements (#2423)

* disable autofocus and hide keyboard on enter

* improve a11y

* fix non-translated string

* improve recipeTimeline UI

* format

* fixes

frontend/pages/index.vue

@@ -4,14 +4,15 @@
       <form class="search-box pa-2" @submit.prevent="search">
         <div class="d-flex justify-center my-2">
           <v-text-field
+            ref="input"
             v-model="state.search"
             outlined
-            autofocus
             hide-details
             clearable
             color="primary"
             :placeholder="$tc('search.search-placeholder')"
             :prepend-inner-icon="$globals.icons.search"
+            @keyup.enter="hideKeyboard"
           />
         </div>
         <div class="search-row">
@@ -132,7 +133,7 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, useRouter, onMounted, useContext, computed } from "@nuxtjs/composition-api";
+import { ref, defineComponent, useRouter, onMounted, useContext, computed, Ref } from "@nuxtjs/composition-api";
 import { watchDebounced } from "@vueuse/shared";
 import SearchFilter from "~/components/Domain/SearchFilter.vue";
 import { useCategoryStore, useFoodStore, useTagStore, useToolStore } from "~/composables/store";
@@ -205,6 +206,12 @@ export default defineComponent({
       return array.map((item) => item.id);
     }
 
+    function hideKeyboard() {
+      input.value.blur()
+    }
+
+    const input: Ref<any> = ref(null);
+
     async function search() {
       await router.push({
         query: {
@@ -432,6 +439,8 @@ export default defineComponent({
 
       sortable,
       toggleOrderDirection,
+      hideKeyboard,
+      input,
 
       selectedCategories,
       selectedFoods,

frontend/pages/login.vue

@@ -2,7 +2,7 @@
   <v-container
     fill-height
     fluid
-    class="d-flex justify-center align-center"
+    class="d-flex justify-center align-center flex-column"
     :class="{
       'bg-off-white': !$vuetify.theme.dark && !isDark,
     }"
@@ -23,7 +23,7 @@
         </v-avatar>
       </div>
 
-      <v-card-title class="headline justify-center pb-1"> {{ $t('user.sign-in') }} </v-card-title>
+      <v-card-title class="headline justify-center pb-3"> {{ $t('user.sign-in') }} </v-card-title>
       <v-card-text>
         <v-form @submit.prevent="authenticate">
           <v-text-field
@@ -68,7 +68,7 @@
 
       <v-divider></v-divider>
 
-      <v-card-text class="d-flex justify-center">
+      <v-card-text class="d-flex justify-center flex-column flex-sm-row">
         <div
           v-for="link in [
             {
@@ -88,6 +88,7 @@
             },
           ]"
           :key="link.text"
+          class="text-center"
         >
           <v-btn text :href="link.href" target="_blank">
             <v-icon left>
@@ -99,7 +100,7 @@
       </v-card-text>
     </v-card>
 
-    <v-btn absolute bottom center @click="toggleDark">
+    <v-btn bottom center class="mt-5" @click="toggleDark">
       <v-icon left>
         {{ $vuetify.theme.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }}
       </v-icon>