refactor(Dialogs): full height & width on mobile (#1193)

openfoodfacts · Dec 30, 2024 · 3b5f6a9 · 3b5f6a9
1 parent 252c74b
commit 3b5f6a9
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 8 deletions.
diff --git a/src/components/BarcodeManualInputDialog.vue b/src/components/BarcodeManualInputDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog max-height="80%" min-width="50%" width="auto">
+  <v-dialog scrollable :height="dialogHeight" :width="dialogWidth">
     <v-card>
       <v-card-title>
         {{ $t('BarcodeManualInput.Title') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close" />
@@ -47,6 +47,12 @@ export default {
     }
   },
   computed: {
+    dialogHeight() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
+    dialogWidth() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
     formFilled() {
       return Object.values(this.barcodeForm).every(x => !!x)
     }

diff --git a/src/components/BarcodeScannerDialog.vue b/src/components/BarcodeScannerDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog scrollable min-height="50%" max-height="80%" min-width="50%">
+  <v-dialog scrollable :height="dialogHeight" :width="dialogWidth">
     <v-card>
       <v-card-title>
         {{ $t('Common.ProductFind') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close" />
@@ -116,6 +116,12 @@ export default {
   },
   computed: {
     ...mapStores(useAppStore),
+    dialogHeight() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
+    dialogWidth() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
     displayItems() {
       if (this.hideBarcodeScannerTab) {
         return constants.PRODUCT_SELECTOR_DISPLAY_LIST.filter(item => item.key !== constants.PRODUCT_SELECTOR_DISPLAY_LIST[0].key)

diff --git a/src/components/LocationSelectorDialog.vue b/src/components/LocationSelectorDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog scrollable height="80%" width="80%">
+  <v-dialog scrollable :height="dialogHeight" :width="dialogWidth">
     <v-card>
       <v-card-title>
         {{ $t('Common.LocationFindShop') }} <v-btn
@@ -176,6 +176,12 @@ export default {
   },
   computed: {
     ...mapStores(useAppStore),
+    dialogHeight() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
+    dialogWidth() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
     recentLocations() {
       return this.appStore.getRecentLocations()
     },

diff --git a/src/components/PriceDeleteConfirmationDialog.vue b/src/components/PriceDeleteConfirmationDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog scrollable max-height="80%" min-width="50%" width="auto">
+  <v-dialog scrollable :height="dialogHeight" :width="dialogWidth">
     <v-card>
       <v-card-title>
         {{ $t('PriceDelete.Title') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="closeDialog" />
@@ -56,6 +56,14 @@ export default {
       loading: false,
     }
   },
+  computed: {
+    dialogHeight() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
+    dialogWidth() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
+  },
   methods: {
     deletePrice() {
       this.loading = true

diff --git a/src/components/PriceEditDialog.vue b/src/components/PriceEditDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog scrollable max-height="80%" min-width="50%" width="auto">
+  <v-dialog scrollable :height="dialogHeight" :width="dialogWidth">
     <v-card>
       <v-card-title>
         {{ $t('PriceEdit.Title') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close" />
@@ -86,6 +86,14 @@ export default {
       loading: false
     }
   },
+  computed: {
+    dialogHeight() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
+    dialogWidth() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
+  },
   mounted() {
     this.initUpdatePriceForm()
   },

diff --git a/src/components/ProofDeleteConfirmationDialog.vue b/src/components/ProofDeleteConfirmationDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog scrollable max-height="80%" min-width="50%" width="auto">
+  <v-dialog scrollable :height="dialogHeight" :width="dialogWidth">
     <v-card>
       <v-card-title>
         {{ $t('ProofDelete.Title') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="closeDialog" />
@@ -53,6 +53,12 @@ export default {
     }
   },
   computed: {
+    dialogHeight() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
+    dialogWidth() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
   },
   methods: {
     deleteProof() {

diff --git a/src/components/ProofEditDialog.vue b/src/components/ProofEditDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog scrollable max-height="80%" min-width="50%" width="auto">
+  <v-dialog scrollable :height="dialogHeight" :width="dialogWidth">
     <v-card>
       <v-card-title>
         {{ $t('ProofEdit.Title') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close" />
@@ -67,6 +67,12 @@ export default {
     }
   },
   computed: {
+    dialogHeight() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
+    dialogWidth() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
     formFilled() {
       let keys = ['type', 'date', 'currency']
       return Object.values(this.updateProofForm).filter(k => keys.includes(k)).every(k => !!this.updateProofForm[k])

diff --git a/src/components/UserRecentProofsDialog.vue b/src/components/UserRecentProofsDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog scrollable height="80%" width="80%">
+  <v-dialog scrollable :height="dialogHeight" :width="dialogWidth">
     <v-card>
       <v-card-title>
         {{ $t('UserRecentProofsDialog.SelectRecentProof') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close" />
@@ -57,6 +57,12 @@ export default {
     username() {
       return this.appStore.user.username
     },
+    dialogHeight() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
+    dialogWidth() {
+      return this.$vuetify.display.smAndUp ? '80%' : '100%'
+    },
     getProofParams() {
       let defaultParams = { owner: this.username, page: this.userProofPage }
       if (this.filterType) {