From 377f23ff6e04b671d9d4126f3a71582707bb73be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Thu, 28 May 2026 10:24:16 +0200 Subject: [PATCH] Add reusable VSF list detail layout page and module --- index.html | 1 + patterns/vsf-list-detailseite.html | 273 +++++++++++++++++++++ styleguide.css | 1 + styles/33-layouts-vsf-list-detailseite.css | 44 ++++ 4 files changed, 319 insertions(+) create mode 100644 patterns/vsf-list-detailseite.html create mode 100644 styles/33-layouts-vsf-list-detailseite.css diff --git a/index.html b/index.html index 6f05858..1cd4ba4 100644 --- a/index.html +++ b/index.html @@ -67,6 +67,7 @@
  • Company Card
  • VSF List Card
  • VSF Card Listen Seite
    • +
  • VSF List Detailseite
  • VSF Card Listen Fundamentalanalyse Mobile
  • VSF Card Listen Fundamentalanalyse Drawer
    • diff --git a/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html new file mode 100644 index 0000000..8d3ed22 --- /dev/null +++ b/patterns/vsf-list-detailseite.html @@ -0,0 +1,273 @@ + + + + + + Styleguide – VSF List Detailseite + + + + +

    Layout – VSF List Detailseite

    + +
    +
    +
    +

    ValueStockFinder

    + +
    + + +
    + Admin + Logout +
    +
    + + +
    +
    + +
    +
    +
    + + +
    +
      + + + + +
    • Menüpunkt 5
      • +
    +
    +
    + +
    + + +
    +
      + + + + +
    • Menüpunkt 5
      • +
    +
    +
    + +
    + + + + + 0 Treffer +
    +
    + +
    + + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. + + +
    +
    + +
    +
    +

    VSF Listenübersicht

    + + + + Hilfe zur Listenansicht und zu den Filteroptionen. + + +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.

    +
    +
    + + + + + + diff --git a/styleguide.css b/styleguide.css index e4f98be..28dab2e 100644 --- a/styleguide.css +++ b/styleguide.css @@ -11,6 +11,7 @@ @import "./styles/26-patterns-vsf-list-card.css"; @import "./styles/27-patterns-delete-confirmation.css"; @import "./styles/30-layouts-card-list-page.css"; +@import "./styles/33-layouts-vsf-list-detailseite.css"; @import "./styles/31-patterns-text-layouts.css"; @import "./styles/32-patterns-card-group-keyboard-nav.css"; @import "./styles/40-components-cards.css"; diff --git a/styles/33-layouts-vsf-list-detailseite.css b/styles/33-layouts-vsf-list-detailseite.css new file mode 100644 index 0000000..381a78f --- /dev/null +++ b/styles/33-layouts-vsf-list-detailseite.css @@ -0,0 +1,44 @@ +/* ========================================================= */ +/* Layouts: VSF List Detailseite */ +/* ========================================================= */ + +.sg-vsf-list-detail-page { + display: flex; + flex-direction: column; +} + +.sg-vsf-list-detail-page > * + * { + margin-top: var(--spacing-large); +} + +.sg-vsf-list-detail-page > .sg-options-row { + margin-top: var(--spacing-large); +} + +.sg-vsf-list-detail-page > .sg-vsf-list-detail-page__intro-block { + margin-top: calc(var(--spacing-large) - 0.5rem); +} + +.sg-vsf-list-detail-page__intro-block { + display: flex; + flex-direction: column; + gap: var(--spacing-large); +} + +.sg-vsf-list-detail-page__title-row { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + width: fit-content; + max-width: 100%; +} + +.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width { + width: min(60vw, 100%); +} + +@media (max-width: 767px) { + .sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width { + width: 100%; + } +}