From 99e7717fec3495cf1e6c8476b8a1915a3d446233 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ars=C3=A8ne=20Reymond?=
 <66876397+p0lycarpio@users.noreply.github.com>
Date: Mon, 21 Aug 2023 20:41:18 +0200
Subject: [PATCH] UI/UX improvements (#2423)

* disable autofocus and hide keyboard on enter

* improve a11y

* fix non-translated string

* improve recipeTimeline UI

* format

* fixes
---
 .../Domain/Recipe/RecipeCardMobile.vue        | 25 ++++--
 .../Domain/Recipe/RecipeContextMenu.vue       |  2 +-
 .../Domain/Recipe/RecipePage/RecipePage.vue   |  2 +-
 .../Domain/Recipe/RecipeTimeline.vue          |  7 +-
 .../Recipe/RecipeTimelineContextMenu.vue      |  6 +-
 .../Domain/Recipe/RecipeTimelineItem.vue      | 85 +++++++++++--------
 frontend/components/Layout/AppHeader.vue      |  4 +-
 frontend/lang/messages/en-US.json             |  3 +-
 frontend/pages/index.vue                      | 13 ++-
 frontend/pages/login.vue                      |  9 +-
 10 files changed, 95 insertions(+), 61 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeCardMobile.vue b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
index c729b874c..7cfcb9197 100644
--- a/frontend/components/Domain/Recipe/RecipeCardMobile.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
@@ -2,24 +2,24 @@
   <v-expand-transition>
     <v-card
       :ripple="false"
-      class="mx-auto"
+      :class="isFlat ? 'mx-auto flat' : 'mx-auto'"
       hover
       :to="$listeners.selected ? undefined : `/recipe/${slug}`"
       @click="$emit('selected')"
     >
-      <v-img v-if="vertical">
+      <v-img v-if="vertical" class="rounded-sm">
         <RecipeCardImage
           :icon-size="100"
-          :height="75"
+          :height="150"
           :slug="slug"
           :recipe-id="recipeId"
           small
           :image-version="image"
         />
       </v-img>
-      <v-list-item three-line>
+      <v-list-item three-line class="px-0">
         <slot v-if="!vertical" name="avatar">
-          <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0 ml-n4">
+          <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0">
             <RecipeCardImage
               :icon-size="100"
               :height="125"
@@ -30,8 +30,8 @@
             />
           </v-list-item-avatar>
         </slot>
-        <v-list-item-content>
-          <v-list-item-title class="mb-1">{{ name }} </v-list-item-title>
+        <v-list-item-content class="py-0">
+          <v-list-item-title class="mt-3 mb-1">{{ name }} </v-list-item-title>
           <v-list-item-subtitle>
             <SafeMarkdown :source="description" />
           </v-list-item-subtitle>
@@ -120,7 +120,11 @@ export default defineComponent({
     vertical: {
       type: Boolean,
       default: false,
-    }
+    },
+    isFlat: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup() {
     const { $auth } = useContext();
@@ -162,4 +166,9 @@ export default defineComponent({
 .text-top {
   align-self: start !important;
 }
+
+.flat {
+  box-shadow: none!important;
+  background-color: transparent;
+}
 </style>
diff --git a/frontend/components/Domain/Recipe/RecipeContextMenu.vue b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
index 32ad0fb1e..9134e8934 100644
--- a/frontend/components/Domain/Recipe/RecipeContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
@@ -149,7 +149,7 @@
       :nudge-top="menuTop ? '5' : '0'"
       allow-overflow
       close-delay="125"
-      open-on-hover
+      :open-on-hover="$vuetify.breakpoint.mdAndUp"
       content-class="d-print-none"
     >
       <template #activator="{ on, attrs }">
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index 6e297a01d..2d0fc87b7 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -62,7 +62,7 @@
       class="d-print-none d-flex px-2"
       :class="$vuetify.breakpoint.smAndDown ? 'justify-center' : 'justify-end'"
     >
-      <v-switch v-model="wakeLock" small label="Keep Screen Awake" />
+      <v-switch v-model="wakeLock" small :label="$t('recipe.screen-awake')" />
     </div>
 
     <RecipePageComments
diff --git a/frontend/components/Domain/Recipe/RecipeTimeline.vue b/frontend/components/Domain/Recipe/RecipeTimeline.vue
index 9089d0f0f..7352946f8 100644
--- a/frontend/components/Domain/Recipe/RecipeTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimeline.vue
@@ -8,8 +8,7 @@
         </v-btn>
       </v-col>
     </v-row>
-    <v-divider v-if="timelineEvents.length" />
-    <v-card
+    <div
       v-if="timelineEvents.length"
       id="timeline-container"
       height="fit-content"
@@ -27,13 +26,13 @@
           @delete="deleteTimelineEvent(index)"
         />
       </v-timeline>
-    </v-card>
+    </div>
     <v-card v-else-if="!loading">
       <v-card-title class="justify-center pa-9">
         {{ $t("recipe.timeline-is-empty") }}
       </v-card-title>
     </v-card>
-    <div v-if="loading" class="pb-3">
+    <div v-if="loading" class="mb-3">
       <AppLoader :loading="loading" :waiting-text="$tc('general.loading-events')" />
     </div>
   </div>
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue b/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
index 57ae9d9d8..84c9dabd1 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
@@ -41,7 +41,7 @@
       :nudge-top="menuTop ? '5' : '0'"
       allow-overflow
       close-delay="125"
-      open-on-hover
+      :open-on-hover="!useMobileFormat"
       content-class="d-print-none"
     >
       <template #activator="{ on, attrs }">
@@ -121,6 +121,10 @@ export default defineComponent({
       type: String,
       default: null,
     },
+    useMobileFormat: {
+      type: Boolean,
+      default: true,
+    }
   },
   setup(props, context) {
     const domEditEventForm = ref<VForm>();
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
index 778f52309..507ecb877 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
@@ -11,29 +11,33 @@
         {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
       </v-chip>
     </template>
-    <v-card>
-      <v-sheet>
-        <v-card-title>
-          <v-row>
+      <v-card
+        hover
+        :to="$listeners.selected ? undefined : `/recipe/${recipe.slug}`"
+        @click="$emit('selected')">
+        <v-sheet>
+        <v-card-title class="bg-primary">
+            <v-row>
             <v-col align-self="center" :cols="useMobileFormat ? 'auto' : '2'" :class="attrs.avatar.class">
-              <UserAvatar :user-id="event.userId" :size="attrs.avatar.size" />
+                <UserAvatar :user-id="event.userId" :size="attrs.avatar.size" />
             </v-col>
             <v-col v-if="useMobileFormat" align-self="center" class="pr-0">
-              <v-chip label>
+                <v-chip label>
                 <v-icon> {{ $globals.icons.calendar }} </v-icon>
                 {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
-              </v-chip>
+                </v-chip>
             </v-col>
             <v-col v-else cols="9" style="margin: auto; text-align: center;">
-              {{ event.subject }}
+                {{ event.subject }}
             </v-col>
             <v-spacer />
             <v-col :cols="useMobileFormat ? 'auto' : '1'" class="px-0 pt-0">
-              <RecipeTimelineContextMenu
+                <RecipeTimelineContextMenu
                 v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
                 :menu-top="false"
                 :event="event"
                 :menu-icon="$globals.icons.dotsVertical"
+                :use-mobile-format="useMobileFormat"
                 fab
                 color="transparent"
                 :elevation="0"
@@ -44,13 +48,13 @@
                 }"
                 @update="$emit('update')"
                 @delete="$emit('delete')"
-              />
+                />
             </v-col>
-          </v-row>
+            </v-row>
         </v-card-title>
-        <v-sheet v-if="showRecipeCards && recipe">
-          <v-row class="pt-3 pb-7 mx-3" style="max-width: 100%;">
-            <v-col align-self="center" class="pa-0">
+        <v-card-text v-if="showRecipeCards && recipe">
+            <v-row :class="useMobileFormat ? 'py-3 mx-0' : 'py-3 mx-0'" style="max-width: 100%;">
+              <v-col align-self="center" class="pa-0">
               <RecipeCardMobile
                 :vertical="useMobileFormat"
                 :name="recipe.name"
@@ -59,32 +63,33 @@
                 :rating="recipe.rating"
                 :image="recipe.image"
                 :recipe-id="recipe.id"
+                :is-flat="true"
               />
             </v-col>
-          </v-row>
-        </v-sheet>
-        <v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage || (eventImageUrl && !hideImage))" />
-        <v-card-text>
-          <v-row>
-            <v-col>
-              <strong v-if="useMobileFormat">{{ event.subject }}</strong>
-              <v-img
-                v-if="eventImageUrl"
-                :src="eventImageUrl"
-                min-height="50"
-                :height="hideImage ? undefined : 'auto'"
-                :max-height="attrs.image.maxHeight"
-                contain
-                :class=attrs.image.class
-                @error="hideImage = true"
-              />
-              <div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
-                {{ event.eventMessage }}
-              </div>
-            </v-col>
-          </v-row>
+            </v-row>
+        </v-card-text>
+        </v-sheet>
+        <v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)" />
+        <v-card-text v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)">
+            <v-row>
+            <v-col>
+                <strong v-if="useMobileFormat">{{ event.subject }}</strong>
+                <v-img
+                  v-if="eventImageUrl"
+                  :src="eventImageUrl"
+                  min-height="50"
+                  :height="hideImage ? undefined : 'auto'"
+                  :max-height="attrs.image.maxHeight"
+                  contain
+                  :class=attrs.image.class
+                  @error="hideImage = true"
+                />
+                <div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
+                {{ event.eventMessage }}
+                </div>
+            </v-col>
+            </v-row>
         </v-card-text>
-      </v-sheet>
     </v-card>
   </v-timeline-item>
 </template>
@@ -191,3 +196,9 @@ export default defineComponent({
   },
 });
 </script>
+
+<style>
+.v-card::after {
+  display: none;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/Layout/AppHeader.vue b/frontend/components/Layout/AppHeader.vue
index 8594548b6..1f5feb937 100644
--- a/frontend/components/Layout/AppHeader.vue
+++ b/frontend/components/Layout/AppHeader.vue
@@ -26,7 +26,7 @@
           dense
           flat
           :prepend-inner-icon="$globals.icons.search"
-          background-color="primary lighten-1"
+          background-color="primary darken-1"
           color="white"
           :placeholder="$t('search.search-hint')"
         >
@@ -35,7 +35,7 @@
       <v-btn v-else icon @click="activateSearch">
         <v-icon> {{ $globals.icons.search }}</v-icon>
       </v-btn>
-      <v-btn v-if="$auth.loggedIn" text @click="$auth.logout()">
+      <v-btn v-if="$auth.loggedIn" :text="$vuetify.breakpoint.smAndUp" :icon="$vuetify.breakpoint.xs" @click="$auth.logout()">
         <v-icon :left="$vuetify.breakpoint.smAndUp">{{ $globals.icons.logout }}</v-icon>
         {{ $vuetify.breakpoint.smAndUp ? $t("user.logout") : "" }}
       </v-btn>
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index e41cc45c0..77fa41a18 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -531,6 +531,7 @@
     "recipe-yield": "Recipe Yield",
     "unit": "Unit",
     "upload-image": "Upload image",
+    "screen-awake": "Keep Screen Awake",
     "remove-image": "Remove image"
   },
   "search": {
@@ -1114,4 +1115,4 @@
     "cookbook-name": "Cookbook Name",
     "cookbook-with-name": "Cookbook {0}"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index a306e8524..78bae22a4 100644
--- a/frontend/pages/index.vue
+++ b/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,
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index 90e4fd37d..45d7648ee 100644
--- a/frontend/pages/login.vue
+++ b/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>