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

Refactors header grid layout with CSS subgrid

Browse source 
Updates header and viewport components to use CSS subgrid for more flexible layout

Improves grid structure by:
- Replacing fixed grid columns with subgrid
- Adjusting scrollbar and overflow properties
- Simplifying header and track element positioning
This commit is contained in:
Janus C. H. Knudsen 2025-12-10 23:55:46 +01:00
parent 679580702b
commit e145bc7c70
2 changed files with 20 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/v2/core/HeaderDrawerManager.ts
View file

@ -1,7 +1,7 @@
export class HeaderDrawerManager { export class HeaderDrawerManager {
private drawer!: HTMLElement; private drawer!: HTMLElement;
private expanded = false; private expanded = false;
private readonly expandedHeight = 24; private readonly expandedHeight = 25;
private readonly duration = 200; private readonly duration = 200;
init(container: HTMLElement): void { init(container: HTMLElement): void {

33
wwwroot/css/v2/calendar-v2-layout.css
View file

@ -74,11 +74,12 @@ swp-header-spacer {
swp-header-drawer { swp-header-drawer {
display: grid; display: grid;
grid-template-columns: repeat(var(--grid-columns), minmax(var(--day-column-min-width), 1fr)); grid-template-columns: subgrid;
min-width: calc(var(--grid-columns) * var(--day-column-min-width)); grid-column: 1 / -1;
grid-row: 2;
grid-auto-rows: 28px; grid-auto-rows: 28px;
gap: 2px 0; gap: 2px 0;
min-height: 0; height: 0;
overflow: hidden; overflow: hidden;
background: var(--color-background-alt); background: var(--color-background-alt);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
@ -124,7 +125,15 @@ swp-grid-container {
/* Viewport/Track for slide animation */ /* Viewport/Track for slide animation */
swp-header-viewport { swp-header-viewport {
overflow: hidden; display: grid;
grid-template-columns: repeat(var(--grid-columns), minmax(var(--day-column-min-width), 1fr));
grid-template-rows: auto auto;
min-width: calc(var(--grid-columns) * var(--day-column-min-width));
overflow-y: scroll;
overflow-x: hidden;
&::-webkit-scrollbar { background: transparent; }
&::-webkit-scrollbar-thumb { background: transparent; }
} }
swp-content-viewport { swp-content-viewport {
@ -133,9 +142,10 @@ swp-content-viewport {
} }
swp-header-track { swp-header-track {
display: flex; display: grid;
grid-template-columns: subgrid;
> swp-calendar-header { flex: 0 0 100%; } grid-column: 1 / -1;
grid-row: 1;
} }
swp-content-track { swp-content-track {
@ -151,15 +161,10 @@ swp-content-track {
/* Header */ /* Header */
swp-calendar-header { swp-calendar-header {
display: grid; display: grid;
grid-template-columns: repeat(var(--grid-columns), minmax(var(--day-column-min-width), 1fr)); grid-template-columns: subgrid;
min-width: calc(var(--grid-columns) * var(--day-column-min-width)); grid-column: 1 / -1;
grid-auto-rows: auto; grid-auto-rows: auto;
background: var(--color-surface); background: var(--color-surface);
overflow-y: scroll;
overflow-x: hidden;
&::-webkit-scrollbar { background: transparent; }
&::-webkit-scrollbar-thumb { background: transparent; }
&[data-levels="date"] > swp-day-header { grid-row: 1; } &[data-levels="date"] > swp-day-header { grid-row: 1; }