elpatron/kapteins-daagbok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

fix(dashboard): Sortierbuttons als kompakte Icon-Buttons ohne Text

Browse Source 
Beschriftungen entfernt, Buttons auf 36px verkleinert; aria-label und
title bleiben für Tooltip und Barrierefreiheit erhalten.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
elpatron
2026-05-31 14:41:46 +02:00
co-authored by Cursor
parent b7a47a1d90
commit 5882edcbdf
2 changed files with 8 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.css
+4 -12
View File
@@ -1404,25 +1404,21 @@ html.scheme-dark .themed-select-option.is-selected {
.dashboard-sort-group { .dashboard-sort-group {
display: flex; display: flex;
flex: 1 1 140px; flex: 0 0 auto;
gap: 6px; gap: 6px;
min-width: 0;
} }
.dashboard-sort-btn { .dashboard-sort-btn {
flex: 1;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 6px; width: 36px;
min-height: 40px; height: 36px;
padding: 8px 10px; padding: 0;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--app-border-subtle); border: 1px solid var(--app-border-subtle);
background: var(--app-surface-alt); background: var(--app-surface-alt);
color: var(--app-text-muted); color: var(--app-text-muted);
font-size: 13px;
font-weight: 600;
cursor: pointer; cursor: pointer;
transition: border-color 0.2s, background-color 0.2s, color 0.2s; transition: border-color 0.2s, background-color 0.2s, color 0.2s;
} }
@@ -1443,10 +1439,6 @@ html.scheme-dark .themed-select-option.is-selected {
outline-offset: 2px; outline-offset: 2px;
} }
.dashboard-sort-btn span {
white-space: nowrap;
}
.dashboard-filter-label { .dashboard-filter-label {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
client/src/components/LogbookDashboard.tsx
+4 -4
View File
@@ -490,20 +490,20 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
className={`dashboard-sort-btn${sortBy === 'name' ? ' is-active' : ''}`} className={`dashboard-sort-btn${sortBy === 'name' ? ' is-active' : ''}`}
onClick={() => setSortBy('name')} onClick={() => setSortBy('name')}
aria-pressed={sortBy === 'name'} aria-pressed={sortBy === 'name'}
aria-label={t('dashboard.sort_by_name')}
title={t('dashboard.sort_by_name')} title={t('dashboard.sort_by_name')}
> >
<CaseSensitive size={16} aria-hidden="true" /> <CaseSensitive size={16} aria-hidden="true" />
<span>{t('dashboard.sort_by_name')}</span>
</button> </button>
<button <button
type="button" type="button"
className={`dashboard-sort-btn${sortBy === 'date' ? ' is-active' : ''}`} className={`dashboard-sort-btn${sortBy === 'date' ? ' is-active' : ''}`}
onClick={() => setSortBy('date')} onClick={() => setSortBy('date')}
aria-pressed={sortBy === 'date'} aria-pressed={sortBy === 'date'}
aria-label={t('dashboard.sort_by_date')}
title={t('dashboard.sort_by_date')} title={t('dashboard.sort_by_date')}
> >
<CalendarDays size={16} aria-hidden="true" /> <CalendarDays size={16} aria-hidden="true" />
<span>{t('dashboard.sort_by_date')}</span>
</button> </button>
</div> </div>
<div className="dashboard-sort-group" role="group" aria-label={t('dashboard.sort_dir_label')}> <div className="dashboard-sort-group" role="group" aria-label={t('dashboard.sort_dir_label')}>
@@ -512,20 +512,20 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
className={`dashboard-sort-btn${sortDirection === 'asc' ? ' is-active' : ''}`} className={`dashboard-sort-btn${sortDirection === 'asc' ? ' is-active' : ''}`}
onClick={() => setSortDirection('asc')} onClick={() => setSortDirection('asc')}
aria-pressed={sortDirection === 'asc'} aria-pressed={sortDirection === 'asc'}
aria-label={sortBy === 'name' ? t('dashboard.sort_name_asc') : t('dashboard.sort_date_asc')}
title={sortBy === 'name' ? t('dashboard.sort_name_asc') : t('dashboard.sort_date_asc')} title={sortBy === 'name' ? t('dashboard.sort_name_asc') : t('dashboard.sort_date_asc')}
> >
<ArrowUp size={16} aria-hidden="true" /> <ArrowUp size={16} aria-hidden="true" />
<span>{t('dashboard.sort_asc')}</span>
</button> </button>
<button <button
type="button" type="button"
className={`dashboard-sort-btn${sortDirection === 'desc' ? ' is-active' : ''}`} className={`dashboard-sort-btn${sortDirection === 'desc' ? ' is-active' : ''}`}
onClick={() => setSortDirection('desc')} onClick={() => setSortDirection('desc')}
aria-pressed={sortDirection === 'desc'} aria-pressed={sortDirection === 'desc'}
aria-label={sortBy === 'name' ? t('dashboard.sort_name_desc') : t('dashboard.sort_date_desc')}
title={sortBy === 'name' ? t('dashboard.sort_name_desc') : t('dashboard.sort_date_desc')} title={sortBy === 'name' ? t('dashboard.sort_name_desc') : t('dashboard.sort_date_desc')}
> >
<ArrowDown size={16} aria-hidden="true" /> <ArrowDown size={16} aria-hidden="true" />
<span>{t('dashboard.sort_desc')}</span>
</button> </button>
</div> </div>
</div> </div>