matt
/
port-nimara-client-portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor InterestDetailsModal to separate mobile and desktop layouts 

Remove conditional mobile styling from toolbar buttons and add dedicated
mobile action buttons section with improved card-based layout for better
mobile user experience.
This commit is contained in:
Matt 2025-06-04 03:10:10 +02:00
parent 3e754bb906
commit 185674ecbe
1 changed files with 94 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
components/InterestDetailsModal.vue
View File

@ -15,7 +15,7 @@
Interest Details
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-toolbar-items v-if="!mobile">
<v-btn
@click="requestMoreInfoToSales"
variant="text"
@ -25,13 +25,9 @@
isRequestingMoreInformation ||
isSendingEOI
"
:icon="mobile"
>
<v-icon v-if="mobile">mdi-information-outline</v-icon>
<template v-else>
<v-icon start>mdi-information-outline</v-icon>
Info to Sales
</template>
<v-icon start>mdi-information-outline</v-icon>
Info to Sales
</v-btn>
<v-btn
@click="requestMoreInformation"
@ -42,13 +38,9 @@
isRequestingMoreInformation ||
isSendingEOI
"
:icon="mobile"
>
<v-icon v-if="mobile">mdi-email-outline</v-icon>
<template v-else>
<v-icon start>mdi-email-outline</v-icon>
Request Info
</template>
<v-icon start>mdi-email-outline</v-icon>
Request Info
</v-btn>
<v-btn
@click="eoiSendToSales"
@ -59,29 +51,21 @@
isRequestingMoreInformation ||
isSendingEOI
"
:icon="mobile"
>
<v-icon v-if="mobile">mdi-send</v-icon>
<template v-else>
<v-icon start>mdi-send</v-icon>
EOI to Sales
</template>
<v-icon start>mdi-send</v-icon>
EOI to Sales
</v-btn>
<v-btn
variant="flat"
color="success"
:size="mobile ? 'default' : 'large'"
size="large"
@click="saveInterest"
:loading="isSaving"
:disabled="isSaving"
class="ml-2"
:icon="mobile"
>
<v-icon v-if="mobile">mdi-content-save</v-icon>
<template v-else>
<v-icon start>mdi-content-save</v-icon>
Save Changes
</template>
<v-icon start>mdi-content-save</v-icon>
Save Changes
</v-btn>
</v-toolbar-items>
</v-toolbar>
@ -156,6 +140,90 @@
</v-col>
</v-row>
<!-- Mobile Action Buttons -->
<v-card v-if="mobile" variant="flat" class="mb-6">
<v-card-title class="text-h6 d-flex align-center pb-4">
<v-icon class="mr-2" color="primary">mdi-gesture-tap</v-icon>
Actions
</v-card-title>
<v-card-text class="pt-2">
<v-row dense>
<v-col cols="6">
<v-btn
@click="requestMoreInfoToSales"
variant="outlined"
color="primary"
block
:loading="isRequestingMoreInfo"
:disabled="
isRequestingMoreInfo ||
isRequestingMoreInformation ||
isSendingEOI
"
class="mb-2 d-flex flex-column"
size="large"
>
<v-icon size="large" class="mb-1">mdi-information-outline</v-icon>
<span class="text-caption">Info to Sales</span>
</v-btn>
</v-col>
<v-col cols="6">
<v-btn
@click="requestMoreInformation"
variant="outlined"
color="primary"
block
:loading="isRequestingMoreInformation"
:disabled="
isRequestingMoreInfo ||
isRequestingMoreInformation ||
isSendingEOI
"
class="mb-2 d-flex flex-column"
size="large"
>
<v-icon size="large" class="mb-1">mdi-email-outline</v-icon>
<span class="text-caption">Request Info</span>
</v-btn>
</v-col>
<v-col cols="6">
<v-btn
@click="eoiSendToSales"
variant="outlined"
color="primary"
block
:loading="isSendingEOI"
:disabled="
isRequestingMoreInfo ||
isRequestingMoreInformation ||
isSendingEOI
"
class="mb-2 d-flex flex-column"
size="large"
>
<v-icon size="large" class="mb-1">mdi-send</v-icon>
<span class="text-caption">EOI to Sales</span>
</v-btn>
</v-col>
<v-col cols="6">
<v-btn
@click="saveInterest"
variant="flat"
color="success"
block
:loading="isSaving"
:disabled="isSaving"
class="mb-2 d-flex flex-column"
size="large"
>
<v-icon size="large" class="mb-1">mdi-content-save</v-icon>
<span class="text-caption">Save Changes</span>
</v-btn>
</v-col>
</v-row>
</v-card-text>
</v-card>
<v-form @submit.prevent="saveInterest">
<!-- Contact Information Section -->
<v-card variant="flat" class="mb-6">