Extract VSF drawer detail into standalone layout page
This commit is contained in:
@@ -66,6 +66,7 @@
|
|||||||
<li><a href="./patterns/company-card.html">Company Card</a></li>
|
<li><a href="./patterns/company-card.html">Company Card</a></li>
|
||||||
<li><a href="./patterns/vsf-card-listen-seite.html">VSF Card Listen Seite</a></li>
|
<li><a href="./patterns/vsf-card-listen-seite.html">VSF Card Listen Seite</a></li>
|
||||||
<li><a href="./patterns/vsf-card-listen-fundamentalanalyse-mobile.html">VSF Card Listen Fundamentalanalyse Mobile</a></li>
|
<li><a href="./patterns/vsf-card-listen-fundamentalanalyse-mobile.html">VSF Card Listen Fundamentalanalyse Mobile</a></li>
|
||||||
|
<li><a href="./patterns/vsf-card-listen-fundamentalanalyse-drawer.html">VSF Card Listen Fundamentalanalyse Drawer</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,63 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Styleguide – VSF Card Listen Seite Fundamentalanalyse Drawer</title>
|
||||||
|
<link rel="stylesheet" href="../styleguide.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1 class="sg-main-heading">Layout – VSF Fundamentalanalyse Drawer</h1>
|
||||||
|
|
||||||
|
<section class="sg-card-list-page" aria-label="VSF Fundamentalanalyse Drawer Seite">
|
||||||
|
<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="./vsf-card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="sg-card sg-vsf-drawer-card" data-component="card" data-pattern="card" aria-label="Card Western Digital Corporation">
|
||||||
|
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-pattern-part="card-header">
|
||||||
|
<h2 class="sg-heading-h2 sg-vsf-drawer-object-card__heading">Western Digital Corporation</h2>
|
||||||
|
</header>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content" data-pattern-part="card-body">
|
||||||
|
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
|
||||||
|
<p class="sg-body sg-text-layout-pattern__column">
|
||||||
|
Ticker: WDC<br>
|
||||||
|
Region: Amerika<br>
|
||||||
|
Sub-Region: Nordamerika<br>
|
||||||
|
Land: Vereinigte Staaten von Amerika
|
||||||
|
</p>
|
||||||
|
<p class="sg-body sg-text-layout-pattern__column">
|
||||||
|
ISIN: US9581021055<br>
|
||||||
|
Industrie: Computer Hardware
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__actions-segment" data-pattern-part="card-actions">
|
||||||
|
<button class="sg-interaction-element sg-button" type="button">Geschäftsmodell</button>
|
||||||
|
</footer>
|
||||||
|
</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">
|
||||||
|
<a class="sg-hyperlink" href="./vsf-card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -657,69 +657,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
<div class="sg-navigation-card-block">
|
<div class="sg-navigation-card-layout sg-card-list-page__navigation">
|
||||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
<div class="sg-navigation-card-block">
|
||||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
||||||
<div class="sg-navigation-card-center">
|
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
|
||||||
<a class="sg-hyperlink" href="#" data-component="hyperlink">mehr laden</a>
|
<div class="sg-navigation-card-center">
|
||||||
|
<a class="sg-hyperlink" href="#" data-component="hyperlink">mehr laden</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</article>
|
||||||
</article>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<aside class="sg-card-list-page-drawer" aria-label="Fundamentalanalyse" aria-hidden="true" data-open="false">
|
|
||||||
<div class="sg-card-list-page-drawer__content">
|
|
||||||
<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-vsf-drawer-card" data-component="card" data-pattern="card" aria-label="Card Western Digital Corporation">
|
|
||||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-pattern-part="card-header">
|
|
||||||
<h2 class="sg-heading-h2 sg-vsf-drawer-object-card__heading">Western Digital Corporation</h2>
|
|
||||||
</header>
|
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content" data-pattern-part="card-body">
|
|
||||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
|
|
||||||
<p class="sg-body sg-text-layout-pattern__column">
|
|
||||||
Ticker: WDC<br>
|
|
||||||
Region: Amerika<br>
|
|
||||||
Sub-Region: Nordamerika<br>
|
|
||||||
Land: Vereinigte Staaten von Amerika
|
|
||||||
</p>
|
|
||||||
<p class="sg-body sg-text-layout-pattern__column">
|
|
||||||
ISIN: US9581021055<br>
|
|
||||||
Industrie: Computer Hardware
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<footer class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__actions-segment" data-pattern-part="card-actions">
|
|
||||||
<button class="sg-interaction-element sg-button" type="button">Geschäftsmodell</button>
|
|
||||||
</footer>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const updateObjectCardGridRowState = () => {
|
const updateObjectCardGridRowState = () => {
|
||||||
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
||||||
@@ -977,59 +927,24 @@
|
|||||||
|
|
||||||
updateState();
|
updateState();
|
||||||
});
|
});
|
||||||
|
|
||||||
const fundamentalDrawer = document.querySelector('.sg-card-list-page-drawer');
|
|
||||||
const fundamentalDrawerCloseButtons = document.querySelectorAll('[data-drawer-close]');
|
|
||||||
const mobileBreakpoint = window.matchMedia('(max-width: 767px)');
|
const mobileBreakpoint = window.matchMedia('(max-width: 767px)');
|
||||||
|
|
||||||
const setFundamentalDrawerState = (open) => {
|
|
||||||
if (!fundamentalDrawer) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
fundamentalDrawer.dataset.open = String(open);
|
|
||||||
fundamentalDrawer.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;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.dataset.drawerOpenTrigger = 'true';
|
|
||||||
|
|
||||||
button.addEventListener('click', () => {
|
button.addEventListener('click', () => {
|
||||||
if (mobileBreakpoint.matches) {
|
if (mobileBreakpoint.matches) {
|
||||||
window.location.href = './vsf-card-listen-fundamentalanalyse-mobile.html';
|
window.location.href = './vsf-card-listen-fundamentalanalyse-mobile.html';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setFundamentalDrawerState(true);
|
window.location.href = './vsf-card-listen-fundamentalanalyse-drawer.html';
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
fundamentalDrawerCloseButtons.forEach((closeButton) => {
|
|
||||||
closeButton.addEventListener('click', () => {
|
|
||||||
setFundamentalDrawerState(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (event) => {
|
|
||||||
if (event.key === 'Escape') {
|
|
||||||
setFundamentalDrawerState(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('click', (event) => {
|
document.addEventListener('click', (event) => {
|
||||||
if (
|
|
||||||
fundamentalDrawer &&
|
|
||||||
fundamentalDrawer.dataset.open === 'true' &&
|
|
||||||
!event.target.closest('.sg-card-list-page-drawer') &&
|
|
||||||
!event.target.closest('[data-drawer-open-trigger="true"]')
|
|
||||||
) {
|
|
||||||
setFundamentalDrawerState(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!event.target.closest('.sg-sandwich-menu-wrap')) {
|
if (!event.target.closest('.sg-sandwich-menu-wrap')) {
|
||||||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||||||
const button = wrap.querySelector('.sg-sandwich-button');
|
const button = wrap.querySelector('.sg-sandwich-button');
|
||||||
|
|||||||
Reference in New Issue
Block a user