matt
/
monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix glassmorphic styling - add inline styles and fix Tailwind CSS
Build And Push Image / docker (push) Successful in 1m51s Details

This commit is contained in:
Matt 2025-09-06 15:48:12 +02:00
parent 5c72aa727c
commit a8a12ef12a
3 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.playwright-mcp/glass-dashboard-working.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

3
assets/css/tailwind.css
View File

@ -9,8 +9,9 @@
}
body {
@apply bg-gradient-light min-h-screen antialiased;
@apply min-h-screen antialiased;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
}
/* Typography defaults */

17
pages/board/dashboard/glass.vue
View File

@ -1,9 +1,10 @@
<template>
<div class="min-h-screen" style="background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%)">
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-white">
<!-- Dashboard Content -->
<div class="p-6 space-y-6">
<!-- Welcome Section -->
<div class="bg-white/70 backdrop-blur-lg rounded-3xl p-8 text-center shadow-lg border border-white/60">
<div class="relative overflow-hidden rounded-3xl p-8 text-center shadow-lg border border-white/20"
style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
<h2 class="text-3xl font-bold text-gray-800 mb-2">
Welcome back!
</h2>
@ -15,7 +16,8 @@
<!-- Statistics Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div v-for="stat in stats" :key="stat.label"
class="bg-white/70 backdrop-blur-lg rounded-2xl p-6 shadow-lg border border-white/60 hover:shadow-xl transition-all hover:-translate-y-1">
class="relative overflow-hidden rounded-2xl p-6 shadow-lg border border-white/20 transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center">
<span class="text-red-600 text-xl">{{ stat.icon }}</span>
@ -42,7 +44,8 @@
<!-- Dues Cards Grid - MAX 4 VISIBLE -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div v-for="member in visibleDuesMembers" :key="member.id"
class="bg-white/70 backdrop-blur-lg rounded-2xl p-5 shadow-lg border border-white/60 hover:shadow-xl transition-all">
class="relative overflow-hidden rounded-2xl p-5 shadow-lg border border-white/20 transition-all duration-300 hover:shadow-xl"
style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
<!-- Member Info -->
<div class="flex items-center gap-3 mb-4">
<div class="w-12 h-12 rounded-full bg-gray-200"></div>
@ -59,7 +62,8 @@
</div>
<!-- Actions -->
<button class="w-full px-3 py-2 rounded-lg bg-white/50 border border-red-200 text-red-600 text-sm font-medium hover:bg-red-50 transition-all">
<button class="w-full px-3 py-2 rounded-lg border border-red-200 text-red-600 text-sm font-medium transition-all duration-200 hover:bg-red-50"
style="background: rgba(255, 255, 255, 0.5);">
Mark Paid
</button>
</div>
@ -67,7 +71,8 @@
<!-- View All Button -->
<div class="text-center">
<button class="px-6 py-2.5 rounded-xl bg-white/70 backdrop-blur-lg border border-red-200 text-red-600 font-medium hover:bg-red-50 transition-all">
<button class="px-6 py-2.5 rounded-xl border border-red-200 text-red-600 font-medium transition-all duration-200 hover:bg-red-50"
style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
View All Members →
</button>
</div>