Apply glass morphism and Bento grid to admin and board dashboards
Some checks failed
Build And Push Image / docker (push) Failing after 1m1s
Some checks failed
Build And Push Image / docker (push) Failing after 1m1s
- Implemented enhanced glass morphism effects with 30px blur - Added Bento grid layout system (12-column grid) - Created gradient text effects for dashboard titles - Added animated entrance effects for all cards - Implemented stat cards with gradient values - Added responsive breakpoints for mobile/tablet - Unified button styles with hover animations - Removed basic elevation cards in favor of glass cards
This commit is contained in:
@@ -1,30 +1,28 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<div class="board-dashboard">
|
||||
<!-- Dues Payment Banner -->
|
||||
<DuesPaymentBanner />
|
||||
|
||||
<!-- Welcome Header -->
|
||||
<v-row class="mb-6">
|
||||
<v-col>
|
||||
<h1 class="text-h3 font-weight-bold" style="color: #a31515;">
|
||||
Welcome Back, {{ firstName }}!
|
||||
</h1>
|
||||
<p class="text-h6 text-medium-emphasis">
|
||||
MonacoUSA Board Portal
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<v-chip color="primary" variant="elevated" class="mt-2">
|
||||
<v-icon start>mdi-shield-account</v-icon>
|
||||
Board Member
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- Enhanced Welcome Header -->
|
||||
<div class="dashboard-header glass-header mb-6">
|
||||
<h1 class="dashboard-title text-gradient">
|
||||
Welcome Back, {{ firstName }}!
|
||||
</h1>
|
||||
<p class="dashboard-subtitle">
|
||||
MonacoUSA Board Portal
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<v-chip class="glass-badge mt-2">
|
||||
<v-icon start>mdi-shield-account</v-icon>
|
||||
Board Member
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Board Tools -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12" md="6">
|
||||
<v-card class="pa-4 text-center" elevation="2" hover>
|
||||
<!-- Board Tools with Bento Grid -->
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--large">
|
||||
<v-card class="glass-card pa-4 text-center animated-entrance">
|
||||
<v-icon size="48" color="primary" class="mb-2">mdi-calendar</v-icon>
|
||||
<h3 class="mb-2">Events</h3>
|
||||
<p class="text-body-2 mb-4">View and manage association events</p>
|
||||
@@ -37,10 +35,10 @@
|
||||
View Events
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</div>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-card class="pa-4 text-center" elevation="2" hover>
|
||||
<div class="bento-item bento-item--large">
|
||||
<v-card class="glass-card pa-4 text-center animated-entrance">
|
||||
<v-icon size="48" color="primary" class="mb-2">mdi-account-group</v-icon>
|
||||
<h3 class="mb-2">Members</h3>
|
||||
<p class="text-body-2 mb-4">View and manage association members</p>
|
||||
@@ -53,13 +51,13 @@
|
||||
View Members
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Board Statistics -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12" md="8">
|
||||
<v-card elevation="2">
|
||||
<!-- Board Statistics with Bento Grid -->
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--xlarge">
|
||||
<v-card class="glass-card stat-card animated-entrance" style="animation-delay: 0.2s;">
|
||||
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
||||
<v-icon class="mr-2" color="primary">mdi-chart-box-outline</v-icon>
|
||||
Board Overview
|
||||
@@ -67,24 +65,24 @@
|
||||
<v-card-text class="pa-4">
|
||||
<v-row>
|
||||
<v-col cols="6" md="3" class="text-center">
|
||||
<div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.totalMembers }}</div>
|
||||
<div class="stat-value">{{ stats.totalMembers }}</div>
|
||||
<div class="text-body-2">Total Members</div>
|
||||
</v-col>
|
||||
</div>
|
||||
<v-col cols="6" md="3" class="text-center">
|
||||
<div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.activeMembers }}</div>
|
||||
<div class="stat-value">{{ stats.activeMembers }}</div>
|
||||
<div class="text-body-2">Active Members</div>
|
||||
</v-col>
|
||||
</div>
|
||||
<v-col cols="6" md="6" class="text-center">
|
||||
<div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.upcomingEvents }}</div>
|
||||
<div class="stat-value">{{ stats.upcomingEvents }}</div>
|
||||
<div class="text-body-2">Upcoming Events</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</div>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-card elevation="2">
|
||||
<div class="bento-item bento-item--medium">
|
||||
<v-card class="glass-card animated-entrance" style="animation-delay: 0.3s;">
|
||||
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
||||
<v-icon class="mr-2" color="primary">mdi-calendar-today</v-icon>
|
||||
Next Event
|
||||
@@ -110,8 +108,8 @@
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dues Management Section -->
|
||||
<v-row class="mb-6">
|
||||
@@ -122,8 +120,8 @@
|
||||
@view-all-members="navigateToMembers"
|
||||
@member-updated="handleMemberUpdated"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- View Member Dialog -->
|
||||
@@ -139,7 +137,7 @@
|
||||
:member="selectedMember"
|
||||
@member-updated="handleMemberUpdated"
|
||||
/>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -317,22 +315,146 @@ const generateReport = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-card {
|
||||
border-radius: 12px !important;
|
||||
<style scoped lang="scss">
|
||||
.board-dashboard {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.v-card:hover {
|
||||
transform: translateY(-2px);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
/* Enhanced Header */
|
||||
.dashboard-header {
|
||||
margin-bottom: 2rem;
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.95),
|
||||
rgba(255, 255, 255, 0.85)
|
||||
);
|
||||
backdrop-filter: blur(30px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow:
|
||||
0 8px 32px 0 rgba(31, 38, 135, 0.15),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.6);
|
||||
animation: slide-up 0.6s ease-out;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 0.5rem;
|
||||
animation: fade-in 0.8s ease-out;
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
color: #71717a;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.glass-badge {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
|
||||
color: white !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Bento Grid Layout */
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 1.5rem;
|
||||
|
||||
.bento-item {
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&--small { grid-column: span 3; }
|
||||
&--medium { grid-column: span 4; }
|
||||
&--large { grid-column: span 6; }
|
||||
&--xlarge { grid-column: span 8; }
|
||||
&--full { grid-column: span 12; }
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Glass Card Effects */
|
||||
.glass-card {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.95),
|
||||
rgba(255, 255, 255, 0.85),
|
||||
rgba(255, 255, 255, 0.75)
|
||||
) !important;
|
||||
backdrop-filter: blur(30px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow:
|
||||
0 8px 32px 0 rgba(31, 38, 135, 0.15),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.6),
|
||||
inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
border-radius: 20px !important;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow:
|
||||
0 12px 40px 0 rgba(31, 38, 135, 0.25),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.8),
|
||||
inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Statistics Cards */
|
||||
.stat-card {
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animated Entrance */
|
||||
.animated-entrance {
|
||||
animation: slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Enhancements */
|
||||
.v-btn {
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.v-icon {
|
||||
color: #a31515 !important;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@@ -347,4 +469,30 @@ h3 {
|
||||
.v-chip {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1280px) {
|
||||
.bento-grid {
|
||||
.bento-item--xlarge {
|
||||
grid-column: span 12;
|
||||
}
|
||||
.bento-item--large {
|
||||
grid-column: span 6;
|
||||
}
|
||||
.bento-item--medium {
|
||||
grid-column: span 6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.bento-grid {
|
||||
.bento-item--large {
|
||||
grid-column: span 12;
|
||||
}
|
||||
.bento-item--medium {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user