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

Add basic page layout demo

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-18 10:37:28 +02:00
parent 1552cbf042
commit a6b154ee94
2 changed files with 308 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -62,6 +62,7 @@
<h3 class="sg-sub-heading sg-section-h3">Generische Layouts</h3>
<ul class="sg-index-list">
<li><a href="./patterns/card-listen-seite.html">Card Listen Seite</a></li>
<li><a href="./patterns/page-layout-basic.html">Page Layout Basic</a></li>
<li><a href="./patterns/card-listen-fundamentalanalyse-mobile.html">Card Listen Fundamentalanalyse Mobile</a></li>
</ul>
patterns/page-layout-basic.html
+307
View File
@@ -0,0 +1,307 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Page Layout Basic</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Layout – Page Layout Basic</h1>
<main aria-label="Page Layout Basic">
<header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">
<div class="sg-portal-header__main" data-pattern-part="portal-header-main">
<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="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 Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
</div>
</div>
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Titel</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Gruppen</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Listen</button>
</nav>
</div>
</header>
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">
Sortierung
</button>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 1</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 2</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 3</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 4</span>
</li>
<li class="sg-pulldown-option sg-pulldown-option--disabled">
<span>Menüpunkt 5</span>
</li>
</ul>
</div>
</div>
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Region" data-component-part="pulldown-trigger" data-label-base="Region">
Region
</button>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Region" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Regionsoptionen">
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 1</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 2</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 3</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Menüpunkt 4</span>
</li>
<li class="sg-pulldown-option sg-pulldown-option--disabled">
<span>Menüpunkt 5</span>
</li>
</ul>
</div>
</div>
<div class="sg-search-field-row">
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
<input
class="sg-interaction-element sg-input-single-line"
type="text"
placeholder="Suche"
aria-label="Suche"
>
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
</span>
<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
</div>
</div>
<div class="sg-options-row__right" data-pattern-part="options-row-secondary-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>
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">
<button class="sg-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>
</div>
</div>
<h1 class="sg-heading-h1">H1 Überschrift</h1>
<div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
<div class="sg-group-card__header-row">
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Seiteninhalt</h2>
</div>
<article class="sg-card" data-component="card" data-component-context="group-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Inhalt</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">
Zeile 01<br>
Zeile 02<br>
Zeile 03<br>
Zeile 04<br>
Zeile 05<br>
Zeile 06<br>
Zeile 07<br>
Zeile 08<br>
Zeile 09<br>
Zeile 10<br>
Zeile 11<br>
Zeile 12<br>
Zeile 13<br>
Zeile 14<br>
Zeile 15<br>
Zeile 16<br>
Zeile 17<br>
Zeile 18<br>
Zeile 19<br>
Zeile 20<br>
Zeile 21<br>
Zeile 22<br>
Zeile 23<br>
Zeile 24<br>
Zeile 25<br>
Zeile 26<br>
Zeile 27<br>
Zeile 28<br>
Zeile 29<br>
Zeile 30
</p>
</div>
</article>
</div>
</main>
<script src="../scripts/help-icon-overlays.js"></script>
<script>
document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__menu-wrap .sg-tab-button-group').forEach((group) => {
group.querySelectorAll('.sg-tab-button').forEach((button) => {
button.addEventListener('click', () => {
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
const isActive = otherButton === button;
otherButton.setAttribute('aria-selected', String(isActive));
otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
});
});
});
});
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';
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);
button.setAttribute('aria-expanded', String(nextState));
});
});
const updatePulldownSelectionState = (demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
if (!trigger || selectableOptions.length === 0) {
return;
}
const selectedCount = Array.from(selectableOptions).filter((option) => {
return option.getAttribute('aria-checked') === 'true';
}).length;
selectableOptions.forEach((option) => {
const optionRow = option.closest('.sg-pulldown-option');
if (!optionRow) {
return;
}
optionRow.classList.toggle(
'sg-pulldown-option--selected',
option.getAttribute('aria-checked') === 'true'
);
});
const labelBase = trigger.dataset.labelBase || 'Auswahl';
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
trigger.classList.toggle('sg-form-active', selectedCount > 0);
trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
trigger.setAttribute(
'aria-label',
selectedCount > 0 ? `Pulldown ${labelBase} mit aktiver Auswahl` : `Pulldown ${labelBase} ohne aktive Auswahl`
);
};
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
if (!trigger) {
return;
}
trigger.addEventListener('click', (event) => {
event.stopPropagation();
const nextState = demo.dataset.open !== 'true';
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
otherDemo.dataset.open = 'false';
if (otherTrigger) {
otherTrigger.setAttribute('aria-expanded', 'false');
}
});
demo.dataset.align = 'left';
demo.dataset.open = String(nextState);
trigger.setAttribute('aria-expanded', String(nextState));
updatePulldownSelectionState(demo);
});
demo.querySelectorAll('[data-pulldown-option]').forEach((option) => {
option.addEventListener('click', (event) => {
event.stopPropagation();
const nextChecked = option.getAttribute('aria-checked') !== 'true';
option.setAttribute('aria-checked', String(nextChecked));
updatePulldownSelectionState(demo);
});
});
updatePulldownSelectionState(demo);
});
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`
);
});
});
</script>
</body>
</html>