Compare commits
21 Commits
e4eff07fd0
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
 gitea_admin
|
821b480ecc | ||
|
gitea_admin
|
674fe23c61 | ||
|
gitea_admin
|
499cc25e7e | ||
|
gitea_admin
|
07e4253d36 | ||
|
gitea_admin
|
dd245b178c | ||
|
gitea_admin
|
44dc940851 | ||
|
gitea_admin
|
ee8b2516e5 | ||
|
gitea_admin
|
eaf90df3a2 | ||
|
gitea_admin
|
a277cacf3a | ||
|
gitea_admin
|
3129f02f1d | ||
|
gitea_admin
|
c1d4f6d1e9 | ||
|
gitea_admin
|
818bca5aff | ||
|
gitea_admin
|
c30a3b23f3 | ||
|
gitea_admin
|
0edb9b4038 | ||
|
gitea_admin
|
969da3df9d | ||
|
gitea_admin
|
5a2cf296e6 | ||
|
gitea_admin
|
f7165ddcb4 | ||
|
gitea_admin
|
6af076b3df | ||
|
gitea_admin
|
3cd2ced365 | ||
|
gitea_admin
|
cec14b71f6 | ||
|
gitea_admin
|
93699ed502 |
@@ -155,6 +155,8 @@
|
||||
<tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
|
||||
<tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
|
||||
<tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
|
||||
<tr><td>content-card-margin-top-desktop</td><td>100px</td><td>Oberer Außenabstand der Content Card auf Desktop.</td></tr>
|
||||
<tr><td>content-card-margin-top-mobile</td><td>1rem</td><td>Oberer Außenabstand der Content Card auf Mobile; entspricht spacing-large.</td></tr>
|
||||
<tr><td>object-group-card-min-width</td><td>450px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
|
||||
<tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
|
||||
<tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>
|
||||
|
||||
@@ -62,6 +62,8 @@
|
||||
<h3 class="sg-sub-heading sg-section-h3">Generische Layouts</h3>
|
||||
<ul class="sg-index-list">
|
||||
<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/card-listen-fundamentalanalyse-mobile.html">Card Listen Fundamentalanalyse Mobile</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
@@ -101,15 +101,7 @@
|
||||
</div>
|
||||
|
||||
<div class="sg-transparent-card sg-card-list-page__intro-block" aria-label="Einleitung zur Listenübersicht" data-component="transparent-card">
|
||||
<div class="sg-card-list-page__title-row">
|
||||
<h1 class="sg-heading-h1 sg-text-on-dark sg-card-list-page__title">Listenübersicht</h1>
|
||||
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="layout-card-list-page">
|
||||
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext zur Listenübersicht anzeigen" data-component-part="help-trigger">?</button>
|
||||
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
|
||||
Hilfe zur Listenansicht und zu den Filteroptionen.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="sg-heading-h1 sg-text-on-dark">Listenübersicht</h1>
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">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. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -41,7 +41,51 @@
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card" aria-hidden="true"></section>
|
||||
<section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" data-left-navigation-content-heading>Übersicht</h2>
|
||||
<p class="sg-body sg-left-navigation-pattern__content-text">
|
||||
Zeile 1: Überblick über die aktuelle Navigation.<br>
|
||||
Zeile 2: Die Inhalte orientieren sich am aktiven Menüpunkt.<br>
|
||||
Zeile 3: Jede Auswahl aktualisiert die Überschrift.<br>
|
||||
Zeile 4: Die Content-Card bleibt optisch eigenständig.<br>
|
||||
Zeile 5: Der Aufbau folgt dem linken Navigationsbereich.<br>
|
||||
Zeile 6: Die Breite bleibt flexibel innerhalb des Layouts.<br>
|
||||
Zeile 7: Lange Inhalte werden im Card-Rahmen geführt.<br>
|
||||
Zeile 8: Der Text dient als Platzhalter für spätere Inhalte.<br>
|
||||
Zeile 9: Die Darstellung bleibt auf Desktop und Mobile stabil.<br>
|
||||
Zeile 10: Die Navigation links steuert den sichtbaren Zustand.<br>
|
||||
Zeile 11: Der aktive Punkt ist visuell hervorgehoben.<br>
|
||||
Zeile 12: Inaktive Punkte bleiben als klare Auswahloptionen sichtbar.<br>
|
||||
Zeile 13: Die Content-Card reagiert auf den ausgewählten Eintrag.<br>
|
||||
Zeile 14: Die Überschrift übernimmt den Namen des Menüpunkts.<br>
|
||||
Zeile 15: Der Text kann später durch Fachinhalte ersetzt werden.<br>
|
||||
Zeile 16: Die Gruppe bleibt als zusammenhängender Bereich lesbar.<br>
|
||||
Zeile 17: Kartenabstände folgen den vorhandenen Styleguide-Tokens.<br>
|
||||
Zeile 18: Keine lokalen Sonderregeln sind für den Demo-Text nötig.<br>
|
||||
Zeile 19: Die Struktur bleibt bewusst einfach und nachvollziehbar.<br>
|
||||
Zeile 20: Das Layout zeigt Navigation und Inhalt nebeneinander.<br>
|
||||
Zeile 21: Der linke Bereich bleibt auf die Navigation fokussiert.<br>
|
||||
Zeile 22: Der rechte Bereich zeigt den zugehörigen Inhalt.<br>
|
||||
Zeile 23: Der Text dient als Füllmaterial für die Layoutprüfung.<br>
|
||||
Zeile 24: Die Card-Höhe passt sich dem vorhandenen Inhalt an.<br>
|
||||
Zeile 25: Scrollverhalten ist in diesem Demo-Zustand nicht nötig.<br>
|
||||
Zeile 26: Die Darstellung bleibt ohne zusätzliche Interaktion verständlich.<br>
|
||||
Zeile 27: Weitere Inhalte lassen sich später ergänzen oder ersetzen.<br>
|
||||
Zeile 28: Die Auswahl folgt weiterhin dem Tab-Button-Verhalten.<br>
|
||||
Zeile 29: Visuelle Konsistenz hat Vorrang vor dekorativen Effekten.<br>
|
||||
Zeile 30: Der Demo-Text bleibt neutral und fachlich unaufgeladen.<br>
|
||||
Zeile 31: Jede Zeile stützt die Prüfung der vertikalen Kartengröße.<br>
|
||||
Zeile 32: Der Content-Bereich ist damit klar als gefüllte Fläche erkennbar.<br>
|
||||
Zeile 33: Der Text nutzt die vorhandenen Typografie-Tokens.<br>
|
||||
Zeile 34: Die Lesbarkeit bleibt auf hellem Inhaltshintergrund hoch.<br>
|
||||
Zeile 35: Die Spaltenlogik wird durch den Text noch deutlicher.<br>
|
||||
Zeile 36: Das Beispiel unterstützt die Wahrnehmung des Pattern-Rahmens.<br>
|
||||
Zeile 37: Der Inhalt bleibt austauschbar und ohne Geschäftslogik.<br>
|
||||
Zeile 38: Die Group Card dient als Container für den Demo-Inhalt.<br>
|
||||
Zeile 39: Das Muster zeigt die vorgesehene Struktur des Portals.<br>
|
||||
Zeile 40: Die finale Zeile schließt den Demo-Block sauber ab.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -50,6 +94,7 @@
|
||||
const mediaQuery = window.matchMedia('(max-width: 767px)');
|
||||
const toggle = document.querySelector('[data-left-navigation-toggle]');
|
||||
const menu = document.getElementById('left-navigation-menu');
|
||||
const contentHeading = document.querySelector('[data-left-navigation-content-heading]');
|
||||
|
||||
if (!toggle || !menu) {
|
||||
return;
|
||||
@@ -64,6 +109,14 @@
|
||||
toggle.classList.remove('sg-button--inactive');
|
||||
};
|
||||
|
||||
const setContentHeading = (button) => {
|
||||
if (!contentHeading || !button) {
|
||||
return;
|
||||
}
|
||||
|
||||
contentHeading.textContent = button.textContent.trim();
|
||||
};
|
||||
|
||||
const syncMode = () => {
|
||||
if (mediaQuery.matches) {
|
||||
if (toggle.getAttribute('aria-expanded') !== 'true' && toggle.getAttribute('aria-expanded') !== 'false') {
|
||||
@@ -92,9 +145,12 @@
|
||||
menu.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
|
||||
otherButton.setAttribute('aria-selected', String(otherButton === button));
|
||||
});
|
||||
|
||||
setContentHeading(button);
|
||||
});
|
||||
});
|
||||
|
||||
setContentHeading(menu.querySelector('.sg-tab-button[aria-selected="true"]'));
|
||||
syncMode();
|
||||
mediaQuery.addEventListener('change', syncMode);
|
||||
})();
|
||||
|
||||
@@ -104,6 +104,20 @@
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<h2 class="sg-sub-heading sg-section-h2">Object Card Content Basic</h2>
|
||||
<p class="sg-preview-label">Pattern: Object Card Content Basic</p>
|
||||
<p class="sg-body">Hinweis: Diese Variante ist für spezifische Inhalte gedacht, die eine Nutzerinteraktion erfordern, zum Beispiel Zustimmungen oder Freigaben. Im Styleguide wird hier nur das Card-Layout gezeigt.</p>
|
||||
|
||||
<article class="sg-card sg-object-card sg-object-card--content-basic sg-object-card-content-basic" data-pattern="object-card-content-basic" aria-label="Objekt Card Content Basic">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-content-basic-header">
|
||||
<div class="sg-strong">Zustimmung zu Geschäftsbedingungen</div>
|
||||
</header>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content-basic-content">
|
||||
<p class="sg-body">Bevor Sie fortfahren, prüfen Sie bitte die Inhalte der Geschäftsbedingungen und bestätigen Sie die Zustimmung im Zielsystem.</p>
|
||||
<p class="sg-body">Die Karte ist bewusst kompakt gehalten und für lesbare, interaktionspflichtige Inhalte auf Desktop mittig ausgerichtet.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<h2 class="sg-sub-heading sg-section-h2">Object Card variable height</h2>
|
||||
<p class="sg-preview-label">Pattern: Object Card variable height</p>
|
||||
<p class="sg-body">Hinweis: In dieser Variante ist die komplette Karte in der Höhe flexibel. Die Segmenthöhen ergeben sich direkt aus dem Inhalt, dadurch sind die Karten im Grid bewusst unterschiedlich hoch.</p>
|
||||
|
||||
@@ -0,0 +1,312 @@
|
||||
<!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 App</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – Page Layout App</h1>
|
||||
|
||||
<main aria-label="Page Layout App">
|
||||
<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 sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
|
||||
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||||
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||||
</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="false" data-component-part="tab-button" data-component-state="inactive">Updates</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">Titel</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">Gruppen</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">Listen</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
|
||||
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">
|
||||
Sortierung
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 1</span>
|
||||
</li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 2</span>
|
||||
</li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 3</span>
|
||||
</li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 4</span>
|
||||
</li>
|
||||
<li class="sg-pulldown-option sg-pulldown-option--disabled">
|
||||
<span>Menüpunkt 5</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Region" data-component-part="pulldown-trigger" data-label-base="Region">
|
||||
Region
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Region" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Regionsoptionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 1</span>
|
||||
</li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 2</span>
|
||||
</li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 3</span>
|
||||
</li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||||
<span>Menüpunkt 4</span>
|
||||
</li>
|
||||
<li class="sg-pulldown-option sg-pulldown-option--disabled">
|
||||
<span>Menüpunkt 5</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-search-field-row">
|
||||
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<input
|
||||
class="sg-interaction-element sg-input-single-line"
|
||||
type="text"
|
||||
placeholder="Suche"
|
||||
aria-label="Suche"
|
||||
>
|
||||
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
|
||||
</span>
|
||||
<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
|
||||
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
|
||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
|
||||
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
|
||||
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
|
||||
</span>
|
||||
|
||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
|
||||
</button>
|
||||
|
||||
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">
|
||||
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button>
|
||||
|
||||
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-transparent-card sg-page-layout-app__heading-block" aria-label="H1 Bereich" data-component="transparent-card">
|
||||
<h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">
|
||||
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>
|
||||
|
||||
<div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
|
||||
<div class="sg-group-card__header-row">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Seiteninhalt</h2>
|
||||
</div>
|
||||
|
||||
<article class="sg-card" data-component="card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Inhalt</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
Zeile 01<br>
|
||||
Zeile 02<br>
|
||||
Zeile 03<br>
|
||||
Zeile 04<br>
|
||||
Zeile 05<br>
|
||||
Zeile 06<br>
|
||||
Zeile 07<br>
|
||||
Zeile 08<br>
|
||||
Zeile 09<br>
|
||||
Zeile 10<br>
|
||||
Zeile 11<br>
|
||||
Zeile 12<br>
|
||||
Zeile 13<br>
|
||||
Zeile 14<br>
|
||||
Zeile 15<br>
|
||||
Zeile 16<br>
|
||||
Zeile 17<br>
|
||||
Zeile 18<br>
|
||||
Zeile 19<br>
|
||||
Zeile 20<br>
|
||||
Zeile 21<br>
|
||||
Zeile 22<br>
|
||||
Zeile 23<br>
|
||||
Zeile 24<br>
|
||||
Zeile 25<br>
|
||||
Zeile 26<br>
|
||||
Zeile 27<br>
|
||||
Zeile 28<br>
|
||||
Zeile 29<br>
|
||||
Zeile 30
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<script>
|
||||
document.querySelectorAll('.sg-portal-header__tabs, .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');
|
||||
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
|
||||
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));
|
||||
});
|
||||
});
|
||||
|
||||
const updatePulldownSelectionState = (demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
|
||||
|
||||
if (!trigger || selectableOptions.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedCount = Array.from(selectableOptions).filter((option) => {
|
||||
return option.getAttribute('aria-checked') === 'true';
|
||||
}).length;
|
||||
|
||||
selectableOptions.forEach((option) => {
|
||||
const optionRow = option.closest('.sg-pulldown-option');
|
||||
if (!optionRow) {
|
||||
return;
|
||||
}
|
||||
|
||||
optionRow.classList.toggle(
|
||||
'sg-pulldown-option--selected',
|
||||
option.getAttribute('aria-checked') === 'true'
|
||||
);
|
||||
});
|
||||
|
||||
const labelBase = trigger.dataset.labelBase || 'Auswahl';
|
||||
|
||||
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
|
||||
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
|
||||
trigger.classList.toggle('sg-form-active', selectedCount > 0);
|
||||
trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
||||
demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
||||
trigger.setAttribute(
|
||||
'aria-label',
|
||||
selectedCount > 0 ? `Pulldown ${labelBase} mit aktiver Auswahl` : `Pulldown ${labelBase} ohne aktive Auswahl`
|
||||
);
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
|
||||
if (!trigger) {
|
||||
return;
|
||||
}
|
||||
|
||||
trigger.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const nextState = demo.dataset.open !== 'true';
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
|
||||
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
otherDemo.dataset.open = 'false';
|
||||
if (otherTrigger) {
|
||||
otherTrigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
demo.dataset.align = 'left';
|
||||
demo.dataset.open = String(nextState);
|
||||
trigger.setAttribute('aria-expanded', String(nextState));
|
||||
updatePulldownSelectionState(demo);
|
||||
});
|
||||
|
||||
demo.querySelectorAll('[data-pulldown-option]').forEach((option) => {
|
||||
option.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const nextChecked = option.getAttribute('aria-checked') !== 'true';
|
||||
option.setAttribute('aria-checked', String(nextChecked));
|
||||
updatePulldownSelectionState(demo);
|
||||
});
|
||||
});
|
||||
|
||||
updatePulldownSelectionState(demo);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
|
||||
toggle.addEventListener('click', () => {
|
||||
const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
|
||||
toggle.dataset.active = nextState;
|
||||
toggle.dataset.componentState = nextState;
|
||||
toggle.setAttribute(
|
||||
'aria-label',
|
||||
`Modus Schieber global: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
|
||||
);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!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</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – Page Layout Public</h1>
|
||||
|
||||
<main aria-label="Page Layout Public">
|
||||
<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">
|
||||
<div class="sg-transparent-card sg-page-layout-public__heading-block" aria-label="H1 Bereich" data-component="transparent-card">
|
||||
<h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
|
||||
<p class="sg-body 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>
|
||||
|
||||
<div class="sg-text-layout-pattern__preview-surface sg-page-layout-public__footer-card" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig mobil zweispaltig">
|
||||
<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>
|
||||
</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>
|
||||
@@ -59,6 +59,55 @@
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<section id="pattern-public-portal-header">
|
||||
<h1 class="sg-main-heading">Pattern – Public Portal Header</h1>
|
||||
|
||||
<p class="sg-preview-label">Pattern: Public Portal Header</p>
|
||||
|
||||
<p class="sg-table-label sg-text-on-dark">
|
||||
Desktop/Tablet: Header skaliert über die verfügbare Breite.
|
||||
</p>
|
||||
|
||||
<p class="sg-table-label sg-text-on-dark">
|
||||
Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Navigationstasten in einer eigenen Zeile darunter.
|
||||
</p>
|
||||
|
||||
<article class="sg-portal-header-pattern-variant" aria-label="Public Portal Header ohne Options Row">
|
||||
<p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
|
||||
Variante: Public Portal Header ohne Options Row
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
<p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark">
|
||||
Nächstes Element (Abstand nach unten: spacing-large)
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header mit Options Row">
|
||||
<p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
|
||||
Variante: Portal Header mit Options Row
|
||||
@@ -197,7 +246,7 @@
|
||||
|
||||
<script src="../scripts/help-icon-overlays.js"></script>
|
||||
<script>
|
||||
document.querySelectorAll('.sg-portal-header__tabs').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) => {
|
||||
button.addEventListener('click', () => {
|
||||
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
|
||||
|
||||
@@ -7,106 +7,16 @@
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Layout – VSF List Detailseite</h1>
|
||||
|
||||
<section class="sg-vsf-list-detail-page" aria-label="VSF List Detailseite">
|
||||
<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 sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
|
||||
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||||
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
<span class="sg-sandwich-button__line"></span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||||
</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="false" data-component-part="tab-button" data-component-state="inactive">Updates</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">Titel</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">Gruppen</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">Listen</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
|
||||
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">
|
||||
Sortierung
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 1</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 2</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 3</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 4</span></li>
|
||||
<li class="sg-pulldown-option sg-pulldown-option--disabled"><span>Menüpunkt 5</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Region" data-component-part="pulldown-trigger" data-label-base="Region">
|
||||
Region
|
||||
</button>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Region" data-component-part="pulldown-panel">
|
||||
<ul class="sg-pulldown-option-list" aria-label="Regionsoptionen">
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 1</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 2</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 3</span></li>
|
||||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Menüpunkt 4</span></li>
|
||||
<li class="sg-pulldown-option sg-pulldown-option--disabled"><span>Menüpunkt 5</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-search-field-row">
|
||||
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
|
||||
<input class="sg-interaction-element sg-input-single-line" type="text" placeholder="Suche" aria-label="Suche">
|
||||
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
|
||||
</span>
|
||||
<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
|
||||
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
|
||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
|
||||
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
|
||||
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
|
||||
</span>
|
||||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
|
||||
</button>
|
||||
|
||||
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">
|
||||
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button>
|
||||
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="sg-tab-button-group sg-vsf-list-detail-page__mobile-tabs" role="tablist" aria-label="Tasten Navigation gross" data-component="tab-navigation" data-component-size="large">
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="vsf-list-detail-panel-meldungen" id="vsf-list-detail-tab-meldungen" data-component-part="tab-button" data-vsf-list-detail-tab="meldungen">Meldungen</button>
|
||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-list-detail-panel-unternehmen" id="vsf-list-detail-tab-unternehmen" data-component-part="tab-button" data-vsf-list-detail-tab="unternehmen">Unternehmen</button>
|
||||
</div>
|
||||
|
||||
<div class="sg-transparent-card sg-vsf-list-detail-page__intro-block" aria-label="Einleitung zur VSF Listenübersicht" data-component="transparent-card">
|
||||
<h1 class="sg-heading-h1 sg-vsf-list-detail-page__title">TITEL DER LISTE</h1>
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">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. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-vsf-list-detail-page__content">
|
||||
<aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen">
|
||||
<div class="sg-vsf-list-detail-page__content" data-vsf-list-detail-active="meldungen">
|
||||
<aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen" role="tabpanel" aria-labelledby="vsf-list-detail-tab-meldungen" id="vsf-list-detail-panel-meldungen" data-vsf-list-detail-panel="meldungen">
|
||||
<div class="sg-delete-confirmation-pattern sg-vsf-list-detail-page__meldungen-overlay-pattern">
|
||||
<div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false">
|
||||
<div class="sg-group-card sg-delete-confirmation-pattern__target" data-component="group-card">
|
||||
@@ -198,7 +108,7 @@
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="sg-vsf-list-detail-page__right-column" aria-label="Objektkarten">
|
||||
<div class="sg-vsf-list-detail-page__right-column" aria-label="Objektkarten" role="tabpanel" aria-labelledby="vsf-list-detail-tab-unternehmen" id="vsf-list-detail-panel-unternehmen" data-vsf-list-detail-panel="unternehmen">
|
||||
<div class="sg-group-card" data-component="group-card">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Unternehmen</h2>
|
||||
<div class="sg-object-card-grid" aria-label="Pattern – Object Card Liste">
|
||||
@@ -327,17 +237,58 @@
|
||||
});
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
|
||||
group.querySelectorAll('.sg-tab-button').forEach((button) => {
|
||||
const vsfListDetailPage = document.querySelector('.sg-vsf-list-detail-page');
|
||||
const vsfListDetailMobileTabs = document.querySelector('.sg-vsf-list-detail-page__mobile-tabs');
|
||||
const vsfListDetailButtons = vsfListDetailMobileTabs ? Array.from(vsfListDetailMobileTabs.querySelectorAll('.sg-tab-button')) : [];
|
||||
const vsfListDetailPanels = {
|
||||
meldungen: document.querySelector('[data-vsf-list-detail-panel="meldungen"]'),
|
||||
unternehmen: document.querySelector('[data-vsf-list-detail-panel="unternehmen"]'),
|
||||
};
|
||||
const vsfListDetailMobileQuery = window.matchMedia('(max-width: 767px)');
|
||||
|
||||
const syncVsfListDetailMobileState = (activeKey) => {
|
||||
const nextActiveKey = activeKey === 'unternehmen' ? 'unternehmen' : 'meldungen';
|
||||
|
||||
if (vsfListDetailPage) {
|
||||
vsfListDetailPage.dataset.vsfListDetailActive = nextActiveKey;
|
||||
}
|
||||
|
||||
vsfListDetailButtons.forEach((button) => {
|
||||
const isActive = button.dataset.vsfListDetailTab === nextActiveKey;
|
||||
button.setAttribute('aria-selected', String(isActive));
|
||||
button.dataset.componentState = isActive ? 'active' : 'inactive';
|
||||
});
|
||||
|
||||
const isMobile = vsfListDetailMobileQuery.matches;
|
||||
Object.entries(vsfListDetailPanels).forEach(([key, panel]) => {
|
||||
if (!panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
panel.hidden = isMobile && key !== nextActiveKey;
|
||||
panel.setAttribute('aria-hidden', String(isMobile && key !== nextActiveKey));
|
||||
});
|
||||
};
|
||||
|
||||
if (vsfListDetailMobileTabs) {
|
||||
vsfListDetailButtons.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';
|
||||
});
|
||||
syncVsfListDetailMobileState(button.dataset.vsfListDetailTab || 'meldungen');
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const handleVsfListDetailMobileModeChange = () => {
|
||||
syncVsfListDetailMobileState(vsfListDetailPage?.dataset.vsfListDetailActive || 'meldungen');
|
||||
};
|
||||
|
||||
if (typeof vsfListDetailMobileQuery.addEventListener === 'function') {
|
||||
vsfListDetailMobileQuery.addEventListener('change', handleVsfListDetailMobileModeChange);
|
||||
} else if (typeof vsfListDetailMobileQuery.addListener === 'function') {
|
||||
vsfListDetailMobileQuery.addListener(handleVsfListDetailMobileModeChange);
|
||||
}
|
||||
|
||||
syncVsfListDetailMobileState(vsfListDetailPage?.dataset.vsfListDetailActive || 'meldungen');
|
||||
|
||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||
const button = wrap.querySelector('.sg-sandwich-button');
|
||||
|
||||
@@ -56,6 +56,8 @@
|
||||
<tr><td>layout-object-group-card-min-width</td><td>dimension-object-group-card-min-width</td><td>Mindestbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
|
||||
<tr><td>layout-object-group-card-max-width</td><td>dimension-object-group-card-max-width</td><td>Maximalbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
|
||||
<tr><td>layout-object-group-card-height</td><td>dimension-object-group-card-height</td><td>Fixe Desktop-Höhe der Karteninstanzen im Pattern Object Group Card.</td></tr>
|
||||
<tr><td>layout-content-card-margin-top-desktop</td><td>dimension-content-card-margin-top-desktop</td><td>Oberer Außenabstand der Content Card auf Desktop.</td></tr>
|
||||
<tr><td>layout-content-card-margin-top-mobile</td><td>dimension-content-card-margin-top-mobile</td><td>Oberer Außenabstand der Content Card auf Mobile.</td></tr>
|
||||
<tr><td>layout-notifications-text-segment-fixed-height</td><td>150px</td><td>Fixe Desktop-Höhe des ersten Text-Segments im Pattern Notifications; auf Mobile wird die Höhe wieder auf auto gesetzt.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -13,6 +13,8 @@
|
||||
@import "./styles/28-patterns-notifications.css";
|
||||
@import "./styles/29-patterns-left-navigation.css";
|
||||
@import "./styles/30-layouts-card-list-page.css";
|
||||
@import "./styles/36-layouts-page-layout-app.css";
|
||||
@import "./styles/37-layouts-page-layout-public.css";
|
||||
@import "./styles/33-layouts-vsf-list-detailseite.css";
|
||||
@import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css";
|
||||
@import "./styles/35-layouts-vsf-register-step-1.css";
|
||||
|
||||
@@ -172,6 +172,8 @@
|
||||
--layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
|
||||
--layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
|
||||
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
|
||||
--layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
|
||||
--layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
|
||||
--dimension-notifications-card-min-width: 445px;
|
||||
--layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
|
||||
--layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
|
||||
@@ -273,6 +275,8 @@
|
||||
--dimension-object-card-mobile-width: 100%;
|
||||
--dimension-object-card-mobile-height: auto;
|
||||
--dimension-object-card-desktop-breakpoint: 768px;
|
||||
--dimension-content-card-margin-top-desktop: 100px;
|
||||
--dimension-content-card-margin-top-mobile: 1rem;
|
||||
--dimension-object-group-card-min-width: 450px;
|
||||
--dimension-object-group-card-max-width: 650px;
|
||||
--dimension-object-group-card-height: 700px;
|
||||
|
||||
@@ -383,6 +383,7 @@
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-small);
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
max-width: var(--layout-form-input-field-max-width);
|
||||
}
|
||||
|
||||
|
||||
@@ -20,6 +20,18 @@
|
||||
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 {
|
||||
display: grid;
|
||||
flex: 1 1 auto;
|
||||
@@ -49,6 +61,10 @@
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.sg-portal-header--auth-segment .sg-portal-header__main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-portal-header-pattern-variant {
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
@@ -70,3 +70,25 @@
|
||||
.sg-object-card--variable-height {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-object-card--content-basic {
|
||||
width: min(70vw, var(--layout-object-card-max-width));
|
||||
margin-inline: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-object-card-content-basic {
|
||||
margin-top: var(--layout-content-card-margin-top-desktop);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-object-card--content-basic {
|
||||
width: var(--layout-object-card-mobile-width);
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.sg-object-card-content-basic {
|
||||
margin-top: var(--layout-content-card-margin-top-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
.sg-form-sections-card__actions-segment {
|
||||
margin-top: calc(var(--spacing-large) - var(--card-segment-padding-vertical));
|
||||
margin-top: var(--spacing-large);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
.sg-left-navigation-pattern__layout {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
@@ -44,9 +44,14 @@
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.sg-left-navigation-pattern__group-card--content .sg-group-card__heading {
|
||||
flex: 0 1 auto;
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sg-left-navigation-pattern__group-card--navigation .sg-tab-button-group[data-component-variant="linksmenu-items"] {
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,21 +7,6 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 220ms ease;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer-backdrop[data-open="true"] {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -75,25 +60,12 @@
|
||||
}
|
||||
|
||||
.sg-card-list-page > .sg-options-row {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-card-list-page > .sg-card-list-page__intro-block {
|
||||
margin-top: calc(var(--spacing-large) - 0.5rem);
|
||||
margin-top: var(--layout-options-row-margin-top);
|
||||
}
|
||||
|
||||
.sg-card-list-page__intro-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-card-list-page__title-row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-small);
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin-top: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
|
||||
@@ -11,34 +11,16 @@
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page > .sg-options-row {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page > .sg-vsf-list-detail-page__intro-block {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__intro-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__intro-block .sg-vsf-list-detail-page__title,
|
||||
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
color: var(--color-font-light);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
width: min(60vw, 100%);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__content {
|
||||
display: flex;
|
||||
gap: var(--spacing-small);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__mobile-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column {
|
||||
width: 30%;
|
||||
min-width: 30%;
|
||||
@@ -78,12 +60,15 @@
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
.sg-vsf-list-detail-page__mobile-tabs {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__content {
|
||||
display: block;
|
||||
margin-top: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column {
|
||||
@@ -95,9 +80,12 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column .sg-group-card,
|
||||
.sg-vsf-list-detail-page__right-column .sg-group-card {
|
||||
margin-bottom: var(--spacing-large);
|
||||
.sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel][hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__mobile-toggle {
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
/* ========================================================= */
|
||||
/* Layouts: Page Layout App */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-page-layout-app__heading-block {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/* ========================================================= */
|
||||
/* Layouts: Page Layout Public */
|
||||
/* ========================================================= */
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-page-layout-public__heading-block {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-page-layout-public__content-mirror {
|
||||
width: 70vw;
|
||||
max-width: 1100px;
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sg-page-layout-public__footer-card {
|
||||
margin-top: auto;
|
||||
background: var(--surface-card-group);
|
||||
}
|
||||
@@ -130,7 +130,9 @@ function auth_render_bestellungen_large_table(array $bestellungenTable): string
|
||||
$html[] = '<div class="sg-large-table__cell" role="cell">';
|
||||
$html[] = '<a class="sg-hyperlink" href="#" aria-haspopup="dialog" aria-expanded="false" data-order-drawer-open="true" data-order-id="' . (int) ($row['id'] ?? 0) . '" data-order-number="' . auth_escape_html($orderNumber) . '" data-order-date="' . auth_escape_html($orderDate) . '" data-order-total="' . auth_escape_html($totalAmount) . '" data-order-first-name="' . auth_escape_html($firstName) . '" data-order-last-name="' . auth_escape_html($lastName) . '" data-order-street="' . auth_escape_html($street) . '" data-order-house-number="' . auth_escape_html($houseNumber) . '" data-order-zip="' . auth_escape_html($zip) . '" data-order-city="' . auth_escape_html($city) . '" data-order-country="' . auth_escape_html($country) . '">' . auth_escape_html($orderNumber) . '</a>';
|
||||
$html[] = '</div>';
|
||||
$html[] = '<div class="sg-large-table__cell" role="cell">' . auth_escape_html($name) . '</div>';
|
||||
$html[] = '<div class="sg-large-table__cell" role="cell">';
|
||||
$html[] = '<a class="sg-hyperlink" href="#" aria-haspopup="dialog" aria-expanded="false" data-order-drawer-open="true" data-order-id="' . (int) ($row['id'] ?? 0) . '" data-order-number="' . auth_escape_html($orderNumber) . '" data-order-date="' . auth_escape_html($orderDate) . '" data-order-total="' . auth_escape_html($totalAmount) . '" data-order-first-name="' . auth_escape_html($firstName) . '" data-order-last-name="' . auth_escape_html($lastName) . '" data-order-street="' . auth_escape_html($street) . '" data-order-house-number="' . auth_escape_html($houseNumber) . '" data-order-zip="' . auth_escape_html($zip) . '" data-order-city="' . auth_escape_html($city) . '" data-order-country="' . auth_escape_html($country) . '">' . auth_escape_html($name) . '</a>';
|
||||
$html[] = '</div>';
|
||||
$html[] = '<div class="sg-large-table__cell sg-large-table__cell--amount" role="cell">' . auth_escape_html($totalAmount) . '</div>';
|
||||
$html[] = '</div>';
|
||||
}
|
||||
@@ -549,6 +551,10 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " const currentTable = getTable();";
|
||||
echo " return parseInt((currentTable ? currentTable.dataset.bestellungenPageSize : null) || '20', 10);";
|
||||
echo " };";
|
||||
echo " const isMobileDetailMode = () => window.matchMedia('(max-width: 767px)').matches;";
|
||||
echo " const escapeHtml = (value) => String(value ?? '').replace(/[&<>\"']/g, (character) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' }[character] || character));";
|
||||
echo " let bestellungenMobileDetailHost = null;";
|
||||
echo " let bestellungenDetailOpen = false;";
|
||||
echo " const syncSearchState = () => {";
|
||||
echo " const input = getSearchInput();";
|
||||
echo " const wrap = getSearchWrap();";
|
||||
@@ -557,6 +563,45 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " wrap.setAttribute('data-has-value', String(hasValue));";
|
||||
echo " wrap.dataset.componentState = hasValue ? 'active' : 'inactive-selectable';";
|
||||
echo " };";
|
||||
echo " const renderMobileDetail = (trigger) => {";
|
||||
echo " const orderNumber = trigger.dataset.orderNumber || '';";
|
||||
echo " const orderDate = trigger.dataset.orderDate || '';";
|
||||
echo " const total = trigger.dataset.orderTotal || '';";
|
||||
echo " const street = trigger.dataset.orderStreet || '';";
|
||||
echo " const houseNumber = trigger.dataset.orderHouseNumber || '';";
|
||||
echo " const zip = trigger.dataset.orderZip || '';";
|
||||
echo " const city = trigger.dataset.orderCity || '';";
|
||||
echo " const country = trigger.dataset.orderCountry || '';";
|
||||
echo " const streetLine = [street, houseNumber].filter((part) => part && part.length > 0).join(' ').trim();";
|
||||
echo " const cityLine = [zip, city].filter((part) => part && part.length > 0).join(' ').trim();";
|
||||
echo " return [";
|
||||
echo " '<div class=\"sg-bestellungen-mobile-detail-host\" data-bestellungen-mobile-detail-host=\"true\">',";
|
||||
echo " '<div class=\"sg-navigation-card-layout\">',";
|
||||
echo " '<div class=\"sg-navigation-card-block\">',";
|
||||
echo " '<article class=\"sg-card\" data-component=\"card\" data-pattern=\"navigation-card\" aria-label=\"Navigations-Card\">',";
|
||||
echo " '<div class=\"sg-card-segment sg-card-segment--body\" data-component-part=\"card-body\" data-pattern-part=\"navigation-card-segment\">',";
|
||||
echo " '<div class=\"sg-navigation-card-center\">',";
|
||||
echo " '<button class=\"sg-interaction-element sg-hyperlink\" type=\"button\" data-bestellungen-detail-back>schliessen</button>',";
|
||||
echo " '</div>',";
|
||||
echo " '</div>',";
|
||||
echo " '</article>',";
|
||||
echo " '</div>',";
|
||||
echo " '</div>',";
|
||||
echo " '<article class=\"sg-card sg-vsf-drawer-card\" data-component=\"card\" data-pattern=\"card\" aria-label=\"Bestell-Details\">',";
|
||||
echo " '<div class=\"sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content\">',";
|
||||
echo " '<p class=\"sg-body\"><strong>Bestellnummer:</strong> <span>' + escapeHtml(orderNumber) + '</span></p>',";
|
||||
echo " '<p class=\"sg-body\"><strong>Bestelldatum:</strong> <span>' + escapeHtml(orderDate) + '</span></p>',";
|
||||
echo " '<p class=\"sg-body\"><strong>Lieferadresse:</strong></p>',";
|
||||
echo " '<p class=\"sg-body\">' + escapeHtml(streetLine) + '</p>',";
|
||||
echo " '<p class=\"sg-body\">' + escapeHtml(cityLine) + '</p>',";
|
||||
echo " '<p class=\"sg-body\">' + escapeHtml(country) + '</p>',";
|
||||
echo " '<p class=\"sg-body\"><strong>Gesamtsumme:</strong> <span>' + escapeHtml(total) + '</span></p>',";
|
||||
echo " '<p class=\"sg-body\">Detailinhalt wird noch definiert.</p>',";
|
||||
echo " '</div>',";
|
||||
echo " '</article>',";
|
||||
echo " '</div>'";
|
||||
echo " ].join('');";
|
||||
echo " };";
|
||||
echo " const getDrawer = () => contentRoot.querySelector('[data-bestellungen-drawer]');";
|
||||
echo " const getDrawerBackdrop = () => contentRoot.querySelector('[data-bestellungen-drawer-backdrop]');";
|
||||
echo " const setDrawerState = (open) => {";
|
||||
@@ -577,6 +622,10 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " const openDrawer = (trigger) => {";
|
||||
echo " const drawer = getDrawer();";
|
||||
echo " if (!drawer) { return; }";
|
||||
echo " if (isMobileDetailMode()) {";
|
||||
echo " openMobileDetail(trigger);";
|
||||
echo " return;";
|
||||
echo " }";
|
||||
echo " const drawerTitle = drawer.querySelector('[data-order-drawer-title]');";
|
||||
echo " const drawerOrderNumber = drawer.querySelector('[data-order-drawer-order-number]');";
|
||||
echo " const drawerOrderDate = drawer.querySelector('[data-order-drawer-order-date]');";
|
||||
@@ -606,6 +655,35 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " button.setAttribute('aria-expanded', String(button === trigger));";
|
||||
echo " });";
|
||||
echo " };";
|
||||
echo " const restoreBestellungenList = () => {";
|
||||
echo " if (bestellungenMobileDetailHost && bestellungenMobileDetailHost.parentNode) {";
|
||||
echo " bestellungenMobileDetailHost.parentNode.removeChild(bestellungenMobileDetailHost);";
|
||||
echo " }";
|
||||
echo " bestellungenMobileDetailHost = null;";
|
||||
echo " document.body.classList.remove('sg-bestellungen-mobile-detail-open');";
|
||||
echo " bestellungenDetailOpen = false;";
|
||||
echo " bindTable();";
|
||||
echo " };";
|
||||
echo " const openMobileDetail = (trigger) => {";
|
||||
echo " restoreBestellungenList();";
|
||||
echo " const host = document.createElement('div');";
|
||||
echo " host.innerHTML = renderMobileDetail(trigger);";
|
||||
echo " bestellungenMobileDetailHost = host.firstElementChild;";
|
||||
echo " if (bestellungenMobileDetailHost) {";
|
||||
echo " document.body.appendChild(bestellungenMobileDetailHost);";
|
||||
echo " document.body.classList.add('sg-bestellungen-mobile-detail-open');";
|
||||
echo " }";
|
||||
echo " bestellungenDetailOpen = true;";
|
||||
echo " window.history.pushState({ bestellungenView: 'detail', orderId: trigger.dataset.orderId || '' }, '', window.location.href);";
|
||||
echo " };";
|
||||
echo " const closeMobileDetail = () => {";
|
||||
echo " if (!bestellungenDetailOpen) { return; }";
|
||||
echo " if (window.history.state && window.history.state.bestellungenView === 'detail') {";
|
||||
echo " window.history.back();";
|
||||
echo " return;";
|
||||
echo " }";
|
||||
echo " restoreBestellungenList();";
|
||||
echo " };";
|
||||
echo " const buildUrl = (params) => {";
|
||||
echo " const url = new URL(window.location.href);";
|
||||
echo " url.hash = '';";
|
||||
@@ -629,6 +707,12 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " return false;";
|
||||
echo " }";
|
||||
echo " contentRoot.innerHTML = fragment.innerHTML;";
|
||||
echo " if (bestellungenMobileDetailHost && bestellungenMobileDetailHost.parentNode) {";
|
||||
echo " bestellungenMobileDetailHost.parentNode.removeChild(bestellungenMobileDetailHost);";
|
||||
echo " }";
|
||||
echo " bestellungenMobileDetailHost = null;";
|
||||
echo " document.body.classList.remove('sg-bestellungen-mobile-detail-open');";
|
||||
echo " bestellungenDetailOpen = false;";
|
||||
echo " table = getTable();";
|
||||
echo " return !!table;";
|
||||
echo " };";
|
||||
@@ -764,6 +848,13 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " };";
|
||||
echo " if (!bestellungenTableHandlersInstalled) {";
|
||||
echo " bestellungenTableHandlersInstalled = true;";
|
||||
echo " document.addEventListener('click', (event) => {";
|
||||
echo " const detailBackTrigger = event.target.closest('[data-bestellungen-detail-back]');";
|
||||
echo " if (detailBackTrigger) {";
|
||||
echo " event.preventDefault();";
|
||||
echo " closeMobileDetail();";
|
||||
echo " }";
|
||||
echo " });";
|
||||
echo " contentRoot.addEventListener('click', (event) => {";
|
||||
echo " const openTrigger = event.target.closest('[data-order-drawer-open]');";
|
||||
echo " if (openTrigger) {";
|
||||
@@ -810,6 +901,14 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " closeDrawer();";
|
||||
echo " }";
|
||||
echo " });";
|
||||
echo " window.addEventListener('popstate', (event) => {";
|
||||
echo " if (bestellungenDetailOpen && (!event.state || event.state.bestellungenView !== 'detail')) {";
|
||||
echo " restoreBestellungenList();";
|
||||
echo " }";
|
||||
echo " });";
|
||||
echo " if (!window.history.state || window.history.state.bestellungenView !== 'list') {";
|
||||
echo " window.history.replaceState({ bestellungenView: 'list' }, '', window.location.href);";
|
||||
echo " }";
|
||||
echo " }";
|
||||
echo " bindTable();";
|
||||
echo " connectBestellungenRealtime();";
|
||||
|
||||
@@ -172,6 +172,8 @@
|
||||
--layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
|
||||
--layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
|
||||
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
|
||||
--layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
|
||||
--layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
|
||||
--dimension-notifications-card-min-width: 445px;
|
||||
--layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
|
||||
--layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
|
||||
@@ -273,6 +275,8 @@
|
||||
--dimension-object-card-mobile-width: 100%;
|
||||
--dimension-object-card-mobile-height: auto;
|
||||
--dimension-object-card-desktop-breakpoint: 768px;
|
||||
--dimension-content-card-margin-top-desktop: 100px;
|
||||
--dimension-content-card-margin-top-mobile: 1rem;
|
||||
--dimension-object-group-card-min-width: 450px;
|
||||
--dimension-object-group-card-max-width: 650px;
|
||||
--dimension-object-group-card-height: 700px;
|
||||
@@ -869,6 +873,7 @@ section + section {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-small);
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
max-width: var(--layout-form-input-field-max-width);
|
||||
}
|
||||
|
||||
@@ -2020,6 +2025,18 @@ section + section {
|
||||
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 {
|
||||
display: grid;
|
||||
flex: 1 1 auto;
|
||||
@@ -2049,6 +2066,10 @@ section + section {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.sg-portal-header--auth-segment .sg-portal-header__main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-portal-header-pattern-variant {
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
@@ -2311,6 +2332,28 @@ section + section {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-object-card--content-basic {
|
||||
width: min(70vw, var(--layout-object-card-max-width));
|
||||
margin-inline: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-object-card-content-basic {
|
||||
margin-top: var(--layout-content-card-margin-top-desktop);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-object-card--content-basic {
|
||||
width: var(--layout-object-card-mobile-width);
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.sg-object-card-content-basic {
|
||||
margin-top: var(--layout-content-card-margin-top-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================= */
|
||||
/* Patterns: Object Group Card */
|
||||
/* ========================================================= */
|
||||
@@ -2431,7 +2474,7 @@ section + section {
|
||||
}
|
||||
|
||||
.sg-form-sections-card__actions-segment {
|
||||
margin-top: calc(var(--spacing-large) - var(--card-segment-padding-vertical));
|
||||
margin-top: var(--spacing-large);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -3057,7 +3100,7 @@ section + section {
|
||||
|
||||
.sg-left-navigation-pattern__layout {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
@@ -3091,10 +3134,15 @@ section + section {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.sg-left-navigation-pattern__group-card--content .sg-group-card__heading {
|
||||
flex: 0 1 auto;
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sg-left-navigation-pattern__group-card--navigation .sg-tab-button-group[data-component-variant="linksmenu-items"] {
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3137,21 +3185,6 @@ section + section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 220ms ease;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer-backdrop[data-open="true"] {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -3205,25 +3238,12 @@ section + section {
|
||||
}
|
||||
|
||||
.sg-card-list-page > .sg-options-row {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-card-list-page > .sg-card-list-page__intro-block {
|
||||
margin-top: calc(var(--spacing-large) - 0.5rem);
|
||||
margin-top: var(--layout-options-row-margin-top);
|
||||
}
|
||||
|
||||
.sg-card-list-page__intro-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-card-list-page__title-row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-small);
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin-top: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
@@ -3329,6 +3349,49 @@ section + section {
|
||||
color: var(--text-vsf-drawer-object-card-body);
|
||||
}
|
||||
|
||||
/* ========================================================= */
|
||||
/* Layouts: Page Layout App */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-page-layout-app__heading-block {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
/* ========================================================= */
|
||||
/* Layouts: Page Layout Public */
|
||||
/* ========================================================= */
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-page-layout-public__heading-block {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-page-layout-public__content-mirror {
|
||||
width: 70vw;
|
||||
max-width: 1100px;
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sg-page-layout-public__footer-card {
|
||||
margin-top: auto;
|
||||
background: var(--surface-card-group);
|
||||
}
|
||||
|
||||
/* ========================================================= */
|
||||
/* Layouts: VSF List Detailseite */
|
||||
@@ -3343,34 +3406,16 @@ section + section {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page > .sg-options-row {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page > .sg-vsf-list-detail-page__intro-block {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__intro-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__intro-block .sg-vsf-list-detail-page__title,
|
||||
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
color: var(--color-font-light);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
width: min(60vw, 100%);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__content {
|
||||
display: flex;
|
||||
gap: var(--spacing-small);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__mobile-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column {
|
||||
width: 30%;
|
||||
min-width: 30%;
|
||||
@@ -3410,12 +3455,15 @@ section + section {
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
.sg-vsf-list-detail-page__mobile-tabs {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__content {
|
||||
display: block;
|
||||
margin-top: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column {
|
||||
@@ -3427,9 +3475,12 @@ section + section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column .sg-group-card,
|
||||
.sg-vsf-list-detail-page__right-column .sg-group-card {
|
||||
margin-bottom: var(--spacing-large);
|
||||
.sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel][hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__mobile-toggle {
|
||||
@@ -4384,3 +4435,4 @@ section + section {
|
||||
color: var(--text-typography-preview);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"styleguideVersion": "2026.05.18.1",
|
||||
"styleguideCommit": "8a7b6fa",
|
||||
"syncedAtUtc": "2026-06-16T12:22:28Z",
|
||||
"styleguideCommit": "72ab0f5",
|
||||
"syncedAtUtc": "2026-06-18T10:22:31Z",
|
||||
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
|
||||
"mirroredDocsPath": "docs/styleguide"
|
||||
}
|
||||
|
||||
+112
-73
@@ -172,6 +172,8 @@
|
||||
--layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
|
||||
--layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
|
||||
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
|
||||
--layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
|
||||
--layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
|
||||
--dimension-notifications-card-min-width: 445px;
|
||||
--layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
|
||||
--layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
|
||||
@@ -273,6 +275,8 @@
|
||||
--dimension-object-card-mobile-width: 100%;
|
||||
--dimension-object-card-mobile-height: auto;
|
||||
--dimension-object-card-desktop-breakpoint: 768px;
|
||||
--dimension-content-card-margin-top-desktop: 100px;
|
||||
--dimension-content-card-margin-top-mobile: 1rem;
|
||||
--dimension-object-group-card-min-width: 450px;
|
||||
--dimension-object-group-card-max-width: 650px;
|
||||
--dimension-object-group-card-height: 700px;
|
||||
@@ -869,6 +873,7 @@ section + section {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-small);
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
max-width: var(--layout-form-input-field-max-width);
|
||||
}
|
||||
|
||||
@@ -2020,6 +2025,18 @@ section + section {
|
||||
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 {
|
||||
display: grid;
|
||||
flex: 1 1 auto;
|
||||
@@ -2049,6 +2066,10 @@ section + section {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.sg-portal-header--auth-segment .sg-portal-header__main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-portal-header-pattern-variant {
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
@@ -2311,6 +2332,28 @@ section + section {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-object-card--content-basic {
|
||||
width: min(70vw, var(--layout-object-card-max-width));
|
||||
margin-inline: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-object-card-content-basic {
|
||||
margin-top: var(--layout-content-card-margin-top-desktop);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-object-card--content-basic {
|
||||
width: var(--layout-object-card-mobile-width);
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.sg-object-card-content-basic {
|
||||
margin-top: var(--layout-content-card-margin-top-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================= */
|
||||
/* Patterns: Object Group Card */
|
||||
/* ========================================================= */
|
||||
@@ -2431,7 +2474,7 @@ section + section {
|
||||
}
|
||||
|
||||
.sg-form-sections-card__actions-segment {
|
||||
margin-top: calc(var(--spacing-large) - var(--card-segment-padding-vertical));
|
||||
margin-top: var(--spacing-large);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -3057,7 +3100,7 @@ section + section {
|
||||
|
||||
.sg-left-navigation-pattern__layout {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
@@ -3091,9 +3134,14 @@ section + section {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.sg-left-navigation-pattern__group-card--content .sg-group-card__heading {
|
||||
flex: 0 1 auto;
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sg-left-navigation-pattern__group-card--navigation .sg-tab-button-group[data-component-variant="linksmenu-items"] {
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
@@ -3137,21 +3185,6 @@ section + section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 220ms ease;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer-backdrop[data-open="true"] {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sg-card-list-page-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -3205,25 +3238,12 @@ section + section {
|
||||
}
|
||||
|
||||
.sg-card-list-page > .sg-options-row {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-card-list-page > .sg-card-list-page__intro-block {
|
||||
margin-top: calc(var(--spacing-large) - 0.5rem);
|
||||
margin-top: var(--layout-options-row-margin-top);
|
||||
}
|
||||
|
||||
.sg-card-list-page__intro-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-card-list-page__title-row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-small);
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin-top: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
@@ -3329,6 +3349,49 @@ section + section {
|
||||
color: var(--text-vsf-drawer-object-card-body);
|
||||
}
|
||||
|
||||
/* ========================================================= */
|
||||
/* Layouts: Page Layout App */
|
||||
/* ========================================================= */
|
||||
|
||||
.sg-page-layout-app__heading-block {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
/* ========================================================= */
|
||||
/* Layouts: Page Layout Public */
|
||||
/* ========================================================= */
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-page-layout-public__heading-block {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-page-layout-public__content-mirror {
|
||||
width: 70vw;
|
||||
max-width: 1100px;
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sg-page-layout-public__footer-card {
|
||||
margin-top: auto;
|
||||
background: var(--surface-card-group);
|
||||
}
|
||||
|
||||
/* ========================================================= */
|
||||
/* Layouts: VSF List Detailseite */
|
||||
@@ -3343,34 +3406,16 @@ section + section {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page > .sg-options-row {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page > .sg-vsf-list-detail-page__intro-block {
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__intro-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__intro-block .sg-vsf-list-detail-page__title,
|
||||
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
color: var(--color-font-light);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
width: min(60vw, 100%);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__content {
|
||||
display: flex;
|
||||
gap: var(--spacing-small);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__mobile-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column {
|
||||
width: 30%;
|
||||
min-width: 30%;
|
||||
@@ -3410,12 +3455,15 @@ section + section {
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
||||
.sg-vsf-list-detail-page__mobile-tabs {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__content {
|
||||
display: block;
|
||||
margin-top: var(--spacing-small);
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column {
|
||||
@@ -3427,9 +3475,12 @@ section + section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__left-column .sg-group-card,
|
||||
.sg-vsf-list-detail-page__right-column .sg-group-card {
|
||||
margin-bottom: var(--spacing-large);
|
||||
.sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel][hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sg-vsf-list-detail-page__mobile-toggle {
|
||||
@@ -4263,10 +4314,6 @@ section + section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-large-table--bestellungen .sg-large-table__row {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(8.5rem, max-content);
|
||||
}
|
||||
|
||||
.sg-large-table__title-segment {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@@ -4315,10 +4362,6 @@ section + section {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.sg-large-table--bestellungen .sg-large-table__cell--amount {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sg-large-table__load-more-layout {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@@ -4329,11 +4372,6 @@ section + section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sg-large-table--bestellungen .sg-large-table__cell--amount .sg-large-table__sort-button {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sg-large-table__sort-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -4397,3 +4435,4 @@ section + section {
|
||||
color: var(--text-typography-preview);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -31,6 +31,31 @@ body.sg-otc-order-overlay-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.sg-bestellungen-mobile-detail-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.sg-bestellungen-mobile-detail-open > :not([data-bestellungen-mobile-detail-host]) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sg-bestellungen-mobile-detail-host {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1500;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-large);
|
||||
padding: var(--spacing-small);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
background: var(--color-background-purple);
|
||||
}
|
||||
|
||||
.sg-bestellungen-mobile-detail-host .sg-vsf-drawer-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-otc-order-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -82,3 +107,56 @@ body.sg-otc-order-overlay-open {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-large-table--bestellungen .sg-search-field-row {
|
||||
width: min(100%, calc(var(--layout-search-field-width) * 0.75));
|
||||
}
|
||||
|
||||
.sg-large-table--bestellungen .sg-input-single-line-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-large-table--bestellungen .sg-search-field-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-large-table--bestellungen .sg-large-table__row {
|
||||
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) fit-content(12.5ch);
|
||||
}
|
||||
|
||||
.sg-large-table--bestellungen .sg-large-table__row > :nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sg-large-table--bestellungen .sg-search-field-row {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sg-large-table--bestellungen .sg-large-table__row {
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.35fr) fit-content(12.5ch);
|
||||
}
|
||||
|
||||
.sg-large-table--bestellungen .sg-large-table__cell--amount {
|
||||
justify-self: end;
|
||||
padding-left: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sg-large-table--bestellungen .sg-large-table__cell:not(.sg-large-table__cell--amount) {
|
||||
justify-self: stretch;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sg-large-table--bestellungen .sg-large-table__cell--header.sg-large-table__cell--amount {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.sg-large-table--bestellungen .sg-large-table__cell--header.sg-large-table__cell--amount .sg-large-table__sort-button {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
[data-bestellungen-mobile-detail] .sg-navigation-card-layout {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
+1
-1
@@ -5,5 +5,5 @@ require_once __DIR__ . '/../modules/shared/auth/service.php';
|
||||
|
||||
auth_bootstrap_session();
|
||||
auth_logout();
|
||||
header('Location: /');
|
||||
header('Location: https://erpnaurua.imhochrain.ch/');
|
||||
exit;
|
||||
|
||||
Reference in New Issue
Block a user