Skip to content

Commit

Permalink
Refactor filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@nanoparsec
nanoparsec committed Apr 8, 2024
1 parent 9aa2dcd commit bc08f6c
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 164 deletions.
8 changes: 1 addition & 7 deletions lib/components/filter/_filter.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
// Filters
.filters {
display: flex;
justify-content: center;
margin: $spacer-lg 0;
}

.filters__list {
@include for-tablet-landscape-up {
flex-direction: row;
Expand All @@ -13,6 +6,7 @@

display: flex;
flex-direction: column;
justify-content: center;
gap: $spacer-base;

padding: 0;
Expand Down
300 changes: 143 additions & 157 deletions lib/views/trainings_overview/trainings_overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,189 +52,175 @@ description: Description
</header>

<main>
<div class="container__centered">
<section class="section">
<div class="section__1col markdown">
<p>Hier findest Du unser komplettes Angebot. Wenn Du speziell an iSAQB®-Trainings interessiert bist, hilft Dir <a href="#">unser praktischer Modulbaukasten:</a> Mit wenigen Klicks stellst Du Dir dort Dein individuelles Trainingsprogramm zusammen.
</p>
</div>
</section>
<div class="container container--md container--centered">
<div class="section__1col markdown">
<p>Hier findest Du unser komplettes Angebot. Wenn Du speziell an iSAQB®-Trainings interessiert bist, hilft Dir <a href="#">unser praktischer Modulbaukasten:</a> Mit wenigen Klicks stellst Du Dir dort Dein individuelles Trainingsprogramm zusammen.
</p>
</div>
</div>
<div class="container__fullwidth">
<section class="section section--home">
<div class="filters">
<ul class="filters__list">
<li class="filters__item filters__item--active"><a href="#" class="filters__link">Alle</a></li>
<li class="filters__item "><a href="#" class="filters__link filters__link--isaqb">iSAQB Trainings</a></li>
<li class="filters__item "><a href="#" class="filters__link filters__link--power">Powerworkshops</a></li>
<li class="filters__item filters__item--inactive">Auswahl Modulbaukasten</li>
</ul>
</div>
<ul class="cards">
<li class="card card--isaqb">
<div class="card__body ">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.</p>
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</div>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">2.100 €</p>
</div>
<div>
<p class="card__label">iSAQB® Modul ARC</p>
</div>

<section class="container container--xl container-vertical-spacing-xl container--centered">
<ul class="filters__list">
<li class="filters__item filters__item--active"><a href="#" class="filters__link">Alle</a></li>
<li class="filters__item "><a href="#" class="filters__link filters__link--isaqb">iSAQB Trainings</a></li>
<li class="filters__item "><a href="#" class="filters__link filters__link--power">Powerworkshops</a></li>
<li class="filters__item filters__item--inactive">Auswahl Modulbaukasten</li>
</ul>
<ul class="cards m-t-lg">
<li class="card card--isaqb">
<div class="card__body ">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.</p>
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</div>
</div>
</li>
<li class="card card--isaqb">
<div class="card__body ">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.</p>
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">2.100 €</p>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">2.100 €</p>
</div>
<div>
<p class="card__label">iSAQB® Modul ARC</p>
</div>
<div>
<p class="card__label">iSAQB® Modul ARC</p>
</div>
</div>
</li>
<li class="card card--isaqb">
<div class="card__body ">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Evolution und Verbesserung von Softwarearchitekturen</a></h3>
<p class="card__text">Mit Domain-driven Design, Event Storming und ML Design Canvas AI-Produkte entwerfen.</p>
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</div>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">2.100 €</p>
</div>
<div>
<p class="card__label">iSAQB® Modul ARC</p>
</div>
</div>
</li>
<li class="card card--isaqb">
<div class="card__body ">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.</p>
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</div>
</div>
</li>
<li class="card card--isaqb">
<div class="card__body ">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.</p>
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">2.100 €</p>
</div>
<div>
<p class="card__label">iSAQB® Modul ARC</p>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">ab 2.100 €</p>
</div>
<div>
<p class="card__label">iSAQB® Modul ARC</p>
</div>
</div>
</div>
</li>
<li class="card card--isaqb">
<div class="card__body ">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Evolution und Verbesserung von Softwarearchitekturen</a></h3>
<p class="card__text">Mit Domain-driven Design, Event Storming und ML Design Canvas AI-Produkte entwerfen.</p>
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</div>
</div>
</li>
<li class="card card--power">
<div class="card__body ">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Leichtgewichtige Architekturdokumentation</a></h3>
<p class="card__text">Softwarearchitekturen festhalten und kommunizieren</p>
<div class="card__body__bottom">
<div>
<p class="card__price">2.100 €</p>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">700 €</p>
</div>
<div>
<p class="card__label">Powerworkshop</p>
</div>
<div>
<p class="card__label">iSAQB® Modul ARC</p>
</div>
</div>
</li>
<li class="card">
<div class="card__body">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Evolution und Verbesserung von Softwarearchitekturen</a></h3>
<p class="card__text">Mit Domain-driven Design, Event Storming und ML Design Canvas AI-Produkte entwerfen.</p>
</div>
</li>
<li class="card card--isaqb">
<div class="card__body ">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.</p>
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</div>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">ab 2.100 €</p>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">2.100 €</p>
</div>
<div>
<p class="card__label">iSAQB® Modul ARC</p>
</div>
</div>
</li>
<li class="card">
<div class="card__body">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Docker und Kubernetes Hands-On</a></h3>
<p class="card__text">Technische Hintergründe und Konzepte hinter Docker und Kubernetes</p>
</div>
</li>
<li class="card card--power">
<div class="card__body ">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Leichtgewichtige Architekturdokumentation</a></h3>
<p class="card__text">Softwarearchitekturen festhalten und kommunizieren</p>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">700 €</p>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">2.100 €</p>
</div>
<div>
<p class="card__label">Powerworkshop</p>
</div>
</div>
</li>
<li class="card">
<div class="card__body">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Data Mesh: Einführung</a></h3>
<p class="card__text">Training für Softwarearchitekt:innen und Datenexpert:innen</p>
</div>
</li>
<li class="card">
<div class="card__body">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Evolution und Verbesserung von Softwarearchitekturen</a></h3>
<p class="card__text">Mit Domain-driven Design, Event Storming und ML Design Canvas AI-Produkte entwerfen.</p>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">2.100 €</p>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">auf Anfrage</p>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__body">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Docker und Kubernetes Hands-On</a></h3>
<p class="card__text">Technische Hintergründe und Konzepte hinter Docker und Kubernetes</p>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">2.100 €</p>
</div>
</div>
</li>
<li class="card">
<div class="card__body">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Advanced Product Owner</a></h3>
<p class="card__text">Verantwortung für den vollen Produktzyklus</p>
</div>
</li>
<li class="card">
<div class="card__body">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Data Mesh: Einführung</a></h3>
<p class="card__text">Training für Softwarearchitekt:innen und Datenexpert:innen</p>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">auf Anfrage</p>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">2.100 €</p>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card__body">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Advanced Product Owner</a></h3>
<p class="card__text">Verantwortung für den vollen Produktzyklus</p>
</div>
<div class="card__body__bottom">
<div>
<p class="card__price">2.100 €</p>
</div>
</div>
</li>
</ul>
</section>

<section class="section section--home">
<div class="quote quote--center">
<blockquote class="quote__blockquote">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum possimus corrupti amet.</blockquote>
<div class="quote__name">Alexander Trapp</div>
<div class="quote__role">Developer IoT & Cloud bei GIB mbH</div>
</div>
</section>

</div>
</div>
</li>
</ul>
</section>
</main>

<footer>
Expand Down

0 comments on commit bc08f6c

Please sign in to comment.