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,20 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<h1 class="text-h4 font-weight-bold mb-2">System Administration</h1>
|
||||
<p class="text-body-1 text-medium-emphasis">Complete platform control and management</p>
|
||||
<div class="admin-dashboard">
|
||||
<!-- Enhanced Header with Glass Effect -->
|
||||
<div class="dashboard-header glass-header mb-6">
|
||||
<h1 class="dashboard-title text-gradient">System Administration</h1>
|
||||
<p class="dashboard-subtitle">Complete platform control and management</p>
|
||||
</div>
|
||||
|
||||
<!-- System Overview Cards -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card elevation="2">
|
||||
<!-- Bento Grid Layout with Glass Cards -->
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--small">
|
||||
<v-card class="glass-card stat-card animated-entrance">
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div>
|
||||
<div class="text-caption text-medium-emphasis">Total Members</div>
|
||||
<div class="text-h5 font-weight-bold">1,247</div>
|
||||
<div class="stat-value">1,247</div>
|
||||
<div class="text-caption">
|
||||
<v-icon size="x-small" color="success">mdi-trending-up</v-icon>
|
||||
<span class="text-success">+12%</span> this month
|
||||
@@ -26,14 +26,14 @@
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card elevation="2">
|
||||
</div>
|
||||
<div class="bento-item bento-item--small">
|
||||
<v-card class="glass-card stat-card animated-entrance" style="animation-delay: 0.1s;">
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div>
|
||||
<div class="text-caption text-medium-emphasis">Active Sessions</div>
|
||||
<div class="text-h5 font-weight-bold">342</div>
|
||||
<div class="stat-value">342</div>
|
||||
<div class="text-caption">
|
||||
<v-icon size="x-small">mdi-circle</v-icon>
|
||||
<span>Live now</span>
|
||||
@@ -45,14 +45,14 @@
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card elevation="2">
|
||||
</div>
|
||||
<div class="bento-item bento-item--small">
|
||||
<v-card class="glass-card stat-card animated-entrance" style="animation-delay: 0.2s;">
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div>
|
||||
<div class="text-caption text-medium-emphasis">Revenue MTD</div>
|
||||
<div class="text-h5 font-weight-bold">$48,392</div>
|
||||
<div class="stat-value">$48,392</div>
|
||||
<div class="text-caption">
|
||||
<v-icon size="x-small" color="success">mdi-trending-up</v-icon>
|
||||
<span class="text-success">+8%</span> vs last month
|
||||
@@ -64,14 +64,14 @@
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card elevation="2">
|
||||
</div>
|
||||
<div class="bento-item bento-item--small">
|
||||
<v-card class="glass-card stat-card animated-entrance" style="animation-delay: 0.3s;">
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div>
|
||||
<div class="text-caption text-medium-emphasis">System Health</div>
|
||||
<div class="text-h5 font-weight-bold">98.5%</div>
|
||||
<div class="stat-value">98.5%</div>
|
||||
<div class="text-caption">
|
||||
<v-icon size="x-small" color="success">mdi-check-circle</v-icon>
|
||||
<span class="text-success">All systems operational</span>
|
||||
@@ -83,13 +83,13 @@
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Management -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2">
|
||||
<!-- User Management Section -->
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--full">
|
||||
<v-card class="glass-card animated-entrance" style="animation-delay: 0.4s;">
|
||||
<v-card-title>
|
||||
<v-icon left>mdi-account-group</v-icon>
|
||||
User Management
|
||||
@@ -151,26 +151,28 @@
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Dues Management -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12">
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--full">
|
||||
<BoardDuesManagement
|
||||
:refresh-trigger="duesRefreshTrigger"
|
||||
@view-member="handleViewMember"
|
||||
@view-all-members="navigateToMembers"
|
||||
@member-updated="handleMemberUpdated"
|
||||
class="animated-entrance"
|
||||
style="animation-delay: 0.5s;"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Portal Configuration -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2">
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--full">
|
||||
<v-card class="glass-card animated-entrance" style="animation-delay: 0.6s;">
|
||||
<v-card-title>
|
||||
<v-icon left>mdi-cog</v-icon>
|
||||
Portal Configuration
|
||||
@@ -222,13 +224,13 @@
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Management -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2">
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--full">
|
||||
<v-card class="glass-card animated-entrance" style="animation-delay: 0.7s;">
|
||||
<v-card-title>
|
||||
<v-icon left>mdi-database-cog</v-icon>
|
||||
Data Management
|
||||
@@ -273,8 +275,8 @@
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NocoDB Settings Dialog -->
|
||||
<NocoDBSettingsDialog
|
||||
@@ -903,27 +905,155 @@ onMounted(async () => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-card {
|
||||
border-radius: 12px !important;
|
||||
<style scoped lang="scss">
|
||||
.admin-dashboard {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
|
||||
transition: all 0.3s ease;
|
||||
/* Enhanced Header */
|
||||
.dashboard-header {
|
||||
margin-bottom: 2rem;
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
@include enhanced-glass(0.95, 30px);
|
||||
animation: slide-up 0.6s ease-out;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #10b981 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1280px) {
|
||||
.bento-grid {
|
||||
.bento-item--small {
|
||||
grid-column: span 6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item:last-child {
|
||||
border-bottom: none;
|
||||
@media (max-width: 960px) {
|
||||
.bento-grid {
|
||||
.bento-item--small {
|
||||
grid-column: span 12;
|
||||
}
|
||||
.bento-item--medium {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user