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

Stabilize large table sort indicators

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-04 18:09:42 +02:00
parent 3f0fdf217e
commit 1b723f9b4d
2 changed files with 27 additions and 9 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" data-direction="ascending"></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" data-direction="ascending"></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" data-direction="ascending"></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" data-direction="ascending"></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" data-direction="ascending"></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.dataset.direction = isActive ? direction : 'ascending';
} }
}); });
styles/42-components-data-display.css
+21 -3
View File
@@ -105,7 +105,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
gap: 0.15rem; gap: 0.2rem;
width: 100%; width: 100%;
padding: 0 var(--spacing-small); padding: 0 var(--spacing-small);
border: var(--border-none); border: var(--border-none);
@@ -124,7 +124,25 @@
.sg-large-table__sort-icon { .sg-large-table__sort-icon {
flex: 0 0 auto; flex: 0 0 auto;
font-size: 1.15em; display: inline-flex;
font-weight: var(--font-weight-semibold); align-items: center;
justify-content: center;
width: 0.7rem;
height: 0.7rem;
line-height: 1; line-height: 1;
transform: translateY(0.02em);
}
.sg-large-table__sort-icon::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 0.28rem solid transparent;
border-right: 0.28rem solid transparent;
border-bottom: 0.42rem solid currentColor;
}
.sg-large-table__sort-icon[data-direction="descending"]::before {
transform: rotate(180deg);
} }