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:
parent
3e754bb906
commit
185674ecbe
|
|
@ -15,7 +15,7 @@
|
||||||
Interest Details
|
Interest Details
|
||||||
</v-toolbar-title>
|
</v-toolbar-title>
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
<v-toolbar-items>
|
<v-toolbar-items v-if="!mobile">
|
||||||
<v-btn
|
<v-btn
|
||||||
@click="requestMoreInfoToSales"
|
@click="requestMoreInfoToSales"
|
||||||
variant="text"
|
variant="text"
|
||||||
|
|
@ -25,13 +25,9 @@
|
||||||
isRequestingMoreInformation ||
|
isRequestingMoreInformation ||
|
||||||
isSendingEOI
|
isSendingEOI
|
||||||
"
|
"
|
||||||
:icon="mobile"
|
|
||||||
>
|
>
|
||||||
<v-icon v-if="mobile">mdi-information-outline</v-icon>
|
|
||||||
<template v-else>
|
|
||||||
<v-icon start>mdi-information-outline</v-icon>
|
<v-icon start>mdi-information-outline</v-icon>
|
||||||
Info to Sales
|
Info to Sales
|
||||||
</template>
|
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-btn
|
<v-btn
|
||||||
@click="requestMoreInformation"
|
@click="requestMoreInformation"
|
||||||
|
|
@ -42,13 +38,9 @@
|
||||||
isRequestingMoreInformation ||
|
isRequestingMoreInformation ||
|
||||||
isSendingEOI
|
isSendingEOI
|
||||||
"
|
"
|
||||||
:icon="mobile"
|
|
||||||
>
|
>
|
||||||
<v-icon v-if="mobile">mdi-email-outline</v-icon>
|
|
||||||
<template v-else>
|
|
||||||
<v-icon start>mdi-email-outline</v-icon>
|
<v-icon start>mdi-email-outline</v-icon>
|
||||||
Request Info
|
Request Info
|
||||||
</template>
|
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-btn
|
<v-btn
|
||||||
@click="eoiSendToSales"
|
@click="eoiSendToSales"
|
||||||
|
|
@ -59,29 +51,21 @@
|
||||||
isRequestingMoreInformation ||
|
isRequestingMoreInformation ||
|
||||||
isSendingEOI
|
isSendingEOI
|
||||||
"
|
"
|
||||||
:icon="mobile"
|
|
||||||
>
|
>
|
||||||
<v-icon v-if="mobile">mdi-send</v-icon>
|
|
||||||
<template v-else>
|
|
||||||
<v-icon start>mdi-send</v-icon>
|
<v-icon start>mdi-send</v-icon>
|
||||||
EOI to Sales
|
EOI to Sales
|
||||||
</template>
|
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-btn
|
<v-btn
|
||||||
variant="flat"
|
variant="flat"
|
||||||
color="success"
|
color="success"
|
||||||
:size="mobile ? 'default' : 'large'"
|
size="large"
|
||||||
@click="saveInterest"
|
@click="saveInterest"
|
||||||
:loading="isSaving"
|
:loading="isSaving"
|
||||||
:disabled="isSaving"
|
:disabled="isSaving"
|
||||||
class="ml-2"
|
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>
|
<v-icon start>mdi-content-save</v-icon>
|
||||||
Save Changes
|
Save Changes
|
||||||
</template>
|
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-toolbar-items>
|
</v-toolbar-items>
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
|
|
@ -156,6 +140,90 @@
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</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">
|
<v-form @submit.prevent="saveInterest">
|
||||||
<!-- Contact Information Section -->
|
<!-- Contact Information Section -->
|
||||||
<v-card variant="flat" class="mb-6">
|
<v-card variant="flat" class="mb-6">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue