feature/mobile-layout (#431)

* lazy load cards

* shopping list recipe search bug

* admin layout fluid

* site loader

* username support

* mobile tabs

* set username at signup

* update user tests

* patch bug on shopping list

* public mealplan links

* support link (I'm a monster)

* icon only on mobile

* padding

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/pages/Admin/About/index.vue

@@ -1,5 +1,33 @@
 <template>
   <div>
+    <v-app-bar color="primary">
+      <v-spacer></v-spacer>
+      <v-btn href="https://github.com/sponsors/hay-kot" target="_blank" class="mx-1" color="secondary">
+        <v-icon left>
+          mdi-heart
+        </v-icon>
+        Support
+      </v-btn>
+      <v-btn href="https://github.com/hay-kot" target="_blank" class="mx-1" color="secondary">
+        <v-icon left>
+          mdi-github
+        </v-icon>
+        Github
+      </v-btn>
+      <v-btn href="https://hay-kot.dev" target="_blank" class="mx-1" color="secondary">
+        <v-icon left>
+          mdi-account
+        </v-icon>
+        Portfolio
+      </v-btn>
+      <v-btn href="https://hay-kot.github.io/mealie/" target="_blank" class="mx-1" color="secondary">
+        <v-icon left>
+          mdi-folder-outline
+        </v-icon>
+        Docs
+      </v-btn>
+      <v-spacer></v-spacer>
+    </v-app-bar>
     <v-card class="mt-3">
       <v-card-title class="headline">
         {{ $t("about.about-mealie") }}

frontend/src/pages/Admin/ManageUsers/TheUserTable.vue

@@ -155,6 +155,7 @@ export default {
           sortable: false,
           value: "id",
         },
+        { text: this.$t("user.username"), value: "username" },
         { text: this.$t("user.full-name"), value: "fullName" },
         { text: this.$t("user.email"), value: "email" },
         { text: this.$t("group.group"), value: "group" },

frontend/src/pages/Admin/ManageUsers/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-card flat>
-      <v-tabs v-model="tab" background-color="primary" centered dark icons-and-text>
+      <v-tabs v-model="tab" background-color="primary" centered dark icons-and-text show-arrows>
         <v-tabs-slider></v-tabs-slider>
 
         <v-tab href="#users">

frontend/src/pages/Admin/Migration/MigrationDialog.vue

@@ -24,7 +24,7 @@
             </div>
           </v-row>
         </v-card-text>
-        <v-tabs v-model="tab">
+        <v-tabs v-model="tab" show-arrows="">
           <v-tab>{{ $t("general.recipes") }}</v-tab>
         </v-tabs>
         <v-tabs-items v-model="tab">

frontend/src/pages/Admin/Profile/UserCard.vue

@@ -67,7 +67,15 @@
     </template>
     <template v-slot:bottom>
       <v-card-text>
-        <v-form>
+        <v-form ref="userUpdate">
+          <v-text-field
+            :label="$t('user.username')"
+            required
+            v-model="user.username"
+            :rules="[existsRule]"
+            validate-on-blur
+          >
+          </v-text-field>
           <v-text-field
             :label="$t('user.full-name')"
             required
@@ -151,6 +159,9 @@ export default {
       this.user.avatar = avatar;
     },
     async updateUser() {
+      if (!this.$refs.userUpdate.validate()) {
+        return;
+      }
       this.loading = true;
 
       const response = await api.users.update(this.user);

frontend/src/pages/Admin/ToolBox/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-card flat>
-      <v-tabs v-model="tab" background-color="primary" centered dark icons-and-text>
+      <v-tabs v-model="tab" background-color="primary" centered dark icons-and-text show-arrows>
         <v-tabs-slider></v-tabs-slider>
 
         <v-tab href="#event-notifications">

frontend/src/pages/Admin/index.vue

@@ -1,11 +1,9 @@
 <template>
-  <div>
-    <v-container>
-      <v-slide-x-transition hide-on-leave>
-        <router-view></router-view>
-      </v-slide-x-transition>
-    </v-container>
-  </div>
+  <v-container fluid class="pa-5">
+    <v-slide-x-transition hide-on-leave>
+      <router-view></router-view>
+    </v-slide-x-transition>
+  </v-container>
 </template>
 
 <script>