Make paginated modals and ChatEditModal fullscreen on mobile

nkonev · Jan 12, 2025 · 22f1a70 · 22f1a70
1 parent 0ae72ec
commit 22f1a70
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 17 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -966,16 +966,6 @@ html {
   }
 }
 
-// to check those 2 bugs:
-// Open ChatEditModal of a chat with an avatar
-
-// reverts 3.7.4 https://github.com/vuetifyjs/vuetify/commit/42a12dd89da2e7e5ea5f6a3bc7611fb2e9f2563a#diff-0ca827fe1439dde86f60164ea243a0e4c495fa2e03606f4dd802703d1a0d30efR58
-.v-dialog--scrollable {
-  > .v-overlay__content {
-    max-height: calc(100% - 48px);
-  }
-}
-
 // reverts some changes from ~3.7.0 (from F12)
 .my-actions .v-btn ~ .v-btn:not(.v-btn-toggle .v-btn) {
   margin-inline-start: .5rem;
@@ -986,6 +976,18 @@ html {
 <style lang="stylus">
 @import "constants.styl"
 
+@media screen and (min-width: $mobileWidth) {
+  // to check those 2 bugs:
+  // Open ChatEditModal of a chat with an avatar
+  // reverts 3.7.4 https://github.com/vuetifyjs/vuetify/commit/42a12dd89da2e7e5ea5f6a3bc7611fb2e9f2563a#diff-0ca827fe1439dde86f60164ea243a0e4c495fa2e03606f4dd802703d1a0d30efR58
+  .v-dialog--scrollable {
+    > .v-overlay__content {
+      max-height: calc(100% - 48px);
+    }
+  }
+}
+
+
 .colored-link {
     color: $linkColor;
     text-decoration none

diff --git a/frontend/src/ChatEditModal.vue b/frontend/src/ChatEditModal.vue
@@ -2,7 +2,7 @@
     <v-row justify="center">
         <input id="image-input-chat-avatar" type="file" style="display: none;" accept="image/*"/>
 
-        <v-dialog v-model="show" max-width="640" :persistent="isNew" scrollable>
+        <v-dialog v-model="show" max-width="640" :persistent="isNew" scrollable :fullscreen="isMobile()">
             <v-card :title="getTitle()">
                 <v-card-text :class="isMobile() ? ['ma-0', 'mx-2', 'pa-0', 'pt-2'] : ['ma-0', 'mx-4', 'pa-0', 'pt-2']">
                     <v-form

diff --git a/frontend/src/ChatParticipantsModal.vue b/frontend/src/ChatParticipantsModal.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row justify="center">
-        <v-dialog v-model="show" max-width="740" scrollable :persistent="hasSearchString() || chatStore.showAlertDebounced">
+        <v-dialog v-model="show" max-width="740" scrollable :persistent="hasSearchString() || chatStore.showAlertDebounced" :fullscreen="isMobile()">
             <v-card>
                 <v-card-title class="d-flex align-center ml-2">
                     <template v-if="showSearchButton">

diff --git a/frontend/src/FileListModal.vue b/frontend/src/FileListModal.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row justify="center">
-        <v-dialog v-model="show" max-width="800" height="100%" scrollable :persistent="hasSearchString()">
+        <v-dialog v-model="show" max-width="800" height="100%" scrollable :persistent="hasSearchString()" :fullscreen="isMobile()">
             <v-card>
                 <v-card-title class="d-flex align-center ml-2">
                     <template v-if="showSearchButton">

diff --git a/frontend/src/MessageEditMediaModal.vue b/frontend/src/MessageEditMediaModal.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row justify="center">
-        <v-dialog v-model="show" max-width="800" height="100%" scrollable>
+        <v-dialog v-model="show" max-width="800" height="100%" scrollable :fullscreen="isMobile()">
           <v-card :title="title()">
                 <v-card-text>
                     <v-row

diff --git a/frontend/src/NotificationsModal.vue b/frontend/src/NotificationsModal.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row justify="center">
-        <v-dialog v-model="show" max-width="640" scrollable>
+        <v-dialog v-model="show" max-width="640" scrollable :fullscreen="isMobile()">
             <v-card>
                 <v-card-title class="d-flex align-center ml-2 mt-2">
                     {{ $vuetify.locale.t('$vuetify.notifications') }}

diff --git a/frontend/src/PinnedMessagesModal.vue b/frontend/src/PinnedMessagesModal.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row justify="center">
-        <v-dialog v-model="show" max-width="640" scrollable>
+        <v-dialog v-model="show" max-width="640" scrollable :fullscreen="isMobile()">
             <v-card :title="$vuetify.locale.t('$vuetify.pinned_messages_full')">
                 <v-card-text class="ma-0 pa-0">
                     <v-list class="pb-0" v-if="!loading">

diff --git a/frontend/src/PublishedMessagesModal.vue b/frontend/src/PublishedMessagesModal.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row justify="center">
-        <v-dialog v-model="show" max-width="640" scrollable>
+        <v-dialog v-model="show" max-width="640" scrollable :fullscreen="isMobile()">
             <v-card :title="$vuetify.locale.t('$vuetify.published_messages_full')">
                 <v-card-text class="ma-0 pa-0">
                     <v-list class="pb-0" v-if="!loading">