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

Add public page layout two-column variant

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-24 19:50:03 +02:00
parent 2b42e301f0
commit 595cd6ec4e
5 changed files with 117 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -66,6 +66,7 @@
<li><a href="./patterns/card-listen-seite.html">Card Listen Seite</a></li>
<li><a href="./patterns/page-layout-app.html">Page Layout App</a></li>
<li><a href="./patterns/page-layout-public.html">Page Layout Public</a></li>
<li><a href="./patterns/page-layout-public-2-column.html">Page Layout Public 2 Column</a></li>
<li><a href="./patterns/card-listen-fundamentalanalyse-mobile.html">Card Listen Fundamentalanalyse Mobile</a></li>
</ul>
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 sg-page-layout-public-2-column__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>
<p class="sg-body sg-text-on-dark sg-text-layout-pattern__sample">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum.
</p>
</div>
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-page-layout-public__footer-card sg-page-layout-public-2-column__footer-card" data-component="content-card" aria-label="Fusszeile">
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
<p class="sg-body sg-text-layout-pattern__column">
Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im zweispaltigen Layout.
</p>
<p class="sg-body sg-text-layout-pattern__column">
Footer rechts: Platzhaltertext fuer ergaenzende Angaben, rechtliche Hinweise oder sekundäre Footer-Inhalte im gleichen Raster.
</p>
</div>
</div>
</article>
</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>
semantic-tokens-layouts.html
+2
View File
@@ -30,6 +30,8 @@
<tr><td>layout-object-card-shared-width</td><td>auto</td><td>Geteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen.</td></tr>
<tr><td>layout-content-cards-group-gap</td><td>spacing-small</td><td>Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.</td></tr>
<tr><td>layout-card-list-drawer-width</td><td>dimension-card-list-drawer-width</td><td>Breite des ausziehbaren Card-Listenbereichs relativ zum Container.</td></tr>
<tr><td>layout-page-layout-public-2-column-columns</td><td>repeat(2, minmax(0, 1fr))</td><td>Spaltenraster des Layouts <code>Layout – Page Layout Public 2 Column</code>.</td></tr>
<tr><td>layout-page-layout-public-2-column-gap</td><td>spacing-large</td><td>Horizontaler Abstand zwischen den beiden Inhalts-Spalten im Layout <code>Layout – Page Layout Public 2 Column</code>.</td></tr>
</tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Layouts</h3>
styles/01-foundations.css
+2
View File
@@ -195,6 +195,8 @@
--surface-content-block-card-content: var(--color-white);
--radius-picture-full-width: var(--radius-card);
--layout-content-cards-group-gap: var(--spacing-small);
--layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr));
--layout-page-layout-public-2-column-gap: var(--spacing-large);
--surface-card-list-drawer: var(--color-background-purple);
--text-content-block-card-title: var(--color-font-dark);
--text-content-block-card-content: var(--color-font-dark);
styles/37-layouts-page-layout-public.css
+15
View File
@@ -28,12 +28,27 @@ main {
flex: 1;
}
.sg-page-layout-public-2-column__content-mirror {
display: grid;
grid-template-columns: var(--layout-page-layout-public-2-column-columns);
gap: var(--layout-page-layout-public-2-column-gap);
align-items: start;
}
@media (max-width: 48rem) {
.sg-page-layout-public__content-mirror {
width: min(calc(100% - (var(--spacing-small) * 2)), 1100px);
}
.sg-page-layout-public-2-column__content-mirror {
grid-template-columns: 1fr;
}
}
.sg-page-layout-public__footer-card {
margin-top: auto;
}
.sg-page-layout-public-2-column__footer-card {
margin-top: 0;
}