Route mobile fundamentals to dedicated page
This commit is contained in:
@@ -52,6 +52,7 @@
|
|||||||
|
|
||||||
<ul class="sg-index-list">
|
<ul class="sg-index-list">
|
||||||
<li><a href="./patterns/card-listen-seite.html">Card Listen Seite</a></li>
|
<li><a href="./patterns/card-listen-seite.html">Card Listen Seite</a></li>
|
||||||
|
<li><a href="./patterns/card-listen-fundamentalanalyse-mobile.html">Card Listen Fundamentalanalyse Mobile</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,69 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Styleguide – Card Listen Seite Fundamentalanalyse Mobile</title>
|
||||||
|
<link rel="stylesheet" href="../styleguide.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1 class="sg-main-heading">Layout – Fundamentalanalyse Mobile</h1>
|
||||||
|
|
||||||
|
<section class="sg-card-list-page" aria-label="Fundamentalanalyse Seite mobil">
|
||||||
|
<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">
|
||||||
|
<a class="sg-hyperlink" href="./card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-list-page-detail-group" aria-label="Fundamentalanalyse Karten Gruppe mobil">
|
||||||
|
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1 mobil">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||||
|
<div class="sg-strong">Box 1</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-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--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 2 mobil">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||||
|
<div class="sg-strong">Box 2</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-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--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 3 mobil">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||||
|
<div class="sg-strong">Box 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-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>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
<a class="sg-hyperlink" href="./card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -749,61 +749,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</aside>
|
</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>
|
|
||||||
|
|
||||||
<div class="sg-card-list-page-detail-group" aria-label="Fundamentalanalyse Karten Gruppe mobil">
|
|
||||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1 mobil">
|
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
|
||||||
<div class="sg-strong">Box 1</div>
|
|
||||||
</div>
|
|
||||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-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--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 2 mobil">
|
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
|
||||||
<div class="sg-strong">Box 2</div>
|
|
||||||
</div>
|
|
||||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-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--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 3 mobil">
|
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
|
||||||
<div class="sg-strong">Box 3</div>
|
|
||||||
</div>
|
|
||||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-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>
|
|
||||||
|
|
||||||
<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>
|
<script>
|
||||||
const updateObjectCardGridRowState = () => {
|
const updateObjectCardGridRowState = () => {
|
||||||
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
||||||
@@ -1062,11 +1007,8 @@
|
|||||||
updateState();
|
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 fundamentalDrawer = document.querySelector('.sg-card-list-page-drawer');
|
||||||
const fundamentalDrawerCloseButtons = document.querySelectorAll('[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 mobileBreakpoint = window.matchMedia('(max-width: 767px)');
|
||||||
|
|
||||||
const setFundamentalDrawerState = (open) => {
|
const setFundamentalDrawerState = (open) => {
|
||||||
@@ -1078,17 +1020,6 @@
|
|||||||
fundamentalDrawer.setAttribute('aria-hidden', String(!open));
|
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) => {
|
document.querySelectorAll('.sg-object-card__action').forEach((button) => {
|
||||||
if (button.textContent?.trim() !== 'Fundamentalanalyse') {
|
if (button.textContent?.trim() !== 'Fundamentalanalyse') {
|
||||||
return;
|
return;
|
||||||
@@ -1096,7 +1027,7 @@
|
|||||||
|
|
||||||
button.addEventListener('click', () => {
|
button.addEventListener('click', () => {
|
||||||
if (mobileBreakpoint.matches) {
|
if (mobileBreakpoint.matches) {
|
||||||
setMobileFundamentalPageState(true);
|
window.location.href = './card-listen-fundamentalanalyse-mobile.html';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1110,22 +1041,9 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
mobileBackButtons.forEach((backButton) => {
|
|
||||||
backButton.addEventListener('click', () => {
|
|
||||||
setMobileFundamentalPageState(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (event) => {
|
document.addEventListener('keydown', (event) => {
|
||||||
if (event.key === 'Escape') {
|
if (event.key === 'Escape') {
|
||||||
setFundamentalDrawerState(false);
|
setFundamentalDrawerState(false);
|
||||||
setMobileFundamentalPageState(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
if (!mobileBreakpoint.matches) {
|
|
||||||
setMobileFundamentalPageState(false);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1724,16 +1724,6 @@ section + section {
|
|||||||
gap: var(--spacing-small);
|
gap: var(--spacing-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 > * + * {
|
.sg-card-list-page > * + * {
|
||||||
margin-top: var(--spacing-large);
|
margin-top: var(--spacing-large);
|
||||||
}
|
}
|
||||||
@@ -1770,14 +1760,6 @@ section + section {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-list-page-mobile-detail {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-card-list-page-mobile-detail[hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-card-list-page__intro-card.sg-card {
|
.sg-card-list-page__intro-card.sg-card {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
Reference in New Issue
Block a user