openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(tasks): reorder toolbar buttons; wrap list in tasks-body; remove flex-wrap on mobile

Browse Source 
group-mode toggle moved before view toggle in markup order.
Filter panel, task list, and FAB wrapped in .tasks-body for scroll containment.
tasks-toolbar flex-wrap removed — actions stay on one line on narrow screens.
This commit is contained in:
Konrad M.
2026-04-21 21:53:17 +02:00
parent e703bc8acf
commit 88a1a78743
2 changed files with 35 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/pages/tasks.js
+18 -16
View File
@@ -1430,6 +1430,10 @@ export async function render(container, { user }) {
<div class="tasks-toolbar">
<h1 class="tasks-toolbar__title">${t('tasks.title')}</h1>
<div class="tasks-toolbar__actions">
<div class="group-toggle" id="group-mode-toggle" ${isKanban ? 'style="display:none"' : ''}>
<button class="group-toggle__btn group-toggle__btn--active" data-mode="category">${t('tasks.categoryLabel')}</button>
<button class="group-toggle__btn" data-mode="due">${t('tasks.dueDateLabel')}</button>
</div>
<div class="group-toggle" id="view-toggle">
<button class="group-toggle__btn ${isKanban ? '' : 'group-toggle__btn--active'}" data-view="list"
title="${t('tasks.listView')}" aria-label="${t('tasks.listView')}">
@@ -1440,30 +1444,28 @@ export async function render(container, { user }) {
<i data-lucide="columns" class="icon-md" aria-hidden="true"></i>
</button>
</div>
<div class="group-toggle" id="group-mode-toggle" ${isKanban ? 'style="display:none"' : ''}>
<button class="group-toggle__btn group-toggle__btn--active" data-mode="category">${t('tasks.categoryLabel')}</button>
<button class="group-toggle__btn" data-mode="due">${t('tasks.dueDateLabel')}</button>
</div>
<button class="btn btn--primary" id="btn-new-task" style="gap:var(--space-1)">
<i data-lucide="plus" class="icon-lg" aria-hidden="true"></i> ${t('tasks.newTask')}
</button>
</div>
</div>
<div class="tasks-filters" id="filter-bar"></div>
<div class="filter-panel" id="filter-panel" hidden></div>
<div class="tasks-body">
<div class="tasks-filters" id="filter-bar"></div>
<div class="filter-panel" id="filter-panel" hidden></div>
<div id="task-list">
${[1,2,3].map(() => `
<div class="widget-skeleton" style="margin-bottom:var(--space-2)">
<div class="skeleton skeleton-line skeleton-line--medium" style="height:18px;margin-bottom:var(--space-3)"></div>
<div class="skeleton skeleton-line skeleton-line--full" style="height:14px;margin-bottom:var(--space-2)"></div>
<div class="skeleton skeleton-line skeleton-line--short" style="height:12px"></div>
</div>`).join('')}
<div id="task-list">
${[1,2,3].map(() => `
<div class="widget-skeleton" style="margin-bottom:var(--space-2)">
<div class="skeleton skeleton-line skeleton-line--medium" style="height:18px;margin-bottom:var(--space-3)"></div>
<div class="skeleton skeleton-line skeleton-line--full" style="height:14px;margin-bottom:var(--space-2)"></div>
<div class="skeleton skeleton-line skeleton-line--short" style="height:12px"></div>
</div>`).join('')}
</div>
<button class="page-fab" id="fab-new-task" aria-label="${t('tasks.newTask')}">
<i data-lucide="plus" class="icon-2xl" aria-hidden="true"></i>
</button>
</div>
<button class="page-fab" id="fab-new-task" aria-label="${t('tasks.newTask')}">
<i data-lucide="plus" class="icon-2xl" aria-hidden="true"></i>
</button>
</div>
`;
public/styles/tasks.css
+17 -15
View File
@@ -13,14 +13,17 @@
* Seiten-Layout
* -------------------------------------------------------- */
.tasks-page {
padding: var(--space-4);
padding-bottom: var(--space-16);
max-width: var(--content-max-width);
margin: 0 auto;
}
.tasks-body {
padding: var(--space-4);
padding-bottom: var(--space-16);
}
@media (min-width: 1024px) {
.tasks-page {
.tasks-body {
padding: var(--space-8);
padding-bottom: var(--space-16);
}
@@ -32,20 +35,18 @@
.tasks-toolbar {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
flex-wrap: wrap;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-top: 3px solid var(--module-accent);
border-bottom: 1px solid var(--color-border);
background-color: var(--color-surface);
}
.tasks-toolbar__title {
font-size: var(--text-2xl);
font-size: var(--text-lg);
font-weight: var(--font-weight-bold);
flex: 1 1 auto;
min-width: min-content;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tasks-toolbar__actions {
@@ -54,6 +55,7 @@
gap: var(--space-2);
}
/* Gruppierungs-Toggle */
.group-toggle {
display: flex;
@@ -196,15 +198,15 @@
}
/* Filter-Panel */
.filter-panel {
.filter-panel:not([hidden]) {
display: flex;
flex-direction: column;
gap: var(--space-3);
background-color: var(--color-surface);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.filter-panel__group {