TSA/chapter-organizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance Calendar component with improved event tooltip functionality and styling

Browse Source 
This commit updates the Calendar component to include a new method for generating tooltips for both events and meetings, enhancing user interaction by providing contextual information. Additionally, CSS styles are introduced for calendar event items, improving their appearance and hover effects. These changes contribute to a more informative and visually appealing calendar experience, aligning with the ongoing efforts to refine the user interface.
This commit is contained in:
James Kolpack
2026-01-26 21:31:18 -05:00
parent 680f61241a
commit 840a8edbf1
3 changed files with 65 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebApp/wwwroot/app.css
+29
View File
@@ -265,4 +265,33 @@
.note-color-2 {
background-color: #f3e5f5;
}
/* Calendar event item styling */
.calendar-event-item {
background-color: var(--mud-palette-primary);
color: var(--mud-palette-primary-text);
padding: 4px 8px;
border-radius: 4px;
font-size: 0.875rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
margin: 2px 0;
min-height: 24px;
display: flex;
align-items: center;
}
.calendar-event-item:hover {
background-color: var(--mud-palette-primary-darken);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}
.calendar-event-item:active {
background-color: var(--mud-palette-primary-darken);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}