Compare commits
23 Commits
c3ac69524a
..
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 | ||
|
gitea_admin
|
e4eff07fd0 | ||
|
gitea_admin
|
0ee3e7bdf3 |
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -44,6 +44,12 @@
|
||||
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"] {
|
||||
justify-content: flex-start;
|
||||
|
||||
@@ -60,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 {
|
||||
@@ -183,4 +170,3 @@
|
||||
margin: 0;
|
||||
color: var(--text-vsf-drawer-object-card-body);
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -3091,6 +3134,12 @@ 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"] {
|
||||
justify-content: flex-start;
|
||||
@@ -3189,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 {
|
||||
@@ -3313,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 */
|
||||
@@ -3327,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%;
|
||||
@@ -3394,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 {
|
||||
@@ -3411,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 {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"styleguideVersion": "2026.05.18.1",
|
||||
"styleguideCommit": "a077731",
|
||||
"syncedAtUtc": "2026-06-16T18:42:20Z",
|
||||
"styleguideCommit": "72ab0f5",
|
||||
"syncedAtUtc": "2026-06-18T10:22:31Z",
|
||||
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
|
||||
"mirroredDocsPath": "docs/styleguide"
|
||||
}
|
||||
|
||||
+110
-43
@@ -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;
|
||||
}
|
||||
|
||||
@@ -3091,6 +3134,12 @@ 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"] {
|
||||
justify-content: flex-start;
|
||||
@@ -3189,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 {
|
||||
@@ -3313,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 */
|
||||
@@ -3327,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%;
|
||||
@@ -3394,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 {
|
||||
@@ -3411,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 {
|
||||
|
||||
@@ -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;
|
||||
@@ -83,15 +108,55 @@ body.sg-otc-order-overlay-open {
|
||||
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: repeat(3, minmax(0, 1fr)) minmax(8.5rem, max-content);
|
||||
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--amount .sg-large-table__sort-button {
|
||||
justify-content: flex-end;
|
||||
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: /index.php');
|
||||
header('Location: https://erpnaurua.imhochrain.ch/');
|
||||
exit;
|
||||
|
||||
Reference in New Issue
Block a user