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 {
display: flex;
flex: 1 1 140px;
flex: 0 0 auto;
gap: 6px;
min-width: 0;
}
.dashboard-sort-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 40px;
padding: 8px 10px;
width: 36px;
height: 36px;
padding: 0;
border-radius: 8px;
border: 1px solid var(--app-border-subtle);
background: var(--app-surface-alt);
color: var(--app-text-muted);
font-size: 13px;
font-weight: 600;
cursor: pointer;
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;
}
.dashboard-sort-btn span {
white-space: nowrap;
}
.dashboard-filter-label {
font-size: 13px;
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' : ''}`}
onClick={() => setSortBy('name')}
aria-pressed={sortBy === 'name'}
aria-label={t('dashboard.sort_by_name')}
title={t('dashboard.sort_by_name')}
>
<CaseSensitive size={16} aria-hidden="true" />
<span>{t('dashboard.sort_by_name')}</span>
</button>
<button
type="button"
className={`dashboard-sort-btn${sortBy === 'date' ? ' is-active' : ''}`}
onClick={() => setSortBy('date')}
aria-pressed={sortBy === 'date'}
aria-label={t('dashboard.sort_by_date')}
title={t('dashboard.sort_by_date')}
>
<CalendarDays size={16} aria-hidden="true" />
<span>{t('dashboard.sort_by_date')}</span>
</button>
</div>
<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' : ''}`}
onClick={() => setSortDirection('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')}
>
<ArrowUp size={16} aria-hidden="true" />
<span>{t('dashboard.sort_asc')}</span>
</button>
<button
type="button"
className={`dashboard-sort-btn${sortDirection === 'desc' ? ' is-active' : ''}`}
onClick={() => setSortDirection('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')}
>
<ArrowDown size={16} aria-hidden="true" />
<span>{t('dashboard.sort_desc')}</span>
</button>
</div>
</div>