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

Make data table help icons interactive in Marktbewertung tab

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 16:52:40 +02:00
parent 3fe04276f6
commit de7b41ad82
1 changed files with 33 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+33 -11
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-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-table">?</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">Kennzahl PE.</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-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-table">?</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">Kennzahl PE Forward.</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-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-table">?</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">Kennzahl PEG Forward.</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>
@@ -324,20 +324,42 @@
}); });
}); });
document.addEventListener('click', (event) => { document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
if (event.target.closest('.sg-sandwich-menu-wrap')) { const button = wrap.querySelector('.sg-help-icon');
if (!button) {
return; return;
} }
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => { button.addEventListener('click', (event) => {
const button = wrap.querySelector('.sg-sandwich-button'); event.stopPropagation();
wrap.dataset.open = 'false'; const nextState = wrap.dataset.open !== 'true';
if (button) { wrap.dataset.open = String(nextState);
button.setAttribute('aria-expanded', 'false'); button.setAttribute('aria-expanded', String(nextState));
}
}); });
}); });
document.addEventListener('click', (event) => {
if (!event.target.closest('.sg-sandwich-menu-wrap')) {
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
const button = wrap.querySelector('.sg-sandwich-button');
wrap.dataset.open = 'false';
if (button) {
button.setAttribute('aria-expanded', 'false');
}
});
}
if (!event.target.closest('.sg-help-icon-wrap')) {
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
const button = wrap.querySelector('.sg-help-icon');
wrap.dataset.open = 'false';
if (button) {
button.setAttribute('aria-expanded', 'false');
}
});
}
});
const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation"]'); const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation"]');
if (tabGroup) { if (tabGroup) {