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

fix(mobile): header icon toggles icon rail; remove redundant nav arrows from rail

Browse Source 
- PanelLeftOpen in header now toggles the icon rail open/close
- Close button in rail uses same PanelLeftOpen icon for visual consistency
- Removed nav arrows (prev/next day/week, today) from rail — available in Quick Settings
- Removed Printer from rail (rarely used on mobile)
- Added SlidersHorizontal (Quick Settings) to bottom of rail

v1.110.2
This commit is contained in:
mARTin-B78 2026-05-11 13:41:41 +02:00
parent 671c91c3d7
commit ab8d96a810
2 changed files with 7 additions and 14 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",
"version": "1.110.1",
"version": "1.110.2",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js",
"scripts": {

19
src/components/WeeklyView.tsx
View File

@ -6066,8 +6066,8 @@ export default function WeeklyView() {
{/* Mobile Header */}
{isMobile && (
<header className="mobile-header" style={{ background: darkMode ? "#111827" : "#ffffff", borderBottom: `1px solid ${darkMode ? "#374151" : "#e5e7eb"}` }}>
{/* Left: Quick Settings */}
<button className="mobile-header-btn" onClick={() => setShowQuickSettings(true)} title="Quick Settings" style={{ color: darkMode ? "#e5e7eb" : "#6b7280" }}>
{/* Left: Icon rail toggle */}
<button className="mobile-header-btn" onClick={() => { setShowMobileRail(v => !v); setFlyoutSection(null); }} title="Icon Rail" style={{ color: darkMode ? "#e5e7eb" : "#6b7280" }}>
<PanelLeftOpen size={22} />
</button>
@ -6131,15 +6131,8 @@ export default function WeeklyView() {
alignItems: "center", paddingTop: "6px", paddingBottom: "8px", gap: "2px",
overflowY: "auto",
}}>
{/* Collapse */}
<button className="mobile-rail-btn" onClick={() => { setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title="Close"><PanelLeftClose size={16} /></button>
{railSep}
{/* Navigation */}
<button className="mobile-rail-btn" onClick={() => { goToPrevWeek(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Vorherige Woche" : "Previous Week"}><ChevronsLeft size={15} /></button>
<button className="mobile-rail-btn" onClick={() => { goToPrevDay(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Vorheriger Tag" : "Previous Day"}><ChevronLeft size={15} /></button>
<button className="mobile-rail-btn" onClick={() => { goToToday(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle, fontSize: "0.5rem", fontWeight: 800, letterSpacing: "0.05em" }} title="Today">{profile.language === "de" ? "HEUTE" : "TODAY"}</button>
<button className="mobile-rail-btn" onClick={() => { goToNextDay(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Nächster Tag" : "Next Day"}><ChevronRight size={15} /></button>
<button className="mobile-rail-btn" onClick={() => { goToNextWeek(); setShowMobileRail(false); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Nächste Woche" : "Next Week"}><ChevronsRight size={15} /></button>
{/* Collapse — same icon as header toggle */}
<button className="mobile-rail-btn" onClick={() => { setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title="Close"><PanelLeftOpen size={16} /></button>
{railSep}
{/* View flyout */}
<button className="mobile-rail-btn" style={{ ...railIconBtnStyle, color: "var(--accent)" }} title={profile.language === "de" ? "Ansicht" : "View"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "view" ? null : "view"); }}>
@ -6168,11 +6161,11 @@ export default function WeeklyView() {
<button className="mobile-rail-btn" onClick={handleUndo} disabled={undoCount === 0} style={{ ...railIconBtnStyle, opacity: undoCount === 0 ? 0.3 : 1 }} title="Undo"><Undo2 size={15} /></button>
<button className="mobile-rail-btn" onClick={handleRedo} disabled={redoCount === 0} style={{ ...railIconBtnStyle, opacity: redoCount === 0 ? 0.3 : 1 }} title="Redo"><Redo2 size={15} /></button>
<button className="mobile-rail-btn" onClick={() => { fetchCalendarEvents(true); fetchTasks(); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title="Refresh"><RefreshCcw size={15} /></button>
<button className="mobile-rail-btn" onClick={() => { setShowWeekPrintModal(true); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Drucken" : "Print"}><Printer size={15} /></button>
<button className="mobile-rail-btn" onClick={() => setDarkMode(!darkMode)} style={{ ...railIconBtnStyle }} title={darkMode ? "Light Mode" : "Dark Mode"}>{darkMode ? <Sun size={15} /> : <Moon size={15} />}</button>
<div style={{ flex: 1 }} />
{railSep}
{/* Settings + User/logout */}
{/* Quick Settings + full Settings + User/logout */}
<button className="mobile-rail-btn" onClick={() => { setShowQuickSettings(true); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title="Quick Settings"><SlidersHorizontal size={15} /></button>
<button className="mobile-rail-btn" onClick={() => { setShowSettings(true); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Einstellungen" : "Settings"}><Settings size={15} /></button>
<button className="mobile-rail-btn" onClick={() => signOut()} style={{ ...railIconBtnStyle, color: "#ef4444" }} title={profile.language === "de" ? "Abmelden" : "Sign out"}><LogOut size={15} /></button>
</div>