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

Adds dashboard booking and notification components

Browse source 
Introduces reusable view components for bookings and notifications
Implements dynamic rendering of booking items and lists
Adds corresponding CSS styles for new dashboard components

Enhances dashboard user interface with interactive elements
This commit is contained in:
Janus C. H. Knudsen 2026-01-11 13:11:55 +01:00
parent 9b2ace7bc0
commit abcf8ee75e
15 changed files with 648 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

92
PlanTempus.Application/wwwroot/css/notifications.css Normal file
View file

@ -0,0 +1,92 @@
/**
* Notifications CSS
*
* Styling for notification components on dashboard
*/
/* ===========================================
NOTIFICATION LIST
=========================================== */
swp-notification-list {
display: grid;
grid-template-columns: 50px 1fr;
gap: var(--spacing-4) var(--spacing-6);
padding: 0 var(--card-body-padding);
}
/* ===========================================
NOTIFICATION ITEM
=========================================== */
swp-notification-item {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
padding: var(--spacing-5) var(--spacing-6);
background: var(--color-background-alt);
border-radius: var(--radius-xl);
cursor: pointer;
transition: background var(--transition-fast);
}
swp-notification-item:hover {
background: var(--color-background-hover);
}
swp-notification-item.unread {
background: color-mix(in srgb, var(--color-teal) 5%, var(--color-background-alt));
}
swp-notification-item.unread:hover {
background: var(--color-background-hover);
}
/* ===========================================
NOTIFICATION ICON
=========================================== */
swp-notification-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--color-background-hover);
border-radius: var(--radius-xl);
color: var(--color-text-secondary);
font-size: var(--font-size-xl);
}
swp-notification-item.unread swp-notification-icon {
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
color: var(--color-teal);
}
/* ===========================================
NOTIFICATION CONTENT
=========================================== */
swp-notification-content {
display: flex;
flex-direction: column;
min-width: 0;
}
swp-notification-text {
display: block;
font-size: var(--font-size-md);
color: var(--color-text);
line-height: var(--line-height-snug);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
swp-notification-text strong {
font-weight: var(--font-weight-semibold);
}
swp-notification-time {
display: block;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
margin-top: var(--spacing-1);
}