gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use triangle sort indicators

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-04 18:08:26 +02:00
parent e4eba55561
commit 3f0fdf217e
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/data-display.html
+6 -6
View File
@@ -86,31 +86,31 @@
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="0"> <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="0">
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 1 sortieren"> <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 1 sortieren">
<span class="sg-large-table__sort-label">Spalte 1</span> <span class="sg-large-table__sort-label">Spalte 1</span>
<span class="sg-large-table__sort-icon" aria-hidden="true">↕</span> <span class="sg-large-table__sort-icon" aria-hidden="true">▴</span>
</button> </button>
</div> </div>
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="1"> <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="1">
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 2 sortieren"> <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 2 sortieren">
<span class="sg-large-table__sort-label">Spalte 2</span> <span class="sg-large-table__sort-label">Spalte 2</span>
<span class="sg-large-table__sort-icon" aria-hidden="true">↕</span> <span class="sg-large-table__sort-icon" aria-hidden="true">▴</span>
</button> </button>
</div> </div>
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="2"> <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="2">
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 3 sortieren"> <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 3 sortieren">
<span class="sg-large-table__sort-label">Spalte 3</span> <span class="sg-large-table__sort-label">Spalte 3</span>
<span class="sg-large-table__sort-icon" aria-hidden="true">↕</span> <span class="sg-large-table__sort-icon" aria-hidden="true">▴</span>
</button> </button>
</div> </div>
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="3"> <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="3">
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 4 sortieren"> <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 4 sortieren">
<span class="sg-large-table__sort-label">Spalte 4</span> <span class="sg-large-table__sort-label">Spalte 4</span>
<span class="sg-large-table__sort-icon" aria-hidden="true">↕</span> <span class="sg-large-table__sort-icon" aria-hidden="true">▴</span>
</button> </button>
</div> </div>
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="4"> <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="4">
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 5 sortieren"> <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 5 sortieren">
<span class="sg-large-table__sort-label">Spalte 5</span> <span class="sg-large-table__sort-label">Spalte 5</span>
<span class="sg-large-table__sort-icon" aria-hidden="true">↕</span> <span class="sg-large-table__sort-icon" aria-hidden="true">▴</span>
</button> </button>
</div> </div>
</div> </div>
@@ -221,7 +221,7 @@
cell.setAttribute('aria-sort', isActive ? direction : 'none'); cell.setAttribute('aria-sort', isActive ? direction : 'none');
if (icon) { if (icon) {
icon.textContent = isActive ? (direction === 'ascending' ? '↑' : '↓') : '↕'; icon.textContent = isActive ? (direction === 'ascending' ? '▴' : '▾') : '▴';
} }
}); });
styles/42-components-data-display.css
+1 -1
View File
@@ -124,7 +124,7 @@
.sg-large-table__sort-icon { .sg-large-table__sort-icon {
flex: 0 0 auto; flex: 0 0 auto;
font-size: 1.05em; font-size: 1.15em;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
line-height: 1; line-height: 1;
} }