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

FEAT: Enhance layout and styling in BerthDetailsModal and interest-berth-status for improved readability and visual appeal

This commit is contained in:
Matt 2025-06-17 18:14:21 +02:00
parent 5d614b3dc0
commit b6e5c21d8a
2 changed files with 73 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
components/BerthDetailsModal.vue
View File

@ -58,11 +58,14 @@
<v-divider />
<v-card-text class="pa-6">
<v-card-text class="pa-8 bg-grey-lighten-5">
<v-container fluid class="pa-0">
<!-- Basic Information Section -->
<div class="section mb-6">
<h4 class="text-h6 mb-3 text-primary">Basic Information</h4>
<div class="info-section mb-8">
<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-col cols="12" md="4">
<v-text-field
@ -109,8 +112,11 @@
</div>
<!-- Specifications Section -->
<div class="section mb-6">
<h4 class="text-h6 mb-3 text-primary">Specifications</h4>
<div class="info-section mb-8">
<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-col cols="12" md="6">
<v-text-field
@ -193,8 +199,11 @@
</div>
<!-- Infrastructure Section -->
<div class="section mb-6">
<h4 class="text-h6 mb-3 text-primary">Infrastructure</h4>
<div class="info-section mb-8">
<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-col cols="12" md="6">
<v-select
@ -270,8 +279,11 @@
</div>
<!-- Hardware Section -->
<div class="section mb-6">
<h4 class="text-h6 mb-3 text-primary">Hardware</h4>
<div class="info-section mb-8">
<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-col cols="12" md="6">
<v-select
@ -333,8 +345,11 @@
</div>
<!-- Pricing & Orientation -->
<div class="section mb-6">
<h4 class="text-h6 mb-3 text-primary">Details</h4>
<div class="info-section mb-8">
<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-col cols="12" md="6">
<v-text-field
@ -368,19 +383,22 @@
</div>
<!-- Interested Parties Section -->
<div class="section">
<h4 class="text-h6 mb-3 text-primary">
Interested Parties
<v-chip
v-if="interestedParties.length > 0"
size="small"
color="primary"
variant="tonal"
class="ml-2"
>
{{ interestedParties.length }}
</v-chip>
</h4>
<div class="info-section">
<div class="section-header mb-6">
<v-icon color="primary" size="28" class="mr-3">mdi-account-group-outline</v-icon>
<h4 class="text-h5 text-primary font-weight-bold">
Interested Parties
<v-chip
v-if="interestedParties.length > 0"
size="small"
color="primary"
variant="tonal"
class="ml-3"
>
{{ interestedParties.length }}
</v-chip>
</h4>
</div>
<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>
@ -701,34 +719,42 @@ onUnmounted(() => {
}
/* Modern section styling with subtle shadows */
.section {
.info-section {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
border-radius: 16px;
padding: 32px;
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;
border: 1px solid rgba(0, 0, 0, 0.04);
}
.section:hover {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
.info-section:hover {
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 h4 {
position: relative;
padding-bottom: 12px;
margin-bottom: 24px !important;
/* Section headers with icons */
.section-header {
display: flex;
align-items: center;
border-bottom: 2px solid #f1f5f9;
padding-bottom: 16px;
margin-bottom: 24px;
}
.section h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background-color: var(--v-primary-base);
border-radius: 2px;
.section-header h4 {
margin-bottom: 0 !important;
color: #1e293b;
font-size: 1.375rem;
font-weight: 700;
}
.section-header .v-icon {
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 */

6
pages/dashboard/interest-berth-status.vue
View File

@ -127,12 +127,12 @@
elevation="0"
hover
>
<v-card-text class="pa-3">
<div class="d-flex align-center justify-space-between mb-2">
<v-card-text class="pa-4">
<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="text-caption text-grey-darken-1">Area {{ berth.Area }}</span>
</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
</div>
<div class="d-flex justify-space-between align-center">