mobile optimization

pages/dashboard/interest-list.vue

@@ -2,22 +2,23 @@
   <div>
     <v-container fluid>
       <!-- Header Section -->
-      <v-row class="mb-6">
+      <v-row class="mb-4 mb-md-6">
         <v-col cols="12" md="8">
-          <h1 class="text-h4 font-weight-bold mb-2">
+          <h1 class="text-h5 text-md-h4 font-weight-bold mb-1 mb-md-2">
             Port Nimara Berth Interests
           </h1>
-          <p class="text-subtitle-1 text-grey-darken-1">
+          <p class="text-body-2 text-md-subtitle-1 text-grey-darken-1">
             Manage and track all potential client interests
           </p>
         </v-col>
-        <v-col cols="12" md="4" class="d-flex justify-end align-center">
+        <v-col cols="12" md="4" class="d-flex justify-start justify-md-end align-center mt-2 mt-md-0">
           <v-btn
             color="primary"
-            size="large"
+            :size="mobile ? 'default' : 'large'"
             @click="showCreateModal = true"
             prepend-icon="mdi-plus"
             variant="tonal"
+            :block="mobile"
           >
             Add Interest
           </v-btn>
@@ -26,14 +27,14 @@
 
       <!-- Search and Filters Section -->
       <v-row class="mb-4">
-        <v-col cols="12" md="6">
+        <v-col cols="12" :md="mobile ? 12 : 6" class="mb-2 mb-md-0">
           <v-text-field
             v-model="search"
             label="Search interests..."
             placeholder="Search by name, yacht, email, phone..."
             prepend-inner-icon="mdi-magnify"
             variant="outlined"
-            density="comfortable"
+            :density="mobile ? 'compact' : 'comfortable'"
             clearable
             hide-details
             class="search-field"
@@ -42,65 +43,78 @@
               <v-fade-transition>
                 <v-chip
                   v-if="filteredInterests.length !== interests?.list?.length"
-                  size="small"
+                  size="x-small"
                   color="primary"
                   variant="tonal"
                 >
-                  {{ filteredInterests.length }} results
+                  {{ filteredInterests.length }}
                 </v-chip>
               </v-fade-transition>
             </template>
           </v-text-field>
         </v-col>
-        <v-col cols="12" md="6" class="d-flex justify-end align-center gap-2">
-          <v-btn
-            v-if="hasActiveFilters"
-            variant="text"
-            color="primary"
-            size="small"
-            @click="clearAllFilters"
-            prepend-icon="mdi-filter-off"
-          >
-            Clear Filters
-          </v-btn>
-          <v-chip-group
-            v-model="selectedSalesLevel"
-            selected-class="text-primary"
-            column
-          >
-            <v-chip
-              filter
-              variant="outlined"
+        <v-col cols="12" :md="mobile ? 12 : 6">
+          <div class="d-flex flex-wrap align-center" :class="mobile ? 'justify-start' : 'justify-end'">
+            <v-btn
+              v-if="hasActiveFilters && mobile"
+              variant="text"
+              color="primary"
+              size="x-small"
+              @click="clearAllFilters"
+              icon="mdi-filter-off"
+              class="mr-2"
+            />
+            <v-btn
+              v-if="hasActiveFilters && !mobile"
+              variant="text"
+              color="primary"
               size="small"
-              value="all"
+              @click="clearAllFilters"
+              prepend-icon="mdi-filter-off"
+              class="mr-2"
             >
-              All Levels
-            </v-chip>
-            <v-chip
-              filter
-              variant="outlined"
-              size="small"
-              value="qualified"
+              Clear Filters
+            </v-btn>
+            <v-chip-group
+              v-model="selectedSalesLevel"
+              selected-class="text-primary"
+              :column="false"
+              mandatory
             >
-              Qualified
-            </v-chip>
-            <v-chip
-              filter
-              variant="outlined"
-              size="small"
-              value="loi"
-            >
-              LOI Sent
-            </v-chip>
-            <v-chip
-              filter
-              variant="outlined"
-              size="small"
-              value="reserved"
-            >
-              Reserved
-            </v-chip>
-          </v-chip-group>
+              <v-chip
+                filter
+                variant="outlined"
+                :size="mobile ? 'x-small' : 'small'"
+                value="all"
+              >
+                All
+              </v-chip>
+              <v-chip
+                filter
+                variant="outlined"
+                :size="mobile ? 'x-small' : 'small'"
+                value="qualified"
+              >
+                Qualified
+              </v-chip>
+              <v-chip
+                filter
+                variant="outlined"
+                :size="mobile ? 'x-small' : 'small'"
+                value="loi"
+              >
+                LOI
+              </v-chip>
+              <v-chip
+                filter
+                variant="outlined"
+                :size="mobile ? 'x-small' : 'small'"
+                value="reserved"
+              >
+                Reserved
+              </v-chip>
+            </v-chip-group>
+          </div>
         </v-col>
       </v-row>
 
@@ -122,21 +136,21 @@
           >
           <template #item="{ item }">
             <tr @click="handleRowClick(item)" class="table-row">
-              <td>
+              <td class="contact-cell">
                 <div class="d-flex align-center">
-                  <v-avatar size="32" color="primary" class="mr-3">
+                  <v-avatar :size="mobile ? 28 : 32" color="primary" :class="mobile ? 'mr-2' : 'mr-3'">
                     <span class="text-white text-caption font-weight-bold">
                       {{ getInitials(item["Full Name"]) }}
                     </span>
                   </v-avatar>
-                  <div class="flex-grow-1">
-                    <div class="d-flex align-center gap-2">
-                      <span class="font-weight-medium">{{ item["Full Name"] }}</span>
+                  <div class="flex-grow-1 min-width-0">
+                    <div class="d-flex align-center gap-1">
+                      <span class="font-weight-medium text-truncate">{{ item["Full Name"] }}</span>
                       <v-tooltip v-if="item['Extra Comments']" location="bottom">
                         <template #activator="{ props }">
                           <v-icon
                             v-bind="props"
-                            size="small"
+                            :size="mobile ? 'x-small' : 'small'"
                             color="orange"
                           >
                             mdi-comment-text
@@ -145,7 +159,7 @@
                         <span>{{ item["Extra Comments"] }}</span>
                       </v-tooltip>
                     </div>
-                    <div class="text-caption text-grey-darken-1">{{ item["Email Address"] }}</div>
+                    <div class="text-caption text-grey-darken-1 text-truncate">{{ item["Email Address"] }}</div>
                   </div>
                 </div>
               </td>
@@ -214,6 +228,7 @@ useHead({
   title: "Interest List",
 });
 
+const { mobile } = useDisplay();
 const user = useDirectusUser();
 const router = useRouter();
 const loading = ref(true);
@@ -256,14 +271,23 @@ const handleInterestCreated = async (interest: Interest) => {
   loading.value = false;
 };
 
-const headers = [
-  { title: "Contact", key: "Full Name", sortable: true, width: "25%" },
-  { title: "Sales Status", key: "Sales Process Level", sortable: true },
-  { title: "EOI Status", key: "EOI Status", sortable: true },
-  { title: "Contract", key: "Contract Status", sortable: true },
-  { title: "Category", key: "Lead Category", sortable: true },
-  { title: "Created", key: "Created At", sortable: true },
-];
+const headers = computed(() => {
+  if (mobile) {
+    return [
+      { title: "Contact", key: "Full Name", sortable: true },
+      { title: "Status", key: "Sales Process Level", sortable: true },
+      { title: "Created", key: "Created At", sortable: true },
+    ];
+  }
+  return [
+    { title: "Contact", key: "Full Name", sortable: true, width: "25%" },
+    { title: "Sales Status", key: "Sales Process Level", sortable: true },
+    { title: "EOI Status", key: "EOI Status", sortable: true },
+    { title: "Contract", key: "Contract Status", sortable: true },
+    { title: "Category", key: "Lead Category", sortable: true },
+    { title: "Created", key: "Created At", sortable: true },
+  ];
+});
 
 // Check if any filters are active
 const hasActiveFilters = computed(() => {
@@ -525,53 +549,95 @@ const getRelativeTime = (dateString: string) => {
   transform: translateZ(0);
 }
 
-/* Column width constraints */
-.modern-table :deep(th:nth-child(1)),
-.modern-table :deep(td:nth-child(1)) {
-  min-width: 250px;
-}
-
-.modern-table :deep(th:nth-child(2)),
-.modern-table :deep(td:nth-child(2)) {
-  min-width: 150px;
-}
-
-.modern-table :deep(th:nth-child(3)),
-.modern-table :deep(td:nth-child(3)) {
-  min-width: 120px;
-}
-
-.modern-table :deep(th:nth-child(4)),
-.modern-table :deep(td:nth-child(4)) {
-  min-width: 120px;
-}
-
-.modern-table :deep(th:nth-child(5)),
-.modern-table :deep(td:nth-child(5)) {
-  min-width: 120px;
-}
-
-.modern-table :deep(th:nth-child(6)),
-.modern-table :deep(td:nth-child(6)) {
-  min-width: 140px;
+/* Responsive column widths */
+@media (min-width: 769px) {
+  .modern-table :deep(th:nth-child(1)),
+  .modern-table :deep(td:nth-child(1)) {
+    min-width: 250px;
+  }
+
+  .modern-table :deep(th:nth-child(2)),
+  .modern-table :deep(td:nth-child(2)) {
+    min-width: 150px;
+  }
+
+  .modern-table :deep(th:nth-child(3)),
+  .modern-table :deep(td:nth-child(3)) {
+    min-width: 120px;
+  }
+
+  .modern-table :deep(th:nth-child(4)),
+  .modern-table :deep(td:nth-child(4)) {
+    min-width: 120px;
+  }
+
+  .modern-table :deep(th:nth-child(5)),
+  .modern-table :deep(td:nth-child(5)) {
+    min-width: 120px;
+  }
+
+  .modern-table :deep(th:nth-child(6)),
+  .modern-table :deep(td:nth-child(6)) {
+    min-width: 140px;
+  }
 }
 
+/* Mobile-specific styles */
 @media (max-width: 768px) {
   .table-container {
     margin: 0 -12px;
     padding: 0 12px;
   }
   
+  /* For mobile, only show essential columns */
   .modern-table :deep(.v-table__wrapper) {
-    min-width: 900px;
+    min-width: auto;
   }
   
   .modern-table :deep(th) {
-    white-space: nowrap;
+    padding: 8px !important;
+    font-size: 0.75rem;
   }
   
   .modern-table :deep(td) {
-    white-space: nowrap;
+    padding: 12px 8px !important;
+  }
+  
+  /* Hide columns on mobile that aren't in mobile headers */
+  .modern-table :deep(th:nth-child(n+4)),
+  .modern-table :deep(td:nth-child(n+4)) {
+    display: none;
+  }
+  
+  /* Contact cell optimization */
+  .contact-cell {
+    max-width: 200px;
+  }
+  
+  .contact-cell .text-truncate {
+    max-width: 150px;
+  }
+  
+  /* Adjust table row height on mobile */
+  .table-row td {
+    padding: 12px 8px !important;
+  }
+  
+  /* Ensure badges are sized appropriately */
+  .modern-table :deep(.v-chip) {
+    height: 20px !important;
+    font-size: 0.625rem !important;
   }
 }
+
+/* Ensure proper text truncation */
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.min-width-0 {
+  min-width: 0;
+}
 </style>