style(tasks,lists): align header spacing with workspace by eliminating top margin
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 58s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 58s
This commit is contained in:
1 parent
894a2e3b76
commit
8ee7b135af
2 files changed
+74
-74
No files matched your search
@@ -794,52 +794,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full space-y-3">
|
<div className="w-full space-y-3">
|
||||||
{/* Mobile Compact Header Bar (List switching & actions live in MindSift Logo Menu) */}
|
|
||||||
<div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border">
|
|
||||||
<div className="flex items-center gap-2 min-w-0">
|
|
||||||
<span className="text-sm font-semibold text-main truncate">
|
|
||||||
{activeList ? `${activeList.icon} ${activeList.title}` : '🛒 Einkaufsliste'}
|
|
||||||
</span>
|
|
||||||
{openItems.length > 0 && (
|
|
||||||
<span className="badge-neutral text-[11px] flex-shrink-0">
|
|
||||||
{openItems.length} offen
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1.5 flex-shrink-0">
|
|
||||||
{activeList && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={openShareModal}
|
|
||||||
className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center"
|
|
||||||
title="Liste teilen"
|
|
||||||
>
|
|
||||||
<Users className="w-4 h-4 text-accent" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<div
|
|
||||||
className={`h-9 w-9 flex items-center justify-center rounded-btn border transition-colors ${
|
|
||||||
wsConnected
|
|
||||||
? realtimeTransport === 'sse'
|
|
||||||
? 'bg-teal-500/10 border-teal-500/30 text-teal-400'
|
|
||||||
: 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
|
|
||||||
: 'bg-canvas border-border text-muted'
|
|
||||||
}`}
|
|
||||||
title={
|
|
||||||
wsConnected
|
|
||||||
? realtimeTransport === 'sse'
|
|
||||||
? 'Live synchronisiert (Server-Sent Events / Proxy-Stream)'
|
|
||||||
: 'Live synchronisiert (WebSocket online)'
|
|
||||||
: 'Offline'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Top Header: List Tabs & Actions (Desktop) */}
|
{/* Top Header: List Tabs & Actions (Desktop) */}
|
||||||
<div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
|
<div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2 !mt-0">
|
||||||
{/* List Tabs */}
|
{/* List Tabs */}
|
||||||
<div className="flex flex-wrap items-center gap-1">
|
<div className="flex flex-wrap items-center gap-1">
|
||||||
{lists.map((lst) => {
|
{lists.map((lst) => {
|
||||||
@@ -952,6 +908,50 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Compact Header Bar (List switching & actions live in MindSift Logo Menu) */}
|
||||||
|
<div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border !mt-0">
|
||||||
|
<div className="flex items-center gap-2 min-w-0">
|
||||||
|
<span className="text-sm font-semibold text-main truncate">
|
||||||
|
{activeList ? `${activeList.icon} ${activeList.title}` : '🛒 Einkaufsliste'}
|
||||||
|
</span>
|
||||||
|
{openItems.length > 0 && (
|
||||||
|
<span className="badge-neutral text-[11px] flex-shrink-0">
|
||||||
|
{openItems.length} offen
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1.5 flex-shrink-0">
|
||||||
|
{activeList && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={openShareModal}
|
||||||
|
className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center"
|
||||||
|
title="Liste teilen"
|
||||||
|
>
|
||||||
|
<Users className="w-4 h-4 text-accent" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className={`h-9 w-9 flex items-center justify-center rounded-btn border transition-colors ${
|
||||||
|
wsConnected
|
||||||
|
? realtimeTransport === 'sse'
|
||||||
|
? 'bg-teal-500/10 border-teal-500/30 text-teal-400'
|
||||||
|
: 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
|
||||||
|
: 'bg-canvas border-border text-muted'
|
||||||
|
}`}
|
||||||
|
title={
|
||||||
|
wsConnected
|
||||||
|
? realtimeTransport === 'sse'
|
||||||
|
? 'Live synchronisiert (Server-Sent Events / Proxy-Stream)'
|
||||||
|
: 'Live synchronisiert (WebSocket online)'
|
||||||
|
: 'Offline'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{showNewListModal && (
|
{showNewListModal && (
|
||||||
<form
|
<form
|
||||||
onSubmit={handleCreateList}
|
onSubmit={handleCreateList}
|
||||||
|
|||||||
@@ -1264,36 +1264,8 @@ export const TasksView: React.FC<TasksViewProps> = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full space-y-3">
|
<div className="w-full space-y-3">
|
||||||
{/* Mobile Compact Context Bar (replaces cluttered button rows; options live in MindSift Logo Menu) */}
|
|
||||||
<div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border">
|
|
||||||
<div className="flex items-center gap-2 min-w-0">
|
|
||||||
<span className="text-sm font-semibold text-main truncate">
|
|
||||||
{currentSelectedList ? `${currentSelectedList.icon} ${currentSelectedList.title}` : '📋 Alle Aufgaben'}
|
|
||||||
</span>
|
|
||||||
<span className="badge-neutral text-[11px] flex-shrink-0">
|
|
||||||
{viewMode === 'kanban'
|
|
||||||
? 'Kanban'
|
|
||||||
: filter === 'open'
|
|
||||||
? `Offen (${openTasks.length})`
|
|
||||||
: filter === 'done'
|
|
||||||
? `Erledigt (${doneTasks.length})`
|
|
||||||
: `Papierkorb (${safeDiscarded.length})`}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{currentSelectedList && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => handleOpenShareModal(currentSelectedList)}
|
|
||||||
className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center flex-shrink-0"
|
|
||||||
title="Aufgabenliste teilen"
|
|
||||||
>
|
|
||||||
<Users className="w-4 h-4 text-accent" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Top Header: Task Lists Tabs & View Mode Switcher (Desktop) */}
|
{/* Top Header: Task Lists Tabs & View Mode Switcher (Desktop) */}
|
||||||
<div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
|
<div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2 !mt-0">
|
||||||
{/* Task Lists selector tabs */}
|
{/* Task Lists selector tabs */}
|
||||||
<div className="flex flex-wrap items-center gap-1">
|
<div className="flex flex-wrap items-center gap-1">
|
||||||
<button
|
<button
|
||||||
@@ -1448,6 +1420,34 @@ export const TasksView: React.FC<TasksViewProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Compact Context Bar (replaces cluttered button rows; options live in MindSift Logo Menu) */}
|
||||||
|
<div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border !mt-0">
|
||||||
|
<div className="flex items-center gap-2 min-w-0">
|
||||||
|
<span className="text-sm font-semibold text-main truncate">
|
||||||
|
{currentSelectedList ? `${currentSelectedList.icon} ${currentSelectedList.title}` : '📋 Alle Aufgaben'}
|
||||||
|
</span>
|
||||||
|
<span className="badge-neutral text-[11px] flex-shrink-0">
|
||||||
|
{viewMode === 'kanban'
|
||||||
|
? 'Kanban'
|
||||||
|
: filter === 'open'
|
||||||
|
? `Offen (${openTasks.length})`
|
||||||
|
: filter === 'done'
|
||||||
|
? `Erledigt (${doneTasks.length})`
|
||||||
|
: `Papierkorb (${safeDiscarded.length})`}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{currentSelectedList && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleOpenShareModal(currentSelectedList)}
|
||||||
|
className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center flex-shrink-0"
|
||||||
|
title="Aufgabenliste teilen"
|
||||||
|
>
|
||||||
|
<Users className="w-4 h-4 text-accent" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Quick Add Task Input (Desktop only - on mobile, tapping the bottom '+' FAB opens mobile create sheet) */}
|
{/* Quick Add Task Input (Desktop only - on mobile, tapping the bottom '+' FAB opens mobile create sheet) */}
|
||||||
<form
|
<form
|
||||||
onSubmit={handleQuickAddTask}
|
onSubmit={handleQuickAddTask}
|
||||||
|
|||||||
Reference in new issue
Block a user