Add event stripes component

socreatory · Apr 4, 2024 · 32c05c2 · 32c05c2
1 parent 299fb89
commit 32c05c2
Show file tree

Hide file tree

Showing 34 changed files with 992 additions and 458 deletions.
diff --git a/aiur.config.js b/aiur.config.js
@@ -35,6 +35,7 @@ module.exports = {
         privacy: "./lib/views/privacy/privacy.md",
         site_notice: "./lib/views/site_notice/site_notice.md",
         trainings_overview: "./lib/views/trainings_overview/trainings_overview.md",
+        trainings_dates: "./lib/views/trainings_dates/trainings_dates.md",
         trainings_detail: "./lib/views/trainings_detail/trainings_detail.md",
         trainings_detail_isaqb: "./lib/views/trainings_detail/trainings_detail_isaqb.md",
         trainings_detail_power: "./lib/views/trainings_detail/trainings_detail_power.md",

diff --git a/lib/assets/images/illustrations/avatar-dummy.svg b/lib/assets/images/illustrations/avatar-dummy.svg
diff --git a/lib/assets/stylesheets/application.scss b/lib/assets/stylesheets/application.scss
@@ -2,14 +2,14 @@
 Fundamental Stylings
 */
 
+@import "../../fundamentals/spacers";
 @import "../../fundamentals/helpers";
 @import "../../fundamentals/colors";
 @import "../../fundamentals/typography";
 @import "../../fundamentals/base";
 @import "../../fundamentals/animations";
 @import "../../fundamentals/breakpoints";
 @import "../../fundamentals/shadows";
-@import "../../fundamentals/spacers";
 @import "https://pretix.eu/socreatory/widget/v1.css";
 
 /*
@@ -26,6 +26,7 @@ Application specific code
 @import "../../components/buttons/buttons";
 @import "../../components/cards/cards";
 @import "../../components/customer_logo/customer_logo";
+@import "../../components/event-stripe/event-stripe";
 @import "../../components/feature/feature";
 @import "../../components/filter/filter";
 @import "../../components/footer/footer";

diff --git a/lib/blueprints/container-layouts/container/_container.scss b/lib/blueprints/container-layouts/container/_container.scss
@@ -13,7 +13,7 @@
   padding: 0 $spacer-xs;
 
   > * + * {
-    margin-top: $spacer-base;
+    margin-top: $spacer-md;
   }
 
   > * {
@@ -69,6 +69,27 @@
   padding-bottom: $spacer-base;
 }
 
+.container--2-col,
+%container--2-col {
+  @include for-tablet-landscape-up {
+    display: grid;
+    grid-template-areas: "left right";
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+    gap: $spacer-base;
+
+    > div {
+      margin-top: 0;
+    }
+  }
+
+  width: 100%;
+
+  > * + * {
+    margin-top: $spacer-base;
+  }
+}
+
 // Deprecated Class TODO Replace everywhere
 .container__fullwidth {
   @include for-tablet-landscape-up {

diff --git a/lib/components/buttons/_buttons.scss b/lib/components/buttons/_buttons.scss
@@ -27,7 +27,7 @@
   @extend %base-button;
 
   width: auto;
-  padding: $spacer-sm $spacer-md;
+  padding: $spacer-xs $spacer-sm;
 
   font-size: $font-size-sm;
   color: $brand-text;

diff --git a/lib/components/cards/_cards.scss b/lib/components/cards/_cards.scss
@@ -1,7 +1,7 @@
 .cards {
   @include for-tablet-landscape-up {
     grid-template-columns: 1fr 1fr;
-    gap: 1.5rem;
+    gap: $spacer-md;
   }
 
   @include for-desktop-xl-up {
@@ -11,7 +11,7 @@
   display: grid;
   grid-auto-rows: auto;
   grid-template-columns: 1fr;
-  gap: $spacer-md;
+  gap: $spacer-xs;
   align-content: stretch;
 
   width: 100%;
@@ -29,19 +29,18 @@
 
 .card {
   position: relative;
-
-  display: grid;
-  grid-row: span 3;
-  gap: 0;
-
   background-color: $brand-white-1;
-
   transition: all 250ms ease;
 }
 
-.card__link {
+.card__title {
+  margin-bottom: $spacer-2xs;
   font-size: $font-size-lg;
+  line-height: $heading-line-height-sm;
   hyphens: auto;
+}
+
+.card__link {
   color: $brand-text;
   text-decoration: none;
 }
@@ -91,15 +90,9 @@
   border-left: 10px solid $brand-tertiary;
 }
 
-.card__title {
-  margin-bottom: $spacer-2xs;
-  font-size: $font-size-xl;
-  line-height: $heading-line-height-sm;
-  hyphens: auto;
-}
-
 .card__text {
   font-size: $font-size-md;
+  line-height: $heading-line-height-sm;
 }
 
 .card__label {

diff --git a/lib/components/event-stripe/_event-stripe.scss b/lib/components/event-stripe/_event-stripe.scss
@@ -0,0 +1,110 @@
+.trainings-section {
+  @extend %container;
+  @extend %container--xl;
+  @extend %container-vertical-spacing-xl;
+}
+
+.event-stripe__list {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  gap: $spacer-xs;
+
+  width: 100%;
+  margin-bottom: $spacer-md;
+  padding-left: 0;
+
+  list-style-type: none;
+}
+
+.event-stripe {
+  position: relative;
+
+  display: grid;
+  grid-column-gap: $spacer-xs;
+  grid-template-columns: $spacer-lg auto;
+  grid-template-rows: auto;
+
+  width: 100%;
+  padding: $spacer-xs $spacer-sm;
+
+  background-color: $brand-white-1;
+  border-left: 5px solid $brand-secondary;
+
+  transition: all 250ms ease;
+
+  > * {
+    margin-bottom: 0;
+  }
+
+  .avatar {
+    grid-column: 1;
+    grid-row: 2/4;
+    align-self: center;
+
+    width: $spacer-lg;
+    height: $spacer-lg;
+  }
+}
+
+.event-stripe--isaqb {
+  border-left: 5px solid $brand-primary;
+}
+
+.event-stripe--power {
+  border-left: 5px solid $brand-tertiary;
+}
+
+.event-stripe__title {
+  display: block;
+  grid-column: 1/3;
+  grid-row: 1;
+
+  margin-bottom: $spacer-2xs;
+
+  font-size: $font-size-base;
+  line-height: $heading-line-height-sm;
+  hyphens: auto;
+
+  a {
+    color: $brand-text;
+    text-decoration: none;
+
+    &::after {
+      content: "";
+
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    &:hover {
+      text-decoration: underline;
+      text-decoration-thickness: $spacer-3xs;
+      text-underline-offset: $spacer-3xs;
+    }
+  }
+}
+
+.event-stripe__location {
+  display: block;
+  grid-column: 2;
+  grid-row: 2;
+
+  font-size: $font-size-md;
+  line-height: $heading-line-height-sm;
+}
+
+.event-stripe__date {
+  @extend %heading-font-bold;
+
+  grid-column: 2;
+  grid-row: 2;
+
+  margin-top: $spacer-2xs;
+
+  font-size: $font-size-md;
+  line-height: $heading-line-height-sm;
+}
diff --git a/lib/components/header/_header.scss b/lib/components/header/_header.scss
@@ -1,10 +1,5 @@
 //TODO: Refactor
 .header {
-  @include for-tablet-landscape-up {
-    margin-bottom: $spacer-xl;
-  }
-
-  margin-bottom: $spacer-sm;
   padding: $spacer-lg 0 $spacer-lg 0;
 
   > * + * {
@@ -81,10 +76,6 @@
   margin-right: $spacer-base * 0.7;
 }
 
-.header-color--normal {
-  background-color: $brand-background;
-}
-
 .header-color--highlighted-1 {
   background-color: $brand-primary-light;
 }

diff --git a/lib/components/header/header.md b/lib/components/header/header.md
@@ -66,7 +66,7 @@ ISAQB Training Header
 ## Header mit Image
 
 ```html
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
@@ -85,7 +85,7 @@ ISAQB Training Header
 ## Header Simpel
 
 ```html
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
@@ -103,7 +103,7 @@ ISAQB Training Header
 ## Breadcrumb Header
 
 ```html
-<header class="header--breadcrumb header-color--normal">
+<header class="header--breadcrumb ">
     <div class="container container--xl">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">

diff --git a/lib/fundamentals/_helpers.scss b/lib/fundamentals/_helpers.scss
@@ -16,3 +16,16 @@
   clip-path: inset(50%);
   border: 0;
 }
+
+/* stylelint-disable declaration-no-important */
+.m-t-lg {
+  margin-top: $spacer-lg !important;
+}
+
+.m-t-xl {
+  margin-top: $spacer-xl !important;
+}
+
+.m-t-2xl {
+  margin-top: $spacer-2xl !important;
+}
diff --git a/lib/views/about/about.md b/lib/views/about/about.md
@@ -31,7 +31,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">

diff --git a/lib/views/contact/contact.md b/lib/views/contact/contact.md
@@ -31,7 +31,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">

diff --git a/lib/views/customer-pages/customer-profile-edit-page/customer-profile-edit-page.md b/lib/views/customer-pages/customer-profile-edit-page/customer-profile-edit-page.md
@@ -39,7 +39,7 @@ See [All available alert styles](https://styleguide.socreatory.com/molecules/ale
     </nav>
 </scroll-nav>
 
-<header class="header--breadcrumb header-color--normal">
+<header class="header--breadcrumb ">
     <div class="container container--xl">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">

diff --git a/lib/views/customer-pages/customer-profile-page/customer-profile-page.md b/lib/views/customer-pages/customer-profile-page/customer-profile-page.md
@@ -34,7 +34,7 @@ See [All available alert styles](https://styleguide.socreatory.com/molecules/ale
     </nav>
 </scroll-nav>
 
-<header class="header--breadcrumb header-color--normal">
+<header class="header--breadcrumb ">
     <div class="container container--xl">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
@@ -46,7 +46,7 @@ See [All available alert styles](https://styleguide.socreatory.com/molecules/ale
 </header>
 
 <main class="customer-profile-page">
-    <section class="container container--md container--centered">
+    <section class="container container--md container--centered container-vertical-spacing-xl">
         <div class="alert alert--info">
             <p class="alert__text"><strong>Erfolg!</strong> Vielen Dank.</p>
             <button class="alert__btn" type="button">

diff --git a/lib/views/customer-pages/customer-trainings-page/customer-trainings-page.md b/lib/views/customer-pages/customer-trainings-page/customer-trainings-page.md
@@ -35,7 +35,7 @@ description: Customer Trainings Page
     </nav>
 </scroll-nav>
 
-<header class="header--breadcrumb header-color--normal">
+<header class="header--breadcrumb ">
     <div class="container container--xl">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">