mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: move someday resize handle to top border and improve visibility

Browse Source 
Handle now appears above the someday section as a visible bar with
background color. Dragging up increases height (inverted for top handle).
Handle styling improved with hover/active states for better discoverability.

v1.39.3

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
mARTin 2026-03-17 02:49:27 +01:00
parent 87c7211655
commit 806061bf47
3 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "name": "my-weekly-todo-list",
"version": "1.39.2", "version": "1.39.3",
"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": {

19
src/app/globals.css
View File

@ -2657,7 +2657,7 @@ h3 {
/* Resize handle for draggable section borders */ /* Resize handle for draggable section borders */
.resize-handle { .resize-handle {
height: 8px; height: 12px;
cursor: ns-resize; cursor: ns-resize;
display: flex; display: flex;
align-items: center; align-items: center;
@ -2666,18 +2666,27 @@ h3 {
touch-action: none; touch-action: none;
position: relative; position: relative;
z-index: 10; z-index: 10;
background: var(--weekly-border, #e5e7eb);
}
.resize-handle:hover {
background: var(--weekly-accent, #3b82f6);
opacity: 0.5;
}
.resize-handle:active {
background: var(--weekly-accent, #3b82f6);
opacity: 0.7;
} }
.resize-handle:hover .resize-handle-bar, .resize-handle:hover .resize-handle-bar,
.resize-handle:active .resize-handle-bar { .resize-handle:active .resize-handle-bar {
background: var(--weekly-accent, #3b82f6); background: white;
opacity: 0.6; opacity: 0.9;
} }
.resize-handle-bar { .resize-handle-bar {
width: 40px; width: 40px;
height: 3px; height: 3px;
border-radius: 2px; border-radius: 2px;
background: var(--weekly-border); background: var(--weekly-text-light, #999);
opacity: 0.4; opacity: 0.5;
transition: background 0.15s, opacity 0.15s; transition: background 0.15s, opacity 0.15s;
} }

24
src/components/WeeklyView.tsx
View File

@ -1649,7 +1649,9 @@ export default function WeeklyView() {
const onMove = (ev: MouseEvent | TouchEvent) => { const onMove = (ev: MouseEvent | TouchEvent) => {
if (!resizingRef.current) return; if (!resizingRef.current) return;
const y = 'touches' in ev ? ev.touches[0].clientY : ev.clientY; const y = 'touches' in ev ? ev.touches[0].clientY : ev.clientY;
const delta = y - resizingRef.current.startY; const rawDelta = y - resizingRef.current.startY;
// Top handle: dragging up = increase height (invert delta); bottom handle: normal
const delta = resizingRef.current.target === 'someday' ? -rawDelta : rawDelta;
const newHeight = Math.max(40, Math.min(600, resizingRef.current.startHeight + delta)); const newHeight = Math.max(40, Math.min(600, resizingRef.current.startHeight + delta));
if (resizingRef.current.target === 'someday') setSomedayHeight(newHeight); if (resizingRef.current.target === 'someday') setSomedayHeight(newHeight);
else setAllDayHeight(newHeight); else setAllDayHeight(newHeight);
@ -7078,6 +7080,16 @@ export default function WeeklyView() {
{/* Someday Section */} {/* Someday Section */}
{showSomeday && (<> {showSomeday && (<>
{/* Resize handle - on top border of someday section */}
{somedayExpanded && (
<div
className="resize-handle"
onMouseDown={(e) => startResize(e, 'someday')}
onTouchStart={(e) => startResize(e, 'someday')}
>
<div className="resize-handle-bar" />
</div>
)}
<section <section
ref={somedaySectionRefCb} ref={somedaySectionRefCb}
className={`weekly-someday ${somedayExpanded ? "expanded" : "collapsed"} transition-colors duration-200`} className={`weekly-someday ${somedayExpanded ? "expanded" : "collapsed"} transition-colors duration-200`}
@ -7956,16 +7968,6 @@ export default function WeeklyView() {
</div> </div>
{/* close flex row */} {/* close flex row */}
</section> </section>
{/* Resize handle - outside section so it's always at the bottom border */}
{somedayExpanded && (
<div
className="resize-handle"
onMouseDown={(e) => startResize(e, 'someday')}
onTouchStart={(e) => startResize(e, 'someday')}
>
<div className="resize-handle-bar" />
</div>
)}
</> </>
) )
} }