gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fill fundamentals drawer and add mobile detail page flow

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-18 17:34:12 +02:00
parent 28c84469ec
commit dfdd256373
2 changed files with 168 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/card-listen-seite.html
+140 -9
View File
@@ -693,15 +693,113 @@
</section>
<aside class="sg-card-list-page-drawer" aria-label="Fundamentalanalyse" aria-hidden="true" data-open="false">
<header class="sg-card-list-page-drawer__header">
<h2 class="sg-heading-h2 sg-card-list-page-drawer__title">Fundamentalanalyse</h2>
<button class="sg-interaction-element sg-button" type="button" data-drawer-close>Schließen</button>
</header>
<div class="sg-card-list-page-drawer__content">
<p class="sg-body">Detailinhalte zur Fundamentalanalyse werden hier angezeigt.</p>
<div class="sg-navigation-card-layout">
<div class="sg-navigation-card-block">
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Schliessen oben">
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
<div class="sg-navigation-card-center">
<button class="sg-interaction-element sg-hyperlink" type="button" data-drawer-close>schliessen</button>
</div>
</div>
</article>
</div>
</div>
<article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 1">
<header class="sg-card-segment sg-card-segment--header">
<h2 class="sg-heading-h2">Box 1</h2>
</header>
<div class="sg-card-segment sg-card-segment--body">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
</div>
</article>
<article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 2">
<header class="sg-card-segment sg-card-segment--header">
<h2 class="sg-heading-h2">Box 2</h2>
</header>
<div class="sg-card-segment sg-card-segment--body">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
</div>
</article>
<article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 3">
<header class="sg-card-segment sg-card-segment--header">
<h2 class="sg-heading-h2">Box 3</h2>
</header>
<div class="sg-card-segment sg-card-segment--body">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
</div>
</article>
<div class="sg-navigation-card-layout">
<div class="sg-navigation-card-block">
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Schliessen unten">
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
<div class="sg-navigation-card-center">
<button class="sg-interaction-element sg-hyperlink" type="button" data-drawer-close>schliessen</button>
</div>
</div>
</article>
</div>
</div>
</div>
</aside>
<section class="sg-card-list-page-mobile-detail" aria-label="Fundamentalanalyse mobil" aria-hidden="true" hidden>
<div class="sg-navigation-card-layout">
<div class="sg-navigation-card-block">
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste oben">
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
<div class="sg-navigation-card-center">
<button class="sg-interaction-element sg-hyperlink" type="button" data-mobile-back>zurück zur Liste</button>
</div>
</div>
</article>
</div>
</div>
<article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 1 mobil">
<header class="sg-card-segment sg-card-segment--header">
<h2 class="sg-heading-h2">Box 1</h2>
</header>
<div class="sg-card-segment sg-card-segment--body">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
</div>
</article>
<article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 2 mobil">
<header class="sg-card-segment sg-card-segment--header">
<h2 class="sg-heading-h2">Box 2</h2>
</header>
<div class="sg-card-segment sg-card-segment--body">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
</div>
</article>
<article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 3 mobil">
<header class="sg-card-segment sg-card-segment--header">
<h2 class="sg-heading-h2">Box 3</h2>
</header>
<div class="sg-card-segment sg-card-segment--body">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
</div>
</article>
<div class="sg-navigation-card-layout">
<div class="sg-navigation-card-block">
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste unten">
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
<div class="sg-navigation-card-center">
<button class="sg-interaction-element sg-hyperlink" type="button" data-mobile-back>zurück zur Liste</button>
</div>
</div>
</article>
</div>
</div>
</section>
<script>
const updateObjectCardGridRowState = () => {
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
@@ -960,8 +1058,12 @@
updateState();
});
const cardListPage = document.querySelector('.sg-card-list-page');
const mobileFundamentalPage = document.querySelector('.sg-card-list-page-mobile-detail');
const fundamentalDrawer = document.querySelector('.sg-card-list-page-drawer');
const fundamentalDrawerCloseButton = fundamentalDrawer?.querySelector('[data-drawer-close]');
const fundamentalDrawerCloseButtons = document.querySelectorAll('[data-drawer-close]');
const mobileBackButtons = document.querySelectorAll('[data-mobile-back]');
const mobileBreakpoint = window.matchMedia('(max-width: 767px)');
const setFundamentalDrawerState = (open) => {
if (!fundamentalDrawer) {
@@ -972,25 +1074,54 @@
fundamentalDrawer.setAttribute('aria-hidden', String(!open));
};
const setMobileFundamentalPageState = (open) => {
if (!cardListPage || !mobileFundamentalPage) {
return;
}
cardListPage.hidden = open;
cardListPage.setAttribute('aria-hidden', String(open));
mobileFundamentalPage.hidden = !open;
mobileFundamentalPage.setAttribute('aria-hidden', String(!open));
};
document.querySelectorAll('.sg-object-card__action').forEach((button) => {
if (button.textContent?.trim() !== 'Fundamentalanalyse') {
return;
}
button.addEventListener('click', () => {
if (mobileBreakpoint.matches) {
setMobileFundamentalPageState(true);
return;
}
setFundamentalDrawerState(true);
});
});
if (fundamentalDrawerCloseButton) {
fundamentalDrawerCloseButton.addEventListener('click', () => {
fundamentalDrawerCloseButtons.forEach((closeButton) => {
closeButton.addEventListener('click', () => {
setFundamentalDrawerState(false);
});
}
});
mobileBackButtons.forEach((backButton) => {
backButton.addEventListener('click', () => {
setMobileFundamentalPageState(false);
});
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
setFundamentalDrawerState(false);
setMobileFundamentalPageState(false);
}
});
window.addEventListener('resize', () => {
if (!mobileBreakpoint.matches) {
setMobileFundamentalPageState(false);
}
});
styleguide.css
+28 -1
View File
@@ -1685,6 +1685,7 @@ section + section {
color: var(--text-card-list-drawer);
box-shadow: var(--shadow-overlay);
z-index: 1000;
overflow-y: auto;
}
.sg-card-list-page-drawer[data-open="true"] {
@@ -1707,13 +1708,31 @@ section + section {
}
.sg-card-list-page-drawer__content {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
padding:
0
var(--card-segment-padding-vertical)
var(--card-segment-padding-horizontal)
var(--card-segment-padding-vertical)
var(--card-segment-padding-horizontal);
}
.sg-card-list-page-drawer__info-card.sg-card {
--surface-card-header-primary: var(--color-light-grey);
--text-card-header: var(--color-font-dark);
}
.sg-card-list-page-mobile-detail {
display: none;
flex-direction: column;
gap: var(--spacing-large);
}
.sg-card-list-page-mobile-detail[hidden] {
display: none;
}
.sg-card-list-page > * + * {
margin-top: var(--spacing-large);
}
@@ -1746,6 +1765,14 @@ section + section {
}
@media (max-width: 767px) {
.sg-card-list-page-drawer {
display: none;
}
.sg-card-list-page-mobile-detail {
display: flex;
}
.sg-card-list-page__intro-card.sg-card {
align-self: stretch;
width: 100%;