FEAT: Enhance layout and styling in BerthDetailsModal and interest-berth-status for improved readability and visual appeal
This commit is contained in:
parent
5d614b3dc0
commit
b6e5c21d8a
|
|
@ -58,11 +58,14 @@
|
||||||
|
|
||||||
<v-divider />
|
<v-divider />
|
||||||
|
|
||||||
<v-card-text class="pa-6">
|
<v-card-text class="pa-8 bg-grey-lighten-5">
|
||||||
<v-container fluid class="pa-0">
|
<v-container fluid class="pa-0">
|
||||||
<!-- Basic Information Section -->
|
<!-- Basic Information Section -->
|
||||||
<div class="section mb-6">
|
<div class="info-section mb-8">
|
||||||
<h4 class="text-h6 mb-3 text-primary">Basic Information</h4>
|
<div class="section-header mb-6">
|
||||||
|
<v-icon color="primary" size="28" class="mr-3">mdi-information-outline</v-icon>
|
||||||
|
<h4 class="text-h5 text-primary font-weight-bold">Basic Information</h4>
|
||||||
|
</div>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="12" md="4">
|
<v-col cols="12" md="4">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
|
|
@ -109,8 +112,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Specifications Section -->
|
<!-- Specifications Section -->
|
||||||
<div class="section mb-6">
|
<div class="info-section mb-8">
|
||||||
<h4 class="text-h6 mb-3 text-primary">Specifications</h4>
|
<div class="section-header mb-6">
|
||||||
|
<v-icon color="primary" size="28" class="mr-3">mdi-ruler-square</v-icon>
|
||||||
|
<h4 class="text-h5 text-primary font-weight-bold">Specifications</h4>
|
||||||
|
</div>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
|
|
@ -193,8 +199,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Infrastructure Section -->
|
<!-- Infrastructure Section -->
|
||||||
<div class="section mb-6">
|
<div class="info-section mb-8">
|
||||||
<h4 class="text-h6 mb-3 text-primary">Infrastructure</h4>
|
<div class="section-header mb-6">
|
||||||
|
<v-icon color="primary" size="28" class="mr-3">mdi-office-building-outline</v-icon>
|
||||||
|
<h4 class="text-h5 text-primary font-weight-bold">Infrastructure</h4>
|
||||||
|
</div>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-select
|
<v-select
|
||||||
|
|
@ -270,8 +279,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Hardware Section -->
|
<!-- Hardware Section -->
|
||||||
<div class="section mb-6">
|
<div class="info-section mb-8">
|
||||||
<h4 class="text-h6 mb-3 text-primary">Hardware</h4>
|
<div class="section-header mb-6">
|
||||||
|
<v-icon color="primary" size="28" class="mr-3">mdi-wrench-outline</v-icon>
|
||||||
|
<h4 class="text-h5 text-primary font-weight-bold">Hardware</h4>
|
||||||
|
</div>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-select
|
<v-select
|
||||||
|
|
@ -333,8 +345,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Pricing & Orientation -->
|
<!-- Pricing & Orientation -->
|
||||||
<div class="section mb-6">
|
<div class="info-section mb-8">
|
||||||
<h4 class="text-h6 mb-3 text-primary">Details</h4>
|
<div class="section-header mb-6">
|
||||||
|
<v-icon color="primary" size="28" class="mr-3">mdi-currency-usd</v-icon>
|
||||||
|
<h4 class="text-h5 text-primary font-weight-bold">Pricing & Details</h4>
|
||||||
|
</div>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
|
|
@ -368,19 +383,22 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Interested Parties Section -->
|
<!-- Interested Parties Section -->
|
||||||
<div class="section">
|
<div class="info-section">
|
||||||
<h4 class="text-h6 mb-3 text-primary">
|
<div class="section-header mb-6">
|
||||||
Interested Parties
|
<v-icon color="primary" size="28" class="mr-3">mdi-account-group-outline</v-icon>
|
||||||
<v-chip
|
<h4 class="text-h5 text-primary font-weight-bold">
|
||||||
v-if="interestedParties.length > 0"
|
Interested Parties
|
||||||
size="small"
|
<v-chip
|
||||||
color="primary"
|
v-if="interestedParties.length > 0"
|
||||||
variant="tonal"
|
size="small"
|
||||||
class="ml-2"
|
color="primary"
|
||||||
>
|
variant="tonal"
|
||||||
{{ interestedParties.length }}
|
class="ml-3"
|
||||||
</v-chip>
|
>
|
||||||
</h4>
|
{{ interestedParties.length }}
|
||||||
|
</v-chip>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-if="interestedParties.length === 0" class="text-center py-4 text-grey-darken-1">
|
<div v-if="interestedParties.length === 0" class="text-center py-4 text-grey-darken-1">
|
||||||
<v-icon size="48" class="mb-2">mdi-account-search-outline</v-icon>
|
<v-icon size="48" class="mb-2">mdi-account-search-outline</v-icon>
|
||||||
|
|
@ -701,34 +719,42 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Modern section styling with subtle shadows */
|
/* Modern section styling with subtle shadows */
|
||||||
.section {
|
.info-section {
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 12px;
|
border-radius: 16px;
|
||||||
padding: 24px;
|
padding: 32px;
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.04);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section:hover {
|
.info-section:hover {
|
||||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Section titles with accent underline */
|
/* Section headers with icons */
|
||||||
.section h4 {
|
.section-header {
|
||||||
position: relative;
|
display: flex;
|
||||||
padding-bottom: 12px;
|
align-items: center;
|
||||||
margin-bottom: 24px !important;
|
border-bottom: 2px solid #f1f5f9;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section h4::after {
|
.section-header h4 {
|
||||||
content: '';
|
margin-bottom: 0 !important;
|
||||||
position: absolute;
|
color: #1e293b;
|
||||||
bottom: 0;
|
font-size: 1.375rem;
|
||||||
left: 0;
|
font-weight: 700;
|
||||||
width: 40px;
|
}
|
||||||
height: 3px;
|
|
||||||
background-color: var(--v-primary-base);
|
.section-header .v-icon {
|
||||||
border-radius: 2px;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white !important;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 8px;
|
||||||
|
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Field display improvements */
|
/* Field display improvements */
|
||||||
|
|
|
||||||
|
|
@ -127,12 +127,12 @@
|
||||||
elevation="0"
|
elevation="0"
|
||||||
hover
|
hover
|
||||||
>
|
>
|
||||||
<v-card-text class="pa-3">
|
<v-card-text class="pa-4">
|
||||||
<div class="d-flex align-center justify-space-between mb-2">
|
<div class="d-flex align-center justify-space-between mb-3">
|
||||||
<span class="font-weight-bold text-subtitle-2">{{ berth['Mooring Number'] }}</span>
|
<span class="font-weight-bold text-subtitle-2">{{ berth['Mooring Number'] }}</span>
|
||||||
<span class="text-caption text-grey-darken-1">Area {{ berth.Area }}</span>
|
<span class="text-caption text-grey-darken-1">Area {{ berth.Area }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-caption text-grey-darken-1 mb-2">
|
<div class="text-caption text-grey-darken-1 mb-3">
|
||||||
{{ displayMeasurement(berth['Nominal Boat Size']) }} boat
|
{{ displayMeasurement(berth['Nominal Boat Size']) }} boat
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex justify-space-between align-center">
|
<div class="d-flex justify-space-between align-center">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue