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

Restore register step header

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-10 14:09:47 +02:00
parent eba76ac365
commit b6b305d084
2 changed files with 74 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-register-step-1.html
+67 -1
View File
@@ -6,7 +6,40 @@
<title>Styleguide – Registriere dich bei ValueStockFinder</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<body class="sg-vsf-register-step-1-page">
<section id="pattern-portal-header">
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header ohne Options Row">
<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" data-pattern-part="portal-header-action">
<div class="sg-component-row">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
Login
</button>
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
Registrieren
</button>
</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="true" data-component-part="tab-button" data-component-state="active">Übersicht</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">Features</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">Preise</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">Firma der Woche</button>
</nav>
</div>
</header>
<div class="sg-transparent-card sg-portal-header-pattern-variant__next-element" aria-label="Registriere dich bei ValueStockFinder" data-component="transparent-card">
<h1 class="sg-heading-h1 sg-text-on-dark">Registriere dich bei ValueStockFinder</h1>
</div>
</article>
</section>
<main class="sg-vsf-register-step-1">
<article class="sg-card sg-object-card sg-vsf-register-step-1__card" data-pattern="object-card" aria-label="Registriere dich">
@@ -33,5 +66,38 @@
</article>
</main>
<script src="../scripts/help-icon-overlays.js"></script>
<script>
document.querySelectorAll('.sg-portal-header__tabs').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>
styles/35-layouts-vsf-register-step-1.css
+7 -1
View File
@@ -3,13 +3,19 @@
/* ========================================================= */
.sg-vsf-register-step-1 {
flex: 1;
display: grid;
place-items: center;
min-height: 100vh;
padding: 1vh var(--layout-page-content-inset-inline) 0;
box-sizing: border-box;
}
.sg-vsf-register-step-1-page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.sg-vsf-register-step-1__card {
width: 100%;
max-width: var(--layout-object-card-max-width);