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

Refactors calendar layout grid styles

Browse source 
Adjusts grid layout for time axis and calendar container
Simplifies CSS grid positioning and template rows
Removes redundant border styling
This commit is contained in:
Janus C. H. Knudsen 2025-12-06 10:52:20 +01:00
parent cce4b77c96
commit 1ad7d10266
2 changed files with 11 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

19
wwwroot/css/calendar-v2.css
View file

@ -70,22 +70,24 @@ swp-calendar-container {
overflow: hidden; overflow: hidden;
} }
swp-header-spacer {
background: var(--color-surface);
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
/* Time axis */ /* Time axis */
swp-time-axis { swp-time-axis {
grid-column: 1;
grid-row: 1 / 3;
display: grid;
grid-template-rows: subgrid;
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
background: var(--color-surface); background: var(--color-surface);
overflow: hidden; }
swp-header-spacer {
border-bottom: 1px solid var(--color-border);
} }
swp-time-axis-content { swp-time-axis-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
} }
swp-hour-marker { swp-hour-marker {
@ -101,7 +103,7 @@ swp-grid-container {
grid-column: 2; grid-column: 2;
grid-row: 1 / 3; grid-row: 1 / 3;
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: subgrid;
overflow: hidden; overflow: hidden;
} }
@ -110,7 +112,6 @@ swp-calendar-header {
display: grid; display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr); grid-template-columns: repeat(var(--grid-columns), 1fr);
grid-auto-rows: auto; grid-auto-rows: auto;
border-bottom: 1px solid var(--color-border);
background: var(--color-surface); background: var(--color-surface);
} }

2
wwwroot/v2.html
View file

@ -20,8 +20,8 @@
</swp-calendar-nav> </swp-calendar-nav>
<swp-calendar-container> <swp-calendar-container>
<swp-header-spacer></swp-header-spacer>
<swp-time-axis> <swp-time-axis>
<swp-header-spacer></swp-header-spacer>
<swp-time-axis-content id="time-axis"></swp-time-axis-content> <swp-time-axis-content id="time-axis"></swp-time-axis-content>
</swp-time-axis> </swp-time-axis>
<swp-grid-container> <swp-grid-container>