From 4e4474e14e9346b49f5c423f037aa5e382548f81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Tue, 22 Sep 2026 09:54:03 +0200 Subject: [PATCH] feat: add history graph pattern --- index.html | 1 + patterns/history-graph.html | 120 +++++++++++++++++++++++++++ styleguide.css | 1 + styles/48-patterns-history-graph.css | 45 ++++++++++ 4 files changed, 167 insertions(+) create mode 100644 patterns/history-graph.html create mode 100644 styles/48-patterns-history-graph.css diff --git a/index.html b/index.html index c28b7b3..cecf2f3 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,7 @@
  • Navigation Card
  • Left Navigation
  • Notifications
    • +
  • History Graph
  • Content Cards Group
  • Card Gruppe mit Tastennavigation
  • Formular mit Abschnitten
    • diff --git a/patterns/history-graph.html b/patterns/history-graph.html new file mode 100644 index 0000000..f4497c5 --- /dev/null +++ b/patterns/history-graph.html @@ -0,0 +1,120 @@ + + + + + + Styleguide – Pattern History Graph + + + + +

    Pattern – History Graph

    + +
    +

    Pattern: History Graph

    + +
    +
      +
    1. +
      +
      +

      Aktuellstes Ereignis mit einem einzelnen farbigen Segment.

      +
      +
      +
      2. + +
    2. +
      +
      +

      Ereignis mit mehreren unabhängig gefärbten Segmenten.

      +
      +
      +

      Der Inhalt, zum Beispiel Datum und Beschreibung, wird individuell durch das konsumierende Portal definiert.

      +
      +
      +
      3. + +
    3. +
      +
      +

      Ältestes dargestelltes Ereignis.

      +
      +
      +
      4. + +
    4. +
      +
      +

      Viertes Ereignis.

      +
      +
      +
      5. + +
    5. +
      +
      +

      Fünftes Ereignis.

      +
      +
      +
      6. + +
    6. +
      +
      +

      Sechstes Ereignis.

      +
      +
      +
      7. + +
    7. +
      +
      +

      Siebtes Ereignis.

      +
      +
      +
      8. + +
    8. +
      +
      +

      Achtes Ereignis.

      +
      +
      +
      9. + +
    9. +
      +
      +

      Neuntes Ereignis.

      +
      +
      +
      10. + +
    10. +
      +
      +

      Zehntes Ereignis.

      +
      +
      +
      11. +
    + + +
    +
    +
    + +
    +
    +
    +
    +
    + + + diff --git a/styleguide.css b/styleguide.css index 376890b..3e5a201 100644 --- a/styleguide.css +++ b/styleguide.css @@ -3,6 +3,7 @@ @import "./styles/03-typography-helpers.css"; @import "./styles/10-components-interactive-elements.css"; @import "./styles/47-patterns-file-upload.css"; +@import "./styles/48-patterns-history-graph.css"; @import "./styles/20-patterns-portal-header.css"; @import "./styles/21-patterns-options-row.css"; @import "./styles/22-patterns-object-card.css"; diff --git a/styles/48-patterns-history-graph.css b/styles/48-patterns-history-graph.css new file mode 100644 index 0000000..bed4ff0 --- /dev/null +++ b/styles/48-patterns-history-graph.css @@ -0,0 +1,45 @@ +/* ========================================================= */ +/* Pattern: History Graph */ +/* ========================================================= */ + +.sg-history-graph { + --layout-history-graph-connector-width: var(--score-marker-width); + --surface-history-graph-connector: var(--chart-marker-line); + width: 100%; +} + +.sg-history-graph__events { + display: flex; + flex-direction: column; + gap: var(--spacing-large); + width: 100%; + margin: 0; + padding: 0; + list-style: none; +} + +.sg-history-graph__event { + position: relative; + width: 100%; +} + +.sg-history-graph__event:not(:last-child)::after { + position: absolute; + top: 100%; + left: 50%; + width: var(--layout-history-graph-connector-width); + height: var(--spacing-large); + background: var(--surface-history-graph-connector); + content: ""; + transform: translateX(-50%); +} + +.sg-history-graph__card { + width: 100%; + max-width: var(--layout-object-card-min-width); + margin-inline: auto; +} + +.sg-history-graph__navigation { + width: 100%; +}