Files
erp_naurua/docs/styleguide/patterns/notifications.html
T

359 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Pattern Notifications</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Pattern – Notifications</h1>
<section id="pattern-notifications">
<p class="sg-preview-label">Pattern: Notifications</p>
<div class="sg-preview-area sg-notifications-pattern">
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" 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 sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" 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-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" 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-yellow" 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 sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" 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>
</section>
<section id="pattern-notifications-with-title">
<p class="sg-preview-label">Pattern: Notification with title</p>
<div class="sg-preview-area sg-notifications-pattern">
<p class="sg-preview-label">Pattern: Notification with title - reg</p>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="reg" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
</p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" 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>
<p class="sg-preview-label">Pattern: Notification with title - green</p>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="green" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
</p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" 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>
<p class="sg-preview-label">Pattern: Notification with title - light green</p>
<article class="sg-card sg-card--notification-signal-green-light sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="light-green" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green-light sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
</p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green-light sg-notifications-pattern__text-segment" 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-light" 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>
<p class="sg-preview-label">Pattern: Notification with title - green-red rating</p>
<article class="sg-card sg-card--notification-signal-green-red sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="green-red-rating" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Bewertung</span>
</p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green-red sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body">
Positive oder negative Bewertungsdarstellung zur Illustration.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green-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">
zur Bewertung
</button>
</div>
</article>
<p class="sg-preview-label">Pattern: Notification with title - yellow</p>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="yellow" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
</p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" 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-yellow" 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>
<p class="sg-preview-label">Pattern: Notification with title - white</p>
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="white" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
</p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" 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>
</section>
<section id="pattern-user-notification">
<p class="sg-preview-label">Pattern: User Notification</p>
<div class="sg-preview-area sg-user-notification-pattern">
<article class="sg-card sg-notifications-pattern__card" data-pattern="user-notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
</p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" 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-yellow sg-user-notification-pattern__actions" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
Bestätigen
</button>
</div>
</article>
</div>
</section>
<section id="pattern-user-notification-staple">
<p class="sg-preview-label">Pattern: User Notification Staple</p>
<div class="sg-preview-area sg-user-notification-staple">
<article class="sg-card" data-pattern="user-notification-staple" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body"><span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span></p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" 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.</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-staple__actions" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Bestätigen</button>
</div>
</article>
<article class="sg-card" data-pattern="user-notification-staple" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body"><span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span></p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" 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.</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-staple__actions" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Bestätigen</button>
</div>
</article>
<article class="sg-card" data-pattern="user-notification-staple" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body"><span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span></p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" 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.</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-staple__actions" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Bestätigen</button>
</div>
</article>
</div>
</section>
<section id="pattern-notifications-small">
<p class="sg-preview-label">Pattern: Notifications small</p>
<div class="sg-preview-area sg-notifications-pattern">
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" 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>
</article>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" 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>
</article>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" 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>
</article>
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" 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>
</article>
</div>
</section>
<script>
const updateNotificationsPatternRowState = () => {
document.querySelectorAll('.sg-notifications-pattern').forEach((grid) => {
const cards = Array.from(grid.querySelectorAll('.sg-notifications-pattern__card'));
grid.classList.remove('sg-notifications-pattern--multi-row');
grid.style.removeProperty('--layout-object-card-shared-width');
if (cards.length <= 1) {
return;
}
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;
grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
grid.classList.add('sg-notifications-pattern--multi-row');
});
};
window.addEventListener('load', updateNotificationsPatternRowState);
window.addEventListener('resize', updateNotificationsPatternRowState);
</script>
</body>
</html>