fixes: PWA & interface on small screens (#2536)

* fix pwa icons

* fix spacing and layouts for small screens

* translate missing strings

* Revert "translate missing strings"

This reverts commit 150a961a0811cfe7d25f2dd8d79baf70f9a422ec.

* fixes

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -180,8 +180,8 @@ export default defineComponent({
   align-self: start !important;
 }
 
-.flat {
+.flat, .theme--dark .flat {
   box-shadow: none!important;
-  background-color: transparent;
+  background-color: transparent!important;
 }
 </style>

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageFooter.vue

@@ -18,7 +18,7 @@
         :href="recipe.orgURL"
         color="secondary darken-1"
         target="_blank"
-        class="rounded-sm mr-4"
+        class="rounded-sm mr-n2"
       >
         {{ $t("recipe.original-url") }}
       </v-btn>

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue

@@ -26,11 +26,12 @@
       </TransitionGroup>
     </draggable>
     <v-skeleton-loader v-else boilerplate elevation="2" type="list-item"> </v-skeleton-loader>
-    <div class="d-flex justify-end mt-2">
+    <div class="d-flex flex-wrap justify-center justify-sm-end mt-2">
       <v-tooltip top color="accent">
         <template #activator="{ on, attrs }">
           <span v-on="on">
             <BaseButton
+              class="mb-1"
               :disabled="recipe.settings.disableAmount || hasFoodOrUnit"
               color="accent"
               :to="`${recipe.slug}/ingredient-parser`"
@@ -45,8 +46,8 @@
         </template>
         <span>{{ parserToolTip }}</span>
       </v-tooltip>
-      <RecipeDialogBulkAdd class="ml-1 mr-1" @bulk-data="addIngredient" />
+      <RecipeDialogBulkAdd class="mx-1 mb-1" @bulk-data="addIngredient" />
-      <BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
+      <BaseButton class="mb-1" @click="addIngredient" > {{ $t("general.new") }} </BaseButton>
     </div>
   </div>
 </template>

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue

@@ -108,7 +108,7 @@
           </v-app-bar>
           <v-hover v-slot="{ hover }">
             <v-card
-              class="ma-1"
+              class="my-3"
               :class="[{ 'on-hover': hover }, isChecked(index)]"
               :elevation="hover ? 12 : 2"
               :ripple="false"

frontend/nuxt.config.js

@@ -26,7 +26,12 @@ export default {
         content: "Mealie is a recipe management app for your kitchen.",
       },
     ],
-    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
+    link: [
+      { hid: "favicon", rel: "icon", type: "image/x-icon", href: "/favicon.ico", "data-n-head": "ssr" },
+      { hid: "shortcut icon", rel: "shortcut icon", type: "image/png", href: "/icons/icon-x64.png", "data-n-head": "ssr" },
+      { hid: "apple-touch-icon", rel: "apple-touch-icon", type: "image/png", href: "/icons/apple-touch-icon.png", "data-n-head": "ssr" },
+      { hid: "mask-icon", rel: "mask-icon", href: "/icons/safari-pinned-tab.svg", "data-n-head": "ssr" }
+    ],
   },
 
   env: {
@@ -324,7 +329,7 @@ export default {
       /* meta options */
       name: "Mealie",
       description: "Mealie is a recipe management and meal planning app",
-      theme_color: "#E58325",
+      theme_color: process.env.THEME_LIGHT_PRIMARY || "#E58325",
       ogSiteName: "Mealie",
     },
     manifest: {
@@ -332,43 +337,46 @@ export default {
       lang: "en",
       name: "Mealie",
       short_name: "Mealie",
-      title: "Mealie",
+      description: "Mealie is a recipe management and meal planning app",
+      theme_color: process.env.THEME_LIGHT_PRIMARY || "#E58325",
       background_color: "#FFFFFF",
+      display: "standalone",
       share_target: {
-        action: "/",
+        action: "/recipe/create/url",
         method: "GET",
+        enctype: "application/x-www-form-urlencoded",
         params: {
-          title: "title",
+          url: "recipe_import_url",
-          text: "recipe_import_url",
         },
       },
+      icons: [
+        {
+          src: "/icons/android-chrome-192x192.png",
+          sizes: "192x192",
+          type: "image/png",
+          purpose: "any",
+        },
+        {
+          src: "/icons/android-chrome-512x512.png",
+          sizes: "512x512",
+          type: "image/png",
+          purpose: "any",
+        },
+        {
+          src: "/icons/android-chrome-maskable-192x192.png",
+          sizes: "192x192",
+          type: "image/png",
+          purpose: "maskable",
+        },
+        {
+          src: "/icons/android-chrome-maskable-512x512.png",
+          sizes: "512x512",
+          type: "image/png",
+          purpose: "maskable",
+        },
+      ],
     },
-    icons: [
+    icon: false, // disables the icon module
-      {
-        src: "[srcDir]/[staticDir]/icons/android-chrome-192x192.png",
-        sizes: "192x192",
-        type: "image/png",
-        purpose: "any",
-      },
-      {
-        src: "[srcDir]/[staticDir]/icons/android-chrome-512x512.png",
-        sizes: "512x512",
-        type: "image/png",
-        purpose: "any",
-      },
-      {
-        src: "[srcDir]/[staticDir]/icons/android-chrome-maskable-192x192.png",
-        sizes: "192x192",
-        type: "image/png",
-        purpose: "maskable",
-      },
-      {
-        src: "[srcDir]/[staticDir]/icons/android-chrome-maskable-512x512.png",
-        sizes: "512x512",
-        type: "image/png",
-        purpose: "maskable",
-      },
-    ],
   },
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify

frontend/pages/admin/backups.vue

@@ -104,8 +104,8 @@
         </div>
       </section>
     </section>
-    <v-container class="mt-4 d-flex justify-end">
+    <v-container class="mt-4 d-flex justify-center text-center">
-      <v-btn outlined rounded to="/group/migrations"> {{ $t('recipe.looking-for-migrations') }} </v-btn>
+      <nuxt-link to="/group/migrations"> {{ $t('recipe.looking-for-migrations') }} </nuxt-link>
     </v-container>
   </v-container>
 </template>

frontend/pages/group/members.vue

@@ -13,10 +13,10 @@
             <b>{{ $t('group.invite') }}</b>
           </template>
         </i18n>
-    </BasePageTitle>
+        <v-container class="mt-1 px-0">
-    <v-container class="mt-4 d-flex justify-start">
+        <nuxt-link class="text-center" to="/user/profile/edit"> {{ $t('group.looking-to-update-your-profile') }} </nuxt-link>
-      <v-btn outlined rounded to="/user/profile/edit"> {{ $t('group.looking-to-update-your-profile') }} </v-btn>
+      </v-container>
-    </v-container>
+      </BasePageTitle>
     <v-data-table
       :headers="headers"
       :items="members || []"

frontend/pages/group/notifiers.vue

@@ -25,13 +25,13 @@
       <template #title> {{ $t("events.event-notifiers") }} </template>
       {{ $t("events.new-notification-form-description") }}
 
-      <div class="mt-3 d-flex justify-space-around">
+      <div class="mt-3 d-flex flex-wrap justify-space-between mx-n2">
-        <a href="https://github.com/caronc/apprise/wiki" target="_blanks"> Apprise </a>
+        <a href="https://github.com/caronc/apprise/wiki" target="_blanks" class="mx-2"> Apprise </a>
-        <a href="https://github.com/caronc/apprise/wiki/Notify_gotify" target="_blanks"> Gotify </a>
+        <a href="https://github.com/caronc/apprise/wiki/Notify_gotify" target="_blanks" class="mx-2"> Gotify </a>
-        <a href="https://github.com/caronc/apprise/wiki/Notify_discord" target="_blanks"> Discord </a>
+        <a href="https://github.com/caronc/apprise/wiki/Notify_discord" target="_blanks" class="mx-2"> Discord </a>
-        <a href="https://github.com/caronc/apprise/wiki/Notify_homeassistant" target="_blanks"> Home Assistant </a>
+        <a href="https://github.com/caronc/apprise/wiki/Notify_homeassistant" target="_blanks" class="mx-2"> Home Assistant </a>
-        <a href="https://github.com/caronc/apprise/wiki/Notify_matrix" target="_blanks"> Matrix </a>
+        <a href="https://github.com/caronc/apprise/wiki/Notify_matrix" target="_blanks" class="mx-2"> Matrix </a>
-        <a href="https://github.com/caronc/apprise/wiki/Notify_pushover" target="_blanks"> Pushover </a>
+        <a href="https://github.com/caronc/apprise/wiki/Notify_pushover" target="_blanks" class="mx-2"> Pushover </a>
       </div>
     </BasePageTitle>
 

frontend/pages/login.vue

@@ -60,14 +60,12 @@
           </v-card-actions>
         </v-form>
       </v-card-text>
-      <v-card-actions>
+      <v-card-actions class="d-flex justify-center flex-column flex-sm-row">
         <v-btn v-if="allowSignup" text to="/register"> {{ $t("user.register") }} </v-btn>
         <v-btn v-else text disabled> {{ $t("user.invite-only") }} </v-btn>
         <v-btn class="mr-auto" text to="/forgot-password"> {{ $t("user.reset-password") }} </v-btn>
       </v-card-actions>
 
-      <v-divider></v-divider>
-
       <v-card-text class="d-flex justify-center flex-column flex-sm-row">
         <div
           v-for="link in [
@@ -99,13 +97,6 @@
         </div>
       </v-card-text>
     </v-card>
-
-    <v-btn bottom center class="mt-5" @click="toggleDark">
-      <v-icon left>
-        {{ $vuetify.theme.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }}
-      </v-icon>
-      {{ $vuetify.theme.dark ? $t('settings.theme.light-mode') : $t('settings.theme.dark-mode') }}
-    </v-btn>
   </v-container>
 </template>
 
@@ -115,12 +106,11 @@ import { useDark, whenever } from "@vueuse/core";
 import { useAppInfo } from "~/composables/api";
 import { usePasswordField } from "~/composables/use-passwords";
 import { alert } from "~/composables/use-toast";
-import { useToggleDarkMode } from "~/composables/use-utils";
+
 export default defineComponent({
   layout: "blank",
 
   setup() {
-    const toggleDark = useToggleDarkMode();
     const isDark = useDark();
 
     const router = useRouter();
@@ -186,7 +176,6 @@ export default defineComponent({
       loggingIn,
       allowSignup,
       authenticate,
-      toggleDark,
       passwordIcon,
       inputType,
       togglePasswordShow,

frontend/pages/recipe/create.vue

@@ -19,8 +19,8 @@
     </v-container>
 
     <AdvancedOnly>
-      <v-container class="d-flex justify-end">
+      <v-container class="d-flex justify-center align-center my-4">
-        <v-btn outlined rounded to="/group/migrations"> {{ $t('recipe.looking-for-migrations') }}</v-btn>
+        <a to="/group/migrations"> {{ $t('recipe.looking-for-migrations') }}</a>
       </v-container>
     </AdvancedOnly>
   </div>

frontend/pages/recipe/create/bulk.vue

@@ -65,7 +65,7 @@
           </v-col>
         </template>
       </v-row>
-      <v-card-actions class="justify-end">
+      <v-card-actions class="justify-end flex-wrap mb-1">
         <BaseButton
           delete
           @click="
@@ -76,11 +76,11 @@
           Clear
         </BaseButton>
         <v-spacer></v-spacer>
-        <BaseButton class="mr-1" color="info" @click="bulkUrls.push({ url: '', categories: [], tags: [] })">
+        <BaseButton class="mr-1 mb-1" color="info" @click="bulkUrls.push({ url: '', categories: [], tags: [] })">
           <template #icon> {{ $globals.icons.createAlt }} </template>
-          New
+          {{ $t('general.new') }}
         </BaseButton>
-        <RecipeDialogBulkAdd v-model="bulkDialog" @bulk-data="assignUrls" />
+        <RecipeDialogBulkAdd v-model="bulkDialog" class="mr-1 mr-sm-0 mb-1" @bulk-data="assignUrls" />
       </v-card-actions>
       <div class="px-1">
         <v-checkbox v-model="showCatTags" hide-details :label="$t('recipe.set-categories-and-tags')" />

frontend/pages/user/profile/api-tokens.vue

@@ -43,9 +43,9 @@
       </v-card>
     </section>
     <BaseCardSectionTitle class="mt-10" title="Active Tokens"> </BaseCardSectionTitle>
-    <section class="d-flex flex-column align-center justify-center">
+    <section class="d-flex flex-column">
-      <div v-for="(token, index) in $auth.user.tokens" :key="index" class="d-flex my-2">
+      <div v-for="(token, index) in $auth.user.tokens" :key="index">
-        <v-card outlined width="500px">
+        <v-card outlined class="mb-2">
           <v-list-item>
             <v-list-item-content>
               <v-list-item-title>

frontend/pages/user/profile/edit.vue

@@ -13,7 +13,7 @@
           />
         </div>
       </template>
-      <template #title> Your Profile Settings </template>
+      <template #title> {{ $t("profile.user-settings") }} </template>
     </BasePageTitle>
 
     <section class="mt-5">
@@ -108,6 +108,7 @@
         :label="$t('profile.show-advanced-description')"
         @change="updateUser"
       ></v-checkbox>
+      <nuxt-link class="mt-5 d-flex flex-column justify-center text-center" to="/group"> {{ $t('profile.looking-for-privacy-settings') }} </nuxt-link>
       <div class="d-flex flex-wrap justify-center mt-5">
         <v-btn outlined class="rounded-xl my-1 mx-1" to="/user/profile" nuxt exact>
           <v-icon left>
@@ -115,7 +116,6 @@
           </v-icon>
           {{ $t('profile.back-to-profile') }}
         </v-btn>
-        <v-btn outlined class="rounded-xl my-1 mx-1" to="/group"> {{ $t('profile.looking-for-privacy-settings') }} </v-btn>
       </div>
     </section>
   </v-container>

frontend/pages/user/profile/index.vue

@@ -1,15 +1,15 @@
 <template>
   <v-container v-if="user">
-    <section class="d-flex flex-column align-center">
+    <section class="d-flex flex-column align-center mt-4">
-      <UserAvatar size="84" :user-id="$auth.user.id" />
+      <UserAvatar size="96" :user-id="$auth.user.id" />
 
       <h2 class="headline">{{ $t('profile.welcome-user', [user.fullName]) }}</h2>
-      <p class="subtitle-1 mb-0">
+      <p class="subtitle-1 mb-0 text-center">
        {{ $t('profile.description') }}
         <a href="https://hay-kot.github.io/mealie/" target="_blank"> {{ $t('general.learn-more') }} </a>
       </p>
       <v-card flat color="background" width="100%" max-width="600px">
-        <v-card-actions class="d-flex justify-center">
+        <v-card-actions class="d-flex justify-center my-4">
           <v-btn v-if="$auth.user.canInvite"  outlined rounded @click="getSignupLink()">
             <v-icon left>
               {{ $globals.icons.createAlt }}