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

Add auth segment to public portal header

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-18 10:25:31 +02:00
parent f4632f6543
commit 1552cbf042
2 changed files with 30 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/portal-header.html
+6 -6
View File
@@ -77,11 +77,8 @@
Variante: Public Portal Header ohne Options Row Variante: Public Portal Header ohne Options Row
</p> </p>
<header class="sg-portal-header" aria-label="Public 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">Portalname</p>
<div class="sg-portal-header__menu-wrap" 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"> <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"> <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 Login
@@ -93,6 +90,9 @@
</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">Inhalt 1</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">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 2</button>
@@ -246,7 +246,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) => {
styles/20-patterns-portal-header.css
+16
View File
@@ -20,6 +20,18 @@
background: var(--surface-portal-header); background: var(--surface-portal-header);
} }
.sg-portal-header--auth-segment {
flex-direction: column;
align-items: stretch;
gap: var(--spacing-small);
}
.sg-portal-header--auth-segment .sg-portal-header__auth-row {
display: flex;
justify-content: flex-end;
width: 100%;
}
.sg-portal-header__main { .sg-portal-header__main {
display: grid; display: grid;
flex: 1 1 auto; flex: 1 1 auto;
@@ -49,6 +61,10 @@
justify-self: end; justify-self: end;
} }
.sg-portal-header--auth-segment .sg-portal-header__main {
width: 100%;
}
.sg-portal-header-pattern-variant { .sg-portal-header-pattern-variant {
margin-bottom: var(--spacing-large); margin-bottom: var(--spacing-large);
} }