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

Adjust interactive template activation and mobile slider layout

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-25 07:30:23 +02:00
parent 604bbe6c99
commit bcd16e3077
2 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+12 -2
View File
@@ -483,13 +483,13 @@
<span class="sg-label">Label</span> <span class="sg-label">Label</span>
<span class="sg-radio-activatable-group__choices"> <span class="sg-radio-activatable-group__choices">
<span class="sg-radio-activatable-group__choice"> <span class="sg-radio-activatable-group__choice">
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 1 wählen"> <button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 1 wählen" disabled>
<span class="sg-radio-field__mark" aria-hidden="true"></span> <span class="sg-radio-field__mark" aria-hidden="true"></span>
</button> </button>
<span>Option 1</span> <span>Option 1</span>
</span> </span>
<span class="sg-radio-activatable-group__choice"> <span class="sg-radio-activatable-group__choice">
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 2 wählen"> <button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 2 wählen" disabled>
<span class="sg-radio-field__mark" aria-hidden="true"></span> <span class="sg-radio-field__mark" aria-hidden="true"></span>
</button> </button>
<span>Option 2</span> <span>Option 2</span>
@@ -729,6 +729,7 @@
if (componentType === 'radio-field') { if (componentType === 'radio-field') {
const radios = target.querySelectorAll('.sg-radio-field'); const radios = target.querySelectorAll('.sg-radio-field');
radios.forEach((radio) => { radios.forEach((radio) => {
radio.disabled = !isActive;
if (!isActive) { if (!isActive) {
radio.setAttribute('aria-checked', 'false'); radio.setAttribute('aria-checked', 'false');
} }
@@ -770,6 +771,15 @@
}); });
}); });
// Sync activatable targets to the toggle's initial state on load.
document.querySelectorAll('.sg-activation-mode-toggle[data-activation-target]').forEach((toggle) => {
const target = document.getElementById(toggle.dataset.activationTarget);
if (!target) {
return;
}
setActivatableComponentState(target, toggle.dataset.active === 'relative');
});
document.querySelectorAll('.sg-tab-button-group').forEach((group) => { document.querySelectorAll('.sg-tab-button-group').forEach((group) => {
group.querySelectorAll('.sg-tab-button').forEach((button) => { group.querySelectorAll('.sg-tab-button').forEach((button) => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
styleguide.css
+4 -3
View File
@@ -1988,7 +1988,8 @@ section + section {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: var(--spacing-small); column-gap: var(--spacing-large);
row-gap: var(--spacing-small);
} }
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label { .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
@@ -1999,8 +2000,8 @@ section + section {
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
min-width: 0; min-width: 0;
max-width: 100%; max-width: 100%;
width: auto; width: 100%;
flex: 1 1 auto; flex: 1 1 0;
} }
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value {