fix: fix responsive version (#7424)

monicahq · Oct 25, 2024 · 67b0f6f · 67b0f6f
1 parent c47eb45
commit 67b0f6f
Show file tree

Hide file tree

Showing 10 changed files with 308 additions and 117 deletions.
diff --git a/resources/js/Pages/Vault/Contact/Show.vue b/resources/js/Pages/Vault/Contact/Show.vue
@@ -3,6 +3,7 @@ import { ref, reactive } from 'vue';
 import { Link, router, useForm } from '@inertiajs/vue3';
 import { trans } from 'laravel-vue-i18n';
 import { flash } from '@/methods.js';
+import { onMounted } from 'vue';
 import JetDialogModal from '@/Components/Jetstream/DialogModal.vue';
 import JetConfirmationModal from '@/Components/Jetstream/ConfirmationModal.vue';
 import JetButton from '@/Components/Button.vue';
@@ -151,6 +152,19 @@ const download = () => {
     },
   });
 };
+
+const selectedOption = ref('');
+
+onMounted(() => {
+  const selectedPage = Object.values(props.data.template_pages).find((page) => page.selected);
+  if (selectedPage) {
+    selectedOption.value = selectedPage.url.show;
+  }
+});
+
+const navigateToSelected = () => {
+  router.visit(selectedOption.value);
+};
 </script>
 
 <template>
@@ -304,8 +318,8 @@ const download = () => {
               </div>
             </div>
 
-            <!-- all the pages -->
-            <div class="mb-8 w-full border-b border-gray-200 dark:border-gray-700">
+            <!-- page selector on desktop -->
+            <div class="hidden md:block mb-8 w-full border-b border-gray-200 dark:border-gray-700">
               <div class="flex overflow-x-hidden">
                 <div v-for="page in data.template_pages" :key="page.id" class="me-2 flex-none">
                   <Link
@@ -324,6 +338,19 @@ const download = () => {
               </div>
             </div>
 
+            <!-- page selector on mobile -->
+            <div class="md:hidden mb-8 w-full">
+              <p class="text-sm mb-2">{{ $t('Select a page') }}</p>
+              <select
+                v-model="selectedOption"
+                @change="navigateToSelected"
+                class="w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
+                <option v-for="page in data.template_pages" :key="page.id" :value="page.url.show">
+                  {{ page.name }}
+                </option>
+              </select>
+            </div>
+
             <!-- all the modules -->
             <div v-if="data.modules.length > 0">
               <div v-for="module in data.modules" :key="module.id">

diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
diff --git a/resources/js/Shared/Modules/ContactAvatar.vue b/resources/js/Shared/Modules/ContactAvatar.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <avatar :data="data.avatar" :class="'mx-auto mb-6 sm:w-1/2'" :img-classes="'rounded sm:w-72'" />
+    <avatar :data="data.avatar" :class="'mx-auto mb-6 w-32 sm:w-1/2'" :img-classes="'rounded sm:w-72'" />
   </div>
 </template>
 

diff --git a/resources/js/Shared/Modules/ContactName.vue b/resources/js/Shared/Modules/ContactName.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mb-4">
-    <div class="mb-1 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
+    <div class="mb-1 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Name') }}</div>
       <InertiaLink :href="data.url.edit" class="relative">
         <svg

diff --git a/resources/js/Shared/Modules/GenderPronoun.vue b/resources/js/Shared/Modules/GenderPronoun.vue
@@ -10,7 +10,7 @@ defineProps({
   <div class="mb-4 grid grid-cols-2 gap-4">
     <!-- gender -->
     <div>
-      <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
+      <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
         <div class="mb-2 text-xs sm:mb-0">{{ $t('Gender') }}</div>
         <Link :href="data.url.edit" class="relative">
           <svg
@@ -36,7 +36,7 @@ defineProps({
 
     <!-- pronoun -->
     <div>
-      <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
+      <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
         <div class="mb-2 text-xs sm:mb-0">{{ $t('Pronoun') }}</div>
         <Link :href="data.url.edit" class="relative">
           <svg

diff --git a/resources/js/Shared/Modules/ImportantDates.vue b/resources/js/Shared/Modules/ImportantDates.vue
@@ -8,7 +8,7 @@ defineProps({
 
 <template>
   <div class="mb-4">
-    <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
+    <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Important dates') }}</div>
       <Link :href="data.url.edit" class="relative">
         <svg

diff --git a/resources/js/Shared/Modules/JobInformation.vue b/resources/js/Shared/Modules/JobInformation.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mb-4">
-    <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
+    <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Job information') }}</div>
       <span v-if="!editJobInformation" class="relative cursor-pointer" @click="showEditModal">
         <svg

diff --git a/resources/js/Shared/Modules/Labels.vue b/resources/js/Shared/Modules/Labels.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mb-4">
-    <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
+    <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Labels') }}</div>
       <span v-if="!editLabelModalShown" class="relative cursor-pointer" @click="showEditModal">
         <svg

diff --git a/resources/js/Shared/Modules/Pets.vue b/resources/js/Shared/Modules/Pets.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mb-10">
     <!-- title + cta -->
-    <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
+    <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
           <span class="relative me-1">

diff --git a/resources/js/Shared/Modules/Religion.vue b/resources/js/Shared/Modules/Religion.vue
@@ -41,7 +41,7 @@ const showEditModal = () => {
 
 <template>
   <div class="mb-4">
-    <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
+    <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
       <!-- title -->
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Religion') }}</div>