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

wip

Browse source
This commit is contained in:
Janus C. H. Knudsen 2025-12-07 17:44:52 +01:00
parent 70e505526f
commit 9d011ff305
5 changed files with 121 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
:root {
--hour-height: 60px;
--hour-height: 64px;
--time-axis-width: 60px;
--grid-columns: 5;
--day-start-hour: 0;
@ -8,6 +8,8 @@
--color-surface: #fff;
--color-text-secondary: #666;
--color-primary: #1976d2;
--color-hour-line: rgba(0, 0, 0, 0.2);
--color-grid-line-light: rgba(0, 0, 0, 0.05);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
@ -85,6 +87,16 @@ swp-time-axis {
}
swp-header-spacer {
height: 0;
overflow: hidden;
border-bottom: 1px solid var(--color-border);
}
swp-header-drawer {
display: block;
height: 0;
overflow: hidden;
background: #fafafa;
border-bottom: 1px solid var(--color-border);
}
@ -100,6 +112,17 @@ swp-hour-marker {
font-size: 11px;
color: var(--color-text-secondary);
text-align: right;
position: relative;
}
swp-hour-marker::after {
content: '';
position: absolute;
top: -1px;
right: 0;
width: 5px;
height: 1px;
background: var(--color-hour-line);
}
/* Grid container */
@ -211,15 +234,44 @@ swp-time-grid {
min-height: calc((var(--day-end-hour) - var(--day-start-hour)) * var(--hour-height));
}
swp-grid-lines {
/* Timelinjer via ::after */
swp-time-grid::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
z-index: 2;
background-image: repeating-linear-gradient(
to bottom,
transparent,
transparent calc(var(--hour-height) - 1px),
var(--color-border) calc(var(--hour-height) - 1px),
var(--color-border) var(--hour-height)
var(--color-hour-line) calc(var(--hour-height) - 1px),
var(--color-hour-line) var(--hour-height)
);
pointer-events: none;
}
/* Kvarterlinjer - 3 linjer per time (15, 30, 45 min), ikke ved timegrænsen */
swp-grid-lines {
display: block;
position: absolute;
inset: 0;
z-index: 1;
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent calc(var(--hour-height) / 4 - 1px),
var(--color-grid-line-light) calc(var(--hour-height) / 4 - 1px),
var(--color-grid-line-light) calc(var(--hour-height) / 4),
transparent calc(var(--hour-height) / 4),
transparent calc(var(--hour-height) / 2 - 1px),
var(--color-grid-line-light) calc(var(--hour-height) / 2 - 1px),
var(--color-grid-line-light) calc(var(--hour-height) / 2),
transparent calc(var(--hour-height) / 2),
transparent calc(var(--hour-height) * 3 / 4 - 1px),
var(--color-grid-line-light) calc(var(--hour-height) * 3 / 4 - 1px),
var(--color-grid-line-light) calc(var(--hour-height) * 3 / 4),
transparent calc(var(--hour-height) * 3 / 4),
transparent var(--hour-height)
);
}

2
wwwroot/v2.html
View file

@ -19,6 +19,7 @@
</swp-week-info>
<swp-nav-button id="btn-prev">←</swp-nav-button>
<swp-nav-button id="btn-next">→</swp-nav-button>
<swp-nav-button id="btn-drawer">Toggle</swp-nav-button>
</swp-calendar-nav>
<swp-calendar-container>
@ -31,6 +32,7 @@
<swp-header-track>
<swp-calendar-header></swp-calendar-header>
</swp-header-track>
<swp-header-drawer></swp-header-drawer>
</swp-header-viewport>
<swp-content-viewport>
<swp-content-track>