358 lines
19 KiB
HTML
358 lines
19 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Styleguide – VSF List Detailseite</title>
|
||
<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>
|
||
|
||
<div class="sg-transparent-card sg-vsf-list-detail-page__intro-block" aria-label="Einleitung zur VSF Listenübersicht" data-component="transparent-card">
|
||
<div class="sg-vsf-list-detail-page__title-row">
|
||
<h1 class="sg-heading-h1 sg-text-on-dark sg-vsf-list-detail-page__title">TITEL DER LISTE</h1>
|
||
</div>
|
||
<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-group-card" data-component="group-card">
|
||
<h2 class="sg-heading-h2 sg-text-on-dark">Meldungen</h2>
|
||
<article class="sg-card" data-component="notification-card" data-component-context="group-card">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||
</p>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||
zum Unternehmen
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="sg-card" data-component="notification-card" data-component-context="group-card">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||
</p>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||
zum Unternehmen
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="sg-card sg-card--notification-white" data-component="notification-card" data-component-context="group-card">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||
</p>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||
zum Unternehmen
|
||
</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<script src="../scripts/help-icon-overlays.js"></script>
|
||
<script>
|
||
document.querySelectorAll('.sg-portal-header__tabs').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));
|
||
});
|
||
});
|
||
|
||
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`
|
||
);
|
||
});
|
||
});
|
||
|
||
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));
|
||
|
||
if (!nextState) {
|
||
return;
|
||
}
|
||
|
||
const panel = demo.querySelector('.sg-pulldown-panel');
|
||
if (!panel) {
|
||
return;
|
||
}
|
||
|
||
const panelRect = panel.getBoundingClientRect();
|
||
if (panelRect.right > window.innerWidth) {
|
||
demo.dataset.align = 'right';
|
||
}
|
||
|
||
const alignedPanelRect = panel.getBoundingClientRect();
|
||
if (alignedPanelRect.left < 0) {
|
||
demo.dataset.align = 'left';
|
||
}
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.sg-pulldown-option[data-pulldown-option]').forEach((option) => {
|
||
option.addEventListener('click', (event) => {
|
||
event.stopPropagation();
|
||
const pulldownDemo = option.closest('.sg-pulldown-demo');
|
||
if (pulldownDemo) {
|
||
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
|
||
otherOption.setAttribute('aria-checked', String(otherOption === option));
|
||
});
|
||
|
||
updatePulldownSelectionState(pulldownDemo);
|
||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||
pulldownDemo.dataset.open = 'false';
|
||
if (trigger) {
|
||
trigger.setAttribute('aria-expanded', 'false');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
|
||
window.sgInitHelpIconOverlays({
|
||
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||
});
|
||
|
||
document.querySelectorAll('.sg-input-single-line-wrap').forEach((wrap) => {
|
||
const input = wrap.querySelector('.sg-input-single-line');
|
||
const clearButton = wrap.querySelector('.sg-input-clear-button');
|
||
|
||
if (!input || !clearButton) {
|
||
return;
|
||
}
|
||
|
||
const updateState = () => {
|
||
wrap.dataset.hasValue = String(input.value.length > 0);
|
||
wrap.dataset.componentState = input.value.length > 0 ? 'active' : 'inactive-selectable';
|
||
};
|
||
|
||
input.addEventListener('input', updateState);
|
||
|
||
clearButton.addEventListener('click', () => {
|
||
input.value = '';
|
||
updateState();
|
||
input.focus();
|
||
});
|
||
|
||
updateState();
|
||
});
|
||
|
||
document.addEventListener('click', (event) => {
|
||
if (!event.target.closest('.sg-sandwich-menu-wrap')) {
|
||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||
const button = wrap.querySelector('.sg-sandwich-button');
|
||
wrap.dataset.open = 'false';
|
||
if (button) {
|
||
button.setAttribute('aria-expanded', 'false');
|
||
}
|
||
});
|
||
}
|
||
|
||
if (!event.target.closest('.sg-pulldown-demo')) {
|
||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||
demo.dataset.open = 'false';
|
||
if (trigger) {
|
||
trigger.setAttribute('aria-expanded', 'false');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|