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

Align help-icon content and one-open-at-a-time behavior with template

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 16:54:23 +02:00
parent de7b41ad82
commit 1d9a536095
1 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+17 -3
View File
@@ -170,15 +170,15 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Kennzahl PE.</span></span></td> <td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></td>
<td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td> <td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td>
</tr> </tr>
<tr> <tr>
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Kennzahl PE Forward.</span></span></td> <td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></td>
<td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td> <td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td>
</tr> </tr>
<tr> <tr>
<td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Kennzahl PEG Forward.</span></span></td> <td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></td>
<td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td> <td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td>
</tr> </tr>
</tbody> </tbody>
@@ -319,6 +319,13 @@
button.addEventListener('click', (event) => { button.addEventListener('click', (event) => {
event.stopPropagation(); event.stopPropagation();
const nextState = wrap.dataset.open !== 'true'; const nextState = wrap.dataset.open !== 'true';
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
const otherButton = otherWrap.querySelector('.sg-sandwich-button');
otherWrap.dataset.open = 'false';
if (otherButton) {
otherButton.setAttribute('aria-expanded', 'false');
}
});
wrap.dataset.open = String(nextState); wrap.dataset.open = String(nextState);
button.setAttribute('aria-expanded', String(nextState)); button.setAttribute('aria-expanded', String(nextState));
}); });
@@ -333,6 +340,13 @@
button.addEventListener('click', (event) => { button.addEventListener('click', (event) => {
event.stopPropagation(); event.stopPropagation();
const nextState = wrap.dataset.open !== 'true'; const nextState = wrap.dataset.open !== 'true';
document.querySelectorAll('.sg-help-icon-wrap').forEach((otherWrap) => {
const otherButton = otherWrap.querySelector('.sg-help-icon');
otherWrap.dataset.open = 'false';
if (otherButton) {
otherButton.setAttribute('aria-expanded', 'false');
}
});
wrap.dataset.open = String(nextState); wrap.dataset.open = String(nextState);
button.setAttribute('aria-expanded', String(nextState)); button.setAttribute('aria-expanded', String(nextState));
}); });