Implements all-day event row collapsing
Adds functionality to collapse the all-day event rows when the number of rows exceeds a limit. This improves the layout by preventing the all-day section from taking up too much space. A chevron button is added to allow users to expand/collapse the section.
This commit is contained in:
parent
5417a2b6b1
commit
c705869c9e
2 changed files with 100 additions and 1 deletions
|
|
@ -58,6 +58,42 @@ swp-header-spacer {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
/* All-day chevron button */
|
||||
.allday-chevron {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
color: #666;
|
||||
transition: transform 0.3s ease, color 0.2s ease;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.allday-chevron:hover {
|
||||
color: #000;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Chevron points down when collapsed (can expand) */
|
||||
.allday-chevron.collapsed {
|
||||
transform: translateX(-50%) rotate(0deg);
|
||||
}
|
||||
|
||||
/* Chevron points up when expanded (can collapse) */
|
||||
.allday-chevron.expanded {
|
||||
transform: translateX(-50%) rotate(180deg);
|
||||
}
|
||||
|
||||
.allday-chevron svg {
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Week container for sliding */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue