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

Add options row above analysis heading with mode toggle and small sandwich menu

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 16:28:05 +02:00
parent ae0c146c87
commit 5c14b26a02
1 changed files with 67 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+67
View File
@@ -60,6 +60,33 @@
<p class="sg-strong sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width sg-vsf-drawer-next-earnings" data-pattern-part="text-block-full-width"> <p class="sg-strong sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width sg-vsf-drawer-next-earnings" data-pattern-part="text-block-full-width">
Nächste Quartalszahlen: nicht bekannt Nächste Quartalszahlen: nicht bekannt
</p> </p>
<div class="sg-options-row" aria-label="Fundamentalanalyse Optionen" data-pattern="options-row">
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
</span>
<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
</button>
</div>
<div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
<div class="sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="small">
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Objekt-Menü öffnen" data-component-part="sandwich-trigger">
<span class="sg-sandwich-button__icon" aria-hidden="true">
<span class="sg-sandwich-button__line"></span>
<span class="sg-sandwich-button__line"></span>
<span class="sg-sandwich-button__line"></span>
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Objekt-Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
</div>
</div>
</div>
</div>
<h2 class="sg-heading-h2 sg-vsf-fundamental-analysis-heading">Fundamentalanalyse vom 12.5.2026</h2> <h2 class="sg-heading-h2 sg-vsf-fundamental-analysis-heading">Fundamentalanalyse vom 12.5.2026</h2>
<div class="sg-content-block-card-group" data-pattern="card-gruppe-mit-tastennavigation"> <div class="sg-content-block-card-group" data-pattern="card-gruppe-mit-tastennavigation">
<div class="sg-tab-button-group sg-content-block-card-group__tabs" role="tablist" aria-label="Fundamentalanalyse Navigation" data-component="tab-navigation" data-component-size="large"> <div class="sg-tab-button-group sg-content-block-card-group__tabs" role="tablist" aria-label="Fundamentalanalyse Navigation" data-component="tab-navigation" data-component-size="large">
@@ -197,6 +224,46 @@
}); });
} }
document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
toggle.addEventListener('click', () => {
const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
toggle.dataset.active = nextState;
toggle.dataset.componentState = nextState;
toggle.setAttribute(
'aria-label',
`Modus Schieber global: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
);
});
});
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
const button = wrap.querySelector('.sg-sandwich-button');
if (!button) {
return;
}
button.addEventListener('click', (event) => {
event.stopPropagation();
const nextState = wrap.dataset.open !== 'true';
wrap.dataset.open = String(nextState);
button.setAttribute('aria-expanded', String(nextState));
});
});
document.addEventListener('click', (event) => {
if (event.target.closest('.sg-sandwich-menu-wrap')) {
return;
}
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');
}
});
});
const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation"]'); const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation"]');
if (tabGroup) { if (tabGroup) {