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-radio-activatable-group__choices">
<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>
</button>
<span>Option 1</span>
</span>
<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>
</button>
<span>Option 2</span>
@@ -729,6 +729,7 @@
if (componentType === 'radio-field') {
const radios = target.querySelectorAll('.sg-radio-field');
radios.forEach((radio) => {
radio.disabled = !isActive;
if (!isActive) {
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) => {
group.querySelectorAll('.sg-tab-button').forEach((button) => {
button.addEventListener('click', () => {
styleguide.css
+4 -3
View File
@@ -1988,7 +1988,8 @@ section + section {
display: flex;
flex-wrap: wrap;
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 {
@@ -1999,8 +2000,8 @@ section + section {
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
min-width: 0;
max-width: 100%;
width: auto;
flex: 1 1 auto;
width: 100%;
flex: 1 1 0;
}
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value {