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

Add VSF-specific mobile detail layout and wire redirect

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 11:23:42 +02:00
parent df9d6ff2c0
commit bfd5e9cf66
3 changed files with 71 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -64,6 +64,7 @@
<ul class="sg-index-list">
<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-fundamentalanalyse-mobile.html">VSF Card Listen Fundamentalanalyse Mobile</a></li>
</ul>
</section>
patterns/vsf-card-listen-fundamentalanalyse-mobile.html
+69
View File
@@ -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 – VSF Card Listen Seite Fundamentalanalyse Mobile</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Layout – VSF Fundamentalanalyse Mobile</h1>
<section class="sg-card-list-page" aria-label="VSF 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="./vsf-card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
</div>
</div>
</article>
</div>
</div>
<div class="sg-content-cards-group" data-pattern="content-cards-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="./vsf-card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
</div>
</div>
</article>
</div>
</div>
</section>
</body>
</html>
patterns/vsf-card-listen-seite.html
+1 -1
View File
@@ -1006,7 +1006,7 @@
button.addEventListener('click', () => {
if (mobileBreakpoint.matches) {
window.location.href = './card-listen-fundamentalanalyse-mobile.html';
window.location.href = './vsf-card-listen-fundamentalanalyse-mobile.html';
return;
}