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

Wrap public portal links in basic card

Browse Source
This commit is contained in:
Mathias Gläser
2026-07-07 14:39:41 +02:00
parent 1042c8449f
commit 012cbfcd0e
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/portal-header.html
+6 -2
View File
@@ -69,7 +69,7 @@
</p> </p>
<p class="sg-table-label sg-text-on-dark"> <p class="sg-table-label sg-text-on-dark">
Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Hauptmenüpunkte in einer eigenen Zeile darunter. Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Hauptmenüpunkte in einer eigenen Basic Card darunter.
</p> </p>
<article class="sg-portal-header-pattern-variant" aria-label="Public Portal Header ohne Options Row"> <article class="sg-portal-header-pattern-variant" aria-label="Public Portal Header ohne Options Row">
@@ -92,7 +92,11 @@
<div class="sg-portal-header__main" data-pattern-part="portal-header-main"> <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> <p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">Portalname</p>
</div>
</header>
<article class="sg-card sg-portal-header-pattern-variant__links-card" data-component="basic-card" aria-label="Hauptnavigation">
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
<nav class="sg-portal-header__tabs" aria-label="Hauptnavigation" data-pattern-part="portal-header-navigation"> <nav class="sg-portal-header__tabs" aria-label="Hauptnavigation" data-pattern-part="portal-header-navigation">
<a class="sg-hyperlink" href="#" aria-current="page" data-component="hyperlink">Inhalt 1</a> <a class="sg-hyperlink" href="#" aria-current="page" data-component="hyperlink">Inhalt 1</a>
<a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 2</a> <a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 2</a>
@@ -100,7 +104,7 @@
<a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 4</a> <a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 4</a>
</nav> </nav>
</div> </div>
</header> </article>
<p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark"> <p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark">
Nächstes Element (Abstand nach unten: spacing-large) Nächstes Element (Abstand nach unten: spacing-large)
styles/20-patterns-portal-header.css
+4
View File
@@ -81,6 +81,10 @@
margin-top: var(--spacing-large); margin-top: var(--spacing-large);
} }
.sg-portal-header-pattern-variant__links-card {
margin-top: var(--spacing-small);
}
@media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) { @media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
.sg-portal-header__main { .sg-portal-header__main {
gap: var(--spacing-small) var(--spacing-large); gap: var(--spacing-small) var(--spacing-large);