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

Use public portal header pattern

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-18 11:17:10 +02:00
parent 4ca88808c9
commit 18f3a73a28
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/page-layout-public.html
+18 -18
View File
@@ -11,27 +11,27 @@
<h1 class="sg-main-heading">Layout – Page Layout Public</h1> <h1 class="sg-main-heading">Layout – Page Layout Public</h1>
<main aria-label="Page Layout Public"> <main aria-label="Page Layout Public">
<header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header"> <header class="sg-portal-header sg-portal-header--auth-segment" aria-label="Public Portal Header" data-pattern="portal-header">
<div class="sg-portal-header__main" data-pattern-part="portal-header-main"> <div class="sg-portal-header__auth-row" data-pattern-part="portal-header-action">
<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p> <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>
<div class="sg-portal-header__menu-wrap" data-pattern-part="portal-header-action"> <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">
<div class="sg-tab-button-group" role="tablist" aria-label="Anmeldung" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header"> Registrieren
<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"> </button>
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>
</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"> <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="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">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">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">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">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">Firma der Woche</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> </nav>
</div> </div>
</header> </header>
@@ -137,7 +137,7 @@
<script src="../scripts/help-icon-overlays.js"></script> <script src="../scripts/help-icon-overlays.js"></script>
<script> <script>
document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__menu-wrap .sg-tab-button-group').forEach((group) => { 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) => { group.querySelectorAll('.sg-tab-button').forEach((button) => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => { group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {