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

Sync styleguide 2026.05.18.1

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-25 09:20:58 +02:00
parent 67674e1ae1
commit 9c8c28c5b1
11 changed files with 280 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/patterns/page-layout-public-2-column.html
+97
View File
@@ -0,0 +1,97 @@
<!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 Public 2 Column</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Layout – Page Layout Public 2 Column</h1>
<main aria-label="Page Layout Public 2 Column">
<header class="sg-portal-header sg-portal-header--auth-segment" aria-label="Public Portal Header" data-pattern="portal-header">
<div class="sg-portal-header__auth-row" data-pattern-part="portal-header-action">
<div class="sg-tab-button-group" role="tablist" aria-label="Anmeldung" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header">
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
Login
</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
Registrieren
</button>
</div>
</div>
<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">Portalname</p>
<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="true" data-component-part="tab-button" data-component-state="active">Inhalt 1</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">Inhalt 2</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">Inhalt 3</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">Inhalt 4</button>
</nav>
</div>
</header>
<div class="sg-page-layout-public__content-mirror">
<div class="sg-page-layout-public__heading-block" aria-label="H1 Bereich">
<h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
</div>
<div class="sg-page-layout-public-2-column__columns">
<article class="sg-card sg-card--content-card sg-card--content-card-dark" data-component="content-card" aria-label="Fusszeile">
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">
Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im Layout.
</p>
</div>
</article>
<div class="sg-page-layout-public-2-column__text-column">
<p class="sg-body sg-text-on-dark">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in
</p>
</div>
</div>
</div>
</main>
<script src="../scripts/help-icon-overlays.js"></script>
<script>
document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__auth-row .sg-tab-button-group, .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');
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));
});
});
</script>
</body>
</html>