fix: scroll to startHour on load and fix time label visibility
- Add timeGridWrapperRef to scroll the correct container (wrapper has overflow-y: scroll, inner elements have overflow: visible) - Scroll wrapper to startHour offset on load and when startHour changes - Time labels use translateY(-0.4em) so first/last hours aren't clipped by the sticky header or container edge - jumpToHour also targets the wrapper ref v1.33.5 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
8b68c50445
commit
0f214040ff
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "my-weekly-todo-list",
|
"name": "my-weekly-todo-list",
|
||||||
"version": "1.33.4",
|
"version": "1.33.5",
|
||||||
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
|
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@ -2417,6 +2417,7 @@ h3 {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
transform: translateY(-0.4em);
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-slot-label.hour-start {
|
.time-slot-label.hour-start {
|
||||||
|
|||||||
@ -2202,6 +2202,7 @@ export default function WeeklyView() {
|
|||||||
intendedScrollTop.current = scrollOffset;
|
intendedScrollTop.current = scrollOffset;
|
||||||
|
|
||||||
const perform = () => {
|
const perform = () => {
|
||||||
|
if (timeGridWrapperRef.current) timeGridWrapperRef.current.scrollTop = scrollOffset;
|
||||||
if (gridRef.current) gridRef.current.scrollTop = scrollOffset;
|
if (gridRef.current) gridRef.current.scrollTop = scrollOffset;
|
||||||
if (timeColumnRef.current) timeColumnRef.current.scrollTop = scrollOffset;
|
if (timeColumnRef.current) timeColumnRef.current.scrollTop = scrollOffset;
|
||||||
};
|
};
|
||||||
@ -2587,7 +2588,9 @@ export default function WeeklyView() {
|
|||||||
const slotHeight = getSlotHeight(cellDuration);
|
const slotHeight = getSlotHeight(cellDuration);
|
||||||
const scrollOffset = workingHoursStart * slotsPerHour * slotHeight;
|
const scrollOffset = workingHoursStart * slotsPerHour * slotHeight;
|
||||||
|
|
||||||
// Force it directly
|
// Scroll the time-grid-wrapper (the scrollable viewport)
|
||||||
|
if (timeGridWrapperRef.current) timeGridWrapperRef.current.scrollTop = scrollOffset;
|
||||||
|
// Also scroll inner refs as fallback
|
||||||
if (gridRef.current) gridRef.current.scrollTop = scrollOffset;
|
if (gridRef.current) gridRef.current.scrollTop = scrollOffset;
|
||||||
if (timeColumnRef.current) timeColumnRef.current.scrollTop = scrollOffset;
|
if (timeColumnRef.current) timeColumnRef.current.scrollTop = scrollOffset;
|
||||||
|
|
||||||
@ -2596,6 +2599,7 @@ export default function WeeklyView() {
|
|||||||
// On initial load, re-enforce for 2s to fight browser auto-scroll restoration
|
// On initial load, re-enforce for 2s to fight browser auto-scroll restoration
|
||||||
if (!isInitialScrollDone.current) {
|
if (!isInitialScrollDone.current) {
|
||||||
const interval = setInterval(() => {
|
const interval = setInterval(() => {
|
||||||
|
if (timeGridWrapperRef.current) timeGridWrapperRef.current.scrollTop = scrollOffset;
|
||||||
if (gridRef.current) gridRef.current.scrollTop = scrollOffset;
|
if (gridRef.current) gridRef.current.scrollTop = scrollOffset;
|
||||||
if (timeColumnRef.current) timeColumnRef.current.scrollTop = scrollOffset;
|
if (timeColumnRef.current) timeColumnRef.current.scrollTop = scrollOffset;
|
||||||
}, 50);
|
}, 50);
|
||||||
@ -3448,6 +3452,7 @@ export default function WeeklyView() {
|
|||||||
|
|
||||||
// Navigation handlers with CSS class-based slide animation (works in all browsers)
|
// Navigation handlers with CSS class-based slide animation (works in all browsers)
|
||||||
const gridRef = useRef<HTMLElement>(null);
|
const gridRef = useRef<HTMLElement>(null);
|
||||||
|
const timeGridWrapperRef = useRef<HTMLDivElement>(null);
|
||||||
const allSlideClasses = ["slide-animate-next", "slide-animate-prev", "slide-animate-week-next", "slide-animate-week-prev"];
|
const allSlideClasses = ["slide-animate-next", "slide-animate-prev", "slide-animate-week-next", "slide-animate-week-prev"];
|
||||||
const navigate = (
|
const navigate = (
|
||||||
newDate: Date,
|
newDate: Date,
|
||||||
@ -6341,7 +6346,7 @@ export default function WeeklyView() {
|
|||||||
})()}
|
})()}
|
||||||
|
|
||||||
{/* Main Grid with Time Column */}
|
{/* Main Grid with Time Column */}
|
||||||
{viewStyle !== "kanban" && <div className="time-grid-wrapper" style={showTimeGrid ? {
|
{viewStyle !== "kanban" && <div className="time-grid-wrapper" ref={timeGridWrapperRef} style={showTimeGrid ? {
|
||||||
maxHeight: `${(endHour - startHour) * (60 / cellDuration) * getSlotHeight(cellDuration) + measuredHeaderHeight}px`,
|
maxHeight: `${(endHour - startHour) * (60 / cellDuration) * getSlotHeight(cellDuration) + measuredHeaderHeight}px`,
|
||||||
} : undefined}>
|
} : undefined}>
|
||||||
{/* Time Column */}
|
{/* Time Column */}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user