UI/UX improvements (#2423)

* disable autofocus and hide keyboard on enter

* improve a11y

* fix non-translated string

* improve recipeTimeline UI

* format

* fixes

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>

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 }">

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

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>

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>();

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>