153 lines
10 KiB
HTML
153 lines
10 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 – Pattern Object Group Card</title>
|
||
<link rel="stylesheet" href="../styleguide.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="sg-main-heading">Pattern – Object Group Card</h1>
|
||
<section id="pattern-object-group-card">
|
||
<p class="sg-preview-label">Pattern: Object Group Card</p>
|
||
<p class="sg-body sg-object-group-card__hint">Hinweis: Die hier gezeigten sechs Karten sind nur eine illustrative Demo zur Prüfung des responsiven Verhaltens. Für das Pattern selbst ist die Anzahl der Karten nicht vorgegeben und hängt vom konkreten Use Case ab.</p>
|
||
|
||
<div class="sg-object-card-grid">
|
||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
|
||
<div class="sg-strong">Alcon Inc.</div>
|
||
</header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
|
||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||
<div class="sg-object-card__actions sg-object-group-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
|
||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||
<div class="sg-object-card__actions sg-object-group-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
|
||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||
<div class="sg-object-card__actions sg-object-group-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
|
||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||
<div class="sg-object-card__actions sg-object-group-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
|
||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||
<div class="sg-object-card__actions sg-object-group-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
|
||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
|
||
<div class="sg-object-card__actions sg-object-group-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="pattern-list-group-card-height-600">
|
||
<p class="sg-preview-label">Pattern: List Group Card</p>
|
||
<p class="sg-body sg-object-group-card__hint">Variante: List Group Card, identisch, nur die Höhe ist 600px.</p>
|
||
<div class="sg-object-card-grid sg-list-group-card--height-600" aria-label="List Group Card Höhe 600px"></div>
|
||
</section>
|
||
|
||
<script>
|
||
const populateListGroupCardVariant = () => {
|
||
const sourceGrid = document.querySelector('#pattern-object-group-card .sg-object-card-grid');
|
||
const variantGrid = document.querySelector('#pattern-list-group-card-height-600 .sg-object-card-grid');
|
||
|
||
if (!sourceGrid || !variantGrid || variantGrid.children.length > 0) {
|
||
return;
|
||
}
|
||
|
||
variantGrid.innerHTML = sourceGrid.innerHTML;
|
||
};
|
||
|
||
const updateObjectCardGridRowState = () => {
|
||
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
||
const cards = Array.from(grid.querySelectorAll('.sg-object-card'));
|
||
grid.classList.remove('sg-object-card-grid--multi-row');
|
||
grid.style.removeProperty('--layout-object-card-shared-width');
|
||
|
||
if (cards.length <= 1) {
|
||
return;
|
||
}
|
||
|
||
// Measure in native responsive state first (no shared-width lock).
|
||
// Reading offsetTop after reset forces layout with current viewport width.
|
||
const firstTop = cards[0].offsetTop;
|
||
const hasMultipleRows = cards.some((card) => card.offsetTop !== firstTop);
|
||
|
||
if (!hasMultipleRows) {
|
||
return;
|
||
}
|
||
|
||
const firstRowCards = cards.filter((card) => card.offsetTop === firstTop);
|
||
const referenceCard = firstRowCards[0];
|
||
if (!referenceCard) {
|
||
return;
|
||
}
|
||
|
||
const referenceWidth = referenceCard.getBoundingClientRect().width;
|
||
const maxWidth = parseFloat(getComputedStyle(referenceCard).maxWidth);
|
||
const sharedWidth = Number.isFinite(maxWidth) ? Math.min(referenceWidth, maxWidth) : referenceWidth;
|
||
grid.style.setProperty('--layout-object-card-shared-width', `${sharedWidth}px`);
|
||
grid.classList.add('sg-object-card-grid--multi-row');
|
||
});
|
||
};
|
||
|
||
window.addEventListener('load', () => {
|
||
populateListGroupCardVariant();
|
||
updateObjectCardGridRowState();
|
||
});
|
||
window.addEventListener('resize', updateObjectCardGridRowState);
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|