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

fix: declutter iPad/tablet header by hiding secondary controls

Browse Source 
On tablet (≤1024px), hide days-to-show, time range, slot duration,
and goal/quote from header. Move days and slot controls into the
overflow menu. Only view switcher icons + KW/year + navigation remain
in the header bar.

v1.43.2
This commit is contained in:
mARTin 2026-03-17 11:43:26 +01:00
parent a8be3361be
commit a20f6673ec
2 changed files with 36 additions and 9 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.43.1", "version": "1.43.2",
"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": {

43
src/components/WeeklyView.tsx
View File

@ -5767,9 +5767,9 @@ export default function WeeklyView() {
</button> </button>
</div> </div>
{/* Days to Show */} {/* Days to Show — desktop only (available in sidebar on tablet) */}
<div <div
className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1" className="header-desktop-only items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1"
title="Days to show" title="Days to show"
> >
<LayoutGrid size={16} className="text-gray-500 mr-1" /> <LayoutGrid size={16} className="text-gray-500 mr-1" />
@ -5788,10 +5788,10 @@ export default function WeeklyView() {
))} ))}
</div> </div>
{/* Time Range */} {/* Time Range — desktop only (available in sidebar on tablet) */}
{showTimeGrid && ( {showTimeGrid && (
<div <div
className="flex items-center gap-2 text-xs text-gray-500 bg-gray-100 dark:bg-gray-800 rounded p-1 px-2" className="header-desktop-only items-center gap-2 text-xs text-gray-500 bg-gray-100 dark:bg-gray-800 rounded p-1 px-2"
title="Visible Hours" title="Visible Hours"
> >
<Clock size={16} className="text-gray-500" /> <Clock size={16} className="text-gray-500" />
@ -5831,10 +5831,10 @@ export default function WeeklyView() {
</div> </div>
)} )}
{/* Slot Duration */} {/* Slot Duration — desktop only (available in sidebar on tablet) */}
{showTimeGrid && ( {showTimeGrid && (
<div <div
className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1" className="header-desktop-only items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1"
title="Slot Duration" title="Slot Duration"
> >
<Clock size={16} className="text-gray-500 mr-1" /> <Clock size={16} className="text-gray-500 mr-1" />
@ -5927,8 +5927,8 @@ export default function WeeklyView() {
</div> </div>
</div> </div>
{/* Goal */} {/* Goal — hidden on tablet to save space */}
<div className="flex items-center text-sm"> <div className="header-desktop-only items-center text-sm">
{syncError ? ( {syncError ? (
<div className="flex items-center gap-1 text-red-500 mr-2" title={syncError}> <div className="flex items-center gap-1 text-red-500 mr-2" title={syncError}>
<AlertCircle size={14} /> <AlertCircle size={14} />
@ -6076,6 +6076,33 @@ export default function WeeklyView() {
<button onClick={() => { setShowFocusMode(true); setShowHeaderMore(false); }}><Zap size={16} /> <span>{language === "de" ? "Fokus" : "Focus"}</span></button> <button onClick={() => { setShowFocusMode(true); setShowHeaderMore(false); }}><Zap size={16} /> <span>{language === "de" ? "Fokus" : "Focus"}</span></button>
<button onClick={() => { setDarkMode(!darkMode); setShowHeaderMore(false); }}>{darkMode ? <Sun size={16} /> : <Moon size={16} />} <span>{darkMode ? "Light" : "Dark"}</span></button> <button onClick={() => { setDarkMode(!darkMode); setShowHeaderMore(false); }}>{darkMode ? <Sun size={16} /> : <Moon size={16} />} <span>{darkMode ? "Light" : "Dark"}</span></button>
<button onClick={() => { setShowSettings(true); setShowHeaderMore(false); }}><FolderPlus size={16} /> <span>{language === "de" ? "Neues Projekt" : "New Project"}</span></button> <button onClick={() => { setShowSettings(true); setShowHeaderMore(false); }}><FolderPlus size={16} /> <span>{language === "de" ? "Neues Projekt" : "New Project"}</span></button>
<div style={{ borderTop: "1px solid var(--border-color, #e5e7eb)", margin: "2px 0" }} />
<div style={{ padding: "6px 12px", display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }}>
<span style={{ fontSize: "12px", color: "#888", marginRight: "4px" }}>{language === "de" ? "Tage" : "Days"}:</span>
{[1, 2, 3, 5, 7].map((num) => (
<button
key={num}
onClick={() => { setViewDays(num); savedViewDaysRef.current = num; saveSetting("viewDays", num); }}
style={{ padding: "2px 8px", fontSize: "12px", borderRadius: "4px", border: "none", cursor: "pointer", fontWeight: viewDays === num ? 700 : 400, background: viewDays === num ? "var(--bg-secondary, #e5e7eb)" : "transparent", color: "inherit" }}
>
{num}
</button>
))}
</div>
{showTimeGrid && (
<div style={{ padding: "6px 12px", display: "flex", alignItems: "center", gap: "6px" }}>
<span style={{ fontSize: "12px", color: "#888", marginRight: "4px" }}>{language === "de" ? "Slot" : "Slot"}:</span>
{[15, 30, 60].map((duration) => (
<button
key={duration}
onClick={() => { setCellDuration(duration as CellDuration); saveSetting("cellDuration", duration); }}
style={{ padding: "2px 8px", fontSize: "12px", borderRadius: "4px", border: "none", cursor: "pointer", fontWeight: cellDuration === duration ? 700 : 400, background: cellDuration === duration ? "var(--bg-secondary, #e5e7eb)" : "transparent", color: "inherit" }}
>
{duration}m
</button>
))}
</div>
)}
</div> </div>
</> </>
)} )}