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

A step in the right direction for this time axis

Browse source
This commit is contained in:
Janus Knudsen 2025-08-01 23:45:13 +02:00
parent b6d3d22ce9
commit 209ae0830d
4 changed files with 33 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

9
.claude/settings.local.json Normal file
View file

@ -0,0 +1,9 @@
{
"permissions": {
"allow": [
"Bash(npm run build:*)"
],
"deny": []
},
"$schema": "https://json.schemastore.org/claude-code-settings.json"
}

4
src/managers/GridManager.ts
View file

@ -166,6 +166,7 @@ export class GridManager {
if (!this.grid) return; if (!this.grid) return;
const timeAxis = document.createElement('swp-time-axis'); const timeAxis = document.createElement('swp-time-axis');
const timeAxisContent = document.createElement('swp-time-axis-content');
const startHour = calendarConfig.get('dayStartHour'); const startHour = calendarConfig.get('dayStartHour');
const endHour = calendarConfig.get('dayEndHour'); const endHour = calendarConfig.get('dayEndHour');
@ -174,9 +175,10 @@ export class GridManager {
const period = hour >= 12 ? 'PM' : 'AM'; const period = hour >= 12 ? 'PM' : 'AM';
const displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour); const displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour);
marker.textContent = `${displayHour} ${period}`; marker.textContent = `${displayHour} ${period}`;
timeAxis.appendChild(marker); timeAxisContent.appendChild(marker);
} }
timeAxis.appendChild(timeAxisContent);
this.grid.appendChild(timeAxis); this.grid.appendChild(timeAxis);
} }

13
src/managers/ScrollManager.ts
View file

@ -397,13 +397,16 @@ export class ScrollManager {
if (!this.scrollableContent || !this.timeAxis) return; if (!this.scrollableContent || !this.timeAxis) return;
const scrollTop = this.scrollableContent.scrollTop; const scrollTop = this.scrollableContent.scrollTop;
const timeAxisContent = this.timeAxis.querySelector('swp-time-axis-content');
// Use transform for smooth performance if (timeAxisContent) {
this.timeAxis.style.transform = `translateY(-${scrollTop}px)`; // Use transform for smooth performance
timeAxisContent.style.transform = `translateY(-${scrollTop}px)`;
// Debug logging (can be removed later) // Debug logging (can be removed later)
if (scrollTop % 100 === 0) { // Only log every 100px to avoid spam if (scrollTop % 100 === 0) { // Only log every 100px to avoid spam
console.log(`ScrollManager: Synced time-axis to scrollTop: ${scrollTop}px`); console.log(`ScrollManager: Synced time-axis to scrollTop: ${scrollTop}px`);
}
} }
} }

16
wwwroot/css/calendar-layout-css.css
View file

@ -39,7 +39,8 @@ swp-calendar-nav {
swp-calendar-container { swp-calendar-container {
display: grid; display: grid;
grid-template-columns: 60px 1fr 20px; grid-template-columns: 60px 1fr 20px;
grid-template-rows: auto calc(1fr - 20px) 20px; grid-template-rows: 80px 1fr 20px;
height: 100%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
@ -72,10 +73,10 @@ swp-right-header-spacer {
/* Week container for sliding */ /* Week container for sliding */
swp-week-container { swp-week-container {
grid-column: 2 / 4; /* Span across columns 2-3 to include right spacer area */ grid-column: 2 / 3;
grid-row: 1 / 3; grid-row: 1 / 3;
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: 80px 1fr;
position: relative; position: relative;
width: 100%; width: 100%;
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
@ -98,12 +99,19 @@ swp-time-axis {
grid-row: 2; grid-row: 2;
background: var(--color-surface); background: var(--color-surface);
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
position: sticky; position: relative;
left: 0; left: 0;
z-index: 3; /* Lower than header elements so it scrolls behind them */ z-index: 3; /* Lower than header elements so it scrolls behind them */
width: 60px; width: 60px;
overflow: hidden;
height: 100%;
}
/* Time axis content that scrolls */
swp-time-axis-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
} }
/* Right bottom spacer */ /* Right bottom spacer */