Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adds dashboard stat cards and demo banner

Browse source 
Introduces StatCard ViewComponent with configurable stat display
Adds demo mode banner to application layout
Refactors dashboard stats to use dynamic component rendering

Improves dashboard presentation and user experience
This commit is contained in:
Janus C. H. Knudsen 2026-01-11 11:17:51 +01:00
parent 217a9cd95c
commit 9b2ace7bc0
5 changed files with 272 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

145
PlanTempus.Application/wwwroot/css/demo-banner.css Normal file
View file

@ -0,0 +1,145 @@
/**
* Demo Banner
*
* Persistent banner shown at the top of pages when in demo mode.
* Provides CTA to subscription selection.
*/
/* ===========================================
DEMO BANNER
=========================================== */
swp-demo-banner {
/* TODO: Remove display:none when demo mode is ready */
display: none;
align-items: center;
justify-content: center;
gap: var(--spacing-4);
padding: var(--spacing-3) var(--spacing-6);
background: linear-gradient(135deg, var(--color-teal) 0%, #00796b 100%);
color: white;
font-size: var(--font-size-sm);
position: relative;
z-index: 1000;
}
swp-demo-banner-text {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
swp-demo-banner-text i {
font-size: 18px;
opacity: 0.9;
}
swp-demo-banner-text span {
opacity: 0.95;
}
swp-demo-banner-text strong {
font-weight: var(--font-weight-semibold);
opacity: 1;
}
swp-demo-banner-cta {
display: inline-flex;
}
swp-demo-banner-cta a {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
background: white;
color: var(--color-teal);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-pill);
text-decoration: none;
transition: all var(--transition-fast);
white-space: nowrap;
}
swp-demo-banner-cta a:hover {
background: rgba(255, 255, 255, 0.95);
color: #00695c;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
swp-demo-banner-cta i {
font-size: 16px;
}
/* Close button (optional) */
swp-demo-banner-close {
position: absolute;
right: var(--spacing-4);
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
color: white;
cursor: pointer;
opacity: 0.7;
transition: all var(--transition-fast);
}
swp-demo-banner-close:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.25);
}
swp-demo-banner-close i {
font-size: 16px;
}
/* ===========================================
BODY OFFSET (when banner is visible)
=========================================== */
body.has-demo-banner swp-app-layout {
/* Adjust if banner needs to push content down */
}
/* ===========================================
RESPONSIVE
=========================================== */
@media (max-width: 768px) {
swp-demo-banner {
flex-wrap: wrap;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-4);
}
swp-demo-banner-text {
flex: 1 1 100%;
justify-content: center;
text-align: center;
}
swp-demo-banner-cta {
flex: 1 1 100%;
justify-content: center;
}
swp-demo-banner-cta a {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
swp-demo-banner-text span {
display: none;
}
swp-demo-banner-text strong {
display: inline;
}
}