From 02272e4385a1135e6be69a05627f3a10b9204afa Mon Sep 17 00:00:00 2001
From: wengtad <wengtad93@gmail.com>
Date: Fri, 19 Feb 2021 11:11:19 +0800
Subject: [PATCH] Enhance mobile view (#171)

---
 .../Settings/Backup/AvailableBackupCard.vue   | 11 ++++----
 .../Settings/Backup/ImportDialog.vue          | 25 +++++++++++++++--
 .../Settings/Backup/NewBackupCard.vue         |  2 +-
 .../src/components/Settings/Backup/index.vue  |  2 +-
 .../Settings/General/HomePageSettings.vue     | 10 +++----
 .../src/components/Settings/General/index.vue |  2 +-
 .../Settings/Migration/MigrationCard.vue      | 12 +++++----
 .../components/Settings/Migration/index.vue   |  3 ++-
 .../Settings/Theme/ColorPickerDialog.vue      | 27 ++++++++++++++++---
 .../src/components/Settings/Theme/index.vue   | 23 ++++++++++++----
 .../src/components/UI/SuccessFailureAlert.vue | 18 +++++++++++--
 11 files changed, 104 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/Settings/Backup/AvailableBackupCard.vue b/frontend/src/components/Settings/Backup/AvailableBackupCard.vue
index 7254e5808..55cbd9ac1 100644
--- a/frontend/src/components/Settings/Backup/AvailableBackupCard.vue
+++ b/frontend/src/components/Settings/Backup/AvailableBackupCard.vue
@@ -9,6 +9,7 @@
     />
     <v-row>
       <v-col
+        :cols="12"
         :sm="6"
         :md="6"
         :lg="4"
@@ -19,14 +20,14 @@
         <v-card hover outlined @click="openDialog(backup)">
           <v-card-text>
             <v-row align="center">
-              <v-col cols="12" sm="2">
-                <v-icon large color="primary"> mdi-backup-restore </v-icon>
+              <v-col cols="2">
+                <v-icon large color="primary">mdi-backup-restore</v-icon>
               </v-col>
-              <v-col cols="12" sm="10">
-                <div>
+              <v-col cols="10">
+                <div class="text-truncate">
                   <strong>{{ backup.name }}</strong>
                 </div>
-                <div>{{ readableTime(backup.date) }}</div>
+                <div class="text-truncate">{{ readableTime(backup.date) }}</div>
               </v-col>
             </v-row>
           </v-card-text>
diff --git a/frontend/src/components/Settings/Backup/ImportDialog.vue b/frontend/src/components/Settings/Backup/ImportDialog.vue
index db2bed5c3..0749a5aab 100644
--- a/frontend/src/components/Settings/Backup/ImportDialog.vue
+++ b/frontend/src/components/Settings/Backup/ImportDialog.vue
@@ -1,7 +1,23 @@
 <template>
   <div class="text-center">
-    <v-dialog v-model="dialog" width="500">
+    <v-dialog
+      v-model="dialog"
+      width="500"
+      :fullscreen="$vuetify.breakpoint.xsOnly"
+    >
       <v-card>
+        <v-toolbar dark color="primary" v-show="$vuetify.breakpoint.xsOnly">
+          <v-btn icon dark @click="dialog = false">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+          <v-toolbar-title></v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-toolbar-items>
+            <v-btn dark text @click="raiseEvent('import')">
+              {{ $t("general.import") }}
+            </v-btn>
+          </v-toolbar-items>
+        </v-toolbar>
         <v-card-title> {{ name }} </v-card-title>
         <v-card-subtitle class="mb-n3"> {{ date }} </v-card-subtitle>
         <v-divider></v-divider>
@@ -72,7 +88,12 @@
           <v-btn color="error" text @click="raiseEvent('delete')">
             {{ $t("general.delete") }}
           </v-btn>
-          <v-btn color="success" outlined @click="raiseEvent('import')">
+          <v-btn
+            color="success"
+            outlined
+            @click="raiseEvent('import')"
+            v-show="$vuetify.breakpoint.smAndUp"
+          >
             {{ $t("general.import") }}
           </v-btn>
         </v-card-actions>
diff --git a/frontend/src/components/Settings/Backup/NewBackupCard.vue b/frontend/src/components/Settings/Backup/NewBackupCard.vue
index f87d4dca1..0abbd9125 100644
--- a/frontend/src/components/Settings/Backup/NewBackupCard.vue
+++ b/frontend/src/components/Settings/Backup/NewBackupCard.vue
@@ -8,7 +8,7 @@
         v-model="tag"
       ></v-text-field>
     </v-card-text>
-    <v-card-actions class="mt-n9">
+    <v-card-actions class="mt-n9 flex-wrap">
       <v-switch v-model="fullBackup" :label="switchLabel"></v-switch>
       <v-spacer></v-spacer>
       <v-btn color="success" text @click="createBackup()">
diff --git a/frontend/src/components/Settings/Backup/index.vue b/frontend/src/components/Settings/Backup/index.vue
index d019a0b65..d28f64615 100644
--- a/frontend/src/components/Settings/Backup/index.vue
+++ b/frontend/src/components/Settings/Backup/index.vue
@@ -7,7 +7,7 @@
 
     <v-card-text>
       <v-row>
-        <v-col cols="12" md="6" ss="12">
+        <v-col cols="12" md="6" sm="12">
           <NewBackupCard @created="processFinished" />
         </v-col>
         <v-col cols="12" md="6" sm="12">
diff --git a/frontend/src/components/Settings/General/HomePageSettings.vue b/frontend/src/components/Settings/General/HomePageSettings.vue
index e80c2610c..fc4d44ec7 100644
--- a/frontend/src/components/Settings/General/HomePageSettings.vue
+++ b/frontend/src/components/Settings/General/HomePageSettings.vue
@@ -3,12 +3,12 @@
     <v-card-text>
       <h2 class="mt-1 mb-1">Home Page</h2>
       <v-row align="center" justify="center" dense class="mb-n7 pb-n5">
-        <v-col sm="2">
+        <v-col cols="12" sm="3" md="2">
           <v-switch v-model="showRecent" label="Show Recent"></v-switch>
         </v-col>
-        <v-col>
+        <v-col cols="12" sm="5" md="5">
           <v-slider
-            class="pt-4"
+            class="pt-sm-4"
             label="Card Per Section"
             v-model="showLimit"
             max="30"
@@ -24,7 +24,7 @@
     </v-card-text>
     <v-card-text>
       <v-row>
-        <v-col>
+        <v-col cols="12" sm="6">
           <v-card outlined min-height="250">
             <v-card-text class="pt-2 pb-1">
               <h3>Homepage Categories</h3>
@@ -64,7 +64,7 @@
             </v-list>
           </v-card>
         </v-col>
-        <v-col>
+        <v-col cols="12" sm="6">
           <v-card outlined min-height="250px">
             <v-card-text class="pt-2 pb-1">
               <h3>
diff --git a/frontend/src/components/Settings/General/index.vue b/frontend/src/components/Settings/General/index.vue
index 693c3a92c..808c16694 100644
--- a/frontend/src/components/Settings/General/index.vue
+++ b/frontend/src/components/Settings/General/index.vue
@@ -14,7 +14,7 @@
     <v-card-text>
       <h2 class="mt-1 mb-4">{{ $t("settings.language") }}</h2>
       <v-row>
-        <v-col cols="3">
+        <v-col sm="3">
           <v-select
             dense
             v-model="selectedLang"
diff --git a/frontend/src/components/Settings/Migration/MigrationCard.vue b/frontend/src/components/Settings/Migration/MigrationCard.vue
index cef1020db..53ccc2227 100644
--- a/frontend/src/components/Settings/Migration/MigrationCard.vue
+++ b/frontend/src/components/Settings/Migration/MigrationCard.vue
@@ -21,14 +21,16 @@
       >
         <v-card-text>
           <v-row align="center">
-            <v-col cols="12" sm="2">
-              <v-icon large color="primary"> mdi-import </v-icon>
+            <v-col cols="2">
+              <v-icon large color="primary">mdi-import</v-icon>
             </v-col>
-            <v-col cols="12" sm="10">
-              <div>
+            <v-col cols="10">
+              <div class="text-truncate">
                 <strong>{{ migration.name }}</strong>
               </div>
-              <div>{{ readableTime(migration.date) }}</div>
+              <div class="text-truncate">
+                {{ readableTime(migration.date) }}
+              </div>
             </v-col>
           </v-row>
         </v-card-text>
diff --git a/frontend/src/components/Settings/Migration/index.vue b/frontend/src/components/Settings/Migration/index.vue
index e669c057b..78684d2df 100644
--- a/frontend/src/components/Settings/Migration/index.vue
+++ b/frontend/src/components/Settings/Migration/index.vue
@@ -17,7 +17,8 @@
 
     <v-row dense>
       <v-col
-        :sm="12"
+        :cols="12"
+        :sm="6"
         :md="6"
         :lg="4"
         :xl="3"
diff --git a/frontend/src/components/Settings/Theme/ColorPickerDialog.vue b/frontend/src/components/Settings/Theme/ColorPickerDialog.vue
index 3504e9e49..1ad072e81 100644
--- a/frontend/src/components/Settings/Theme/ColorPickerDialog.vue
+++ b/frontend/src/components/Settings/Theme/ColorPickerDialog.vue
@@ -3,7 +3,13 @@
     <div class="text-center">
       <h3>{{ buttonText }}</h3>
     </div>
-    <v-text-field v-model="color" hide-details class="ma-0 pa-0" solo>
+    <v-text-field
+      v-model="color"
+      hide-details
+      class="ma-0 pa-0"
+      solo
+      v-show="$vuetify.breakpoint.mdAndUp"
+    >
       <template v-slot:append>
         <v-menu
           v-model="menu"
@@ -17,12 +23,27 @@
           </template>
           <v-card>
             <v-card-text class="pa-0">
-              <v-color-picker v-model="color" flat show-swatches />
+              <v-color-picker v-model="color" flat mode="hexa" show-swatches />
             </v-card-text>
           </v-card>
         </v-menu>
       </template>
     </v-text-field>
+    <div class="text-center" v-show="$vuetify.breakpoint.smAndDown">
+      <v-menu
+        v-model="menu"
+        top
+        nudge-bottom="105"
+        nudge-left="16"
+        :close-on-content-click="false"
+      >
+        <template v-slot:activator="{ on, attrs }">
+          <v-chip label :color="`${color}`" dark v-bind="attrs" v-on="on">
+            {{ color }}
+          </v-chip>
+        </template>
+      </v-menu>
+    </div>
   </div>
 </template>
 
@@ -36,7 +57,7 @@ export default {
     return {
       dialog: false,
       swatches: false,
-      color: "#1976D2",
+      color: this.value || "#1976D2",
       mask: "!#XXXXXXXX",
       menu: false,
     };
diff --git a/frontend/src/components/Settings/Theme/index.vue b/frontend/src/components/Settings/Theme/index.vue
index 101a08dd5..e113071af 100644
--- a/frontend/src/components/Settings/Theme/index.vue
+++ b/frontend/src/components/Settings/Theme/index.vue
@@ -14,7 +14,7 @@
         }}
       </p>
       <v-row dense align="center">
-        <v-col cols="12">
+        <v-col cols="6">
           <v-btn-toggle
             v-model="selectedDarkMode"
             color="primary "
@@ -22,12 +22,25 @@
             @change="setStoresDarkMode"
           >
             <v-btn value="system">
-              {{ $t("settings.theme.default-to-system") }}
+              <v-icon>mdi-desktop-tower-monitor</v-icon>
+              <span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
+                {{ $t("settings.theme.default-to-system") }}
+              </span>
             </v-btn>
 
-            <v-btn value="light"> {{ $t("settings.theme.light") }} </v-btn>
+            <v-btn value="light">
+              <v-icon>mdi-white-balance-sunny</v-icon>
+              <span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
+                {{ $t("settings.theme.light") }}
+              </span>
+            </v-btn>
 
-            <v-btn value="dark"> {{ $t("settings.theme.dark") }} </v-btn>
+            <v-btn value="dark">
+              <v-icon>mdi-weather-night</v-icon>
+              <span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
+                {{ $t("settings.theme.dark") }}
+              </span>
+            </v-btn>
           </v-btn-toggle>
         </v-col>
       </v-row></v-card-text
@@ -45,7 +58,7 @@
 
       <v-form ref="form" lazy-validation>
         <v-row dense align="center">
-          <v-col md="4" sm="3">
+          <v-col cols="12" md="4" sm="3">
             <v-select
               :label="$t('settings.theme.saved-color-theme')"
               :items="availableThemes"
diff --git a/frontend/src/components/UI/SuccessFailureAlert.vue b/frontend/src/components/UI/SuccessFailureAlert.vue
index 0f6982d63..f9ea68360 100644
--- a/frontend/src/components/UI/SuccessFailureAlert.vue
+++ b/frontend/src/components/UI/SuccessFailureAlert.vue
@@ -1,7 +1,21 @@
 <template>
-  <v-dialog v-model="dialog" max-width="900px">
+  <v-dialog
+    v-model="dialog"
+    max-width="900px"
+    :fullscreen="$vuetify.breakpoint.xsOnly"
+  >
     <v-card>
-      <v-card-title> {{ title }} </v-card-title>
+      <v-toolbar dark color="primary" v-show="$vuetify.breakpoint.xsOnly">
+        <v-btn icon dark @click="dialog = false">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+        <v-toolbar-title>{{ title }}</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-toolbar-items></v-toolbar-items>
+      </v-toolbar>
+      <v-card-title v-show="$vuetify.breakpoint.smAndUp">
+        {{ title }}
+      </v-card-title>
       <v-card-text class="mt-3">
         <v-row>
           <v-col>