Skip to content

Commit

Permalink
Add trainer trainings detail page
Browse files Browse the repository at this point in the history
  • Loading branch information
nanoparsec committed Oct 11, 2023
1 parent 9a8857c commit dcbc985
Show file tree
Hide file tree
Showing 8 changed files with 161 additions and 28 deletions.
1 change: 1 addition & 0 deletions aiur.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ module.exports = {
trainer_overview: "./lib/views/trainer/trainer_overview.md",
trainer_detail: "./lib/views/trainer/trainer_detail.md",
trainer_trainings_overview: "./lib/views/trainer_pages/trainer_trainings_overview_page/trainer_trainings_overview_page.md",
trainer_trainings_detail: "./lib/views/trainer_pages/trainer_trainings_detail_page/trainer_trainings_detail_page.md",
},
},

Expand Down
5 changes: 4 additions & 1 deletion lib/blueprints/container-layouts/container/_container.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@

display: flex;
flex-direction: column;
align-items: center;

width: 100%;
margin: 0 auto;
Expand All @@ -31,6 +30,10 @@
max-width: $tablet-landscape;
}

.container--centered {
align-items: center;
}

.container__fullwidth {
@include for-tablet-landscape-up {
padding: 0 $spacer-base;
Expand Down
41 changes: 26 additions & 15 deletions lib/components/header/header.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
title: Header
description: Header

ISAQB Training Header

```html
<header class="header header-color--highlighted-1">
<div class="container__fullwidth">
<div class="breadcrumb">
<ul class="breadcrumb__list">
<li class="breadcrumb__item"><a href="#">Home</a></li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span> <a href="#"> Schulungen</a></li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span> Agile Softwarearchitektur</li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span> Breadcrumb</li>
</ul>
</div>
<h1 class="header__heading">Reduzierte Wartungskosten durch evolutionäre Verbesserung</h1>
<p class="header__subheading">Seminar iSAQB CPSA-Advanced AGILA — 3 Tage</p>
<h1 class="header__heading">Ich bin eine Headline</h1>
<p class="header__subheading">Ich bin eine Subheadline</p>
<div class="header__logogrid">
<div class="logogrid__left">
<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 class="pill"><span class="pill__label">Pill</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Pill</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Pill</span><span class="pill__number">10</div>
</div>
</div>
<div class="logogrid__right">
Expand All @@ -32,18 +34,20 @@ description: Header
</header>
```

## Header Powerworkshop

```html
<header class="header header-color--highlighted-3">
<div class="container__fullwidth">
<div class="breadcrumb">
<ul class="breadcrumb__list">
<li class="breadcrumb__item"><a href="#">Home</a></li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span> <a href="#"> Schulungen</a></li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span> Agile Softwarearchitektur</li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span> <a href="#">Homr</a></li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span> Breadcrumb</li>
</ul>
</div>
<h1 class="header__heading">Reduzierte Wartungskosten durch evolutionäre Verbesserung</h1>
<p class="header__subheading">Lorem ipsum</p>
<h1 class="header__heading">Ich bin eine Headline</h1>
<p class="header__subheading">Ich bin eine Subheadline</p>
<div class="header__logogrid">
<div class="logogrid__left">
<p>Powerworkshop</p>
Expand All @@ -59,23 +63,27 @@ description: Header
</header>
```

## Header mit Image

```html
<header class="header header-color--normal">
<div class="container__fullwidth">
<div class="breadcrumb">
<ul class="breadcrumb__list">
<li class="breadcrumb__item"><a href="#">Home</a></li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span> Über uns</li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span> Breadcrumb</li>
</ul>
</div>
</div>
<div class="container__centered">
<img class="header__image" src="/snippet/images/illustrations/Wersindwir.png" alt="" />
<h1 class="header__heading header__heading--centered">Wir setzen Maßstäbe in der Softwarearchitektur. Daran kannst du uns messen.</h1>
<h1 class="header__heading header__heading--centered">Ich bin eine Headline</h1>
</div>
</header>
```

## Header Simpel

```html
<header class="header header-color--normal">
<div class="container__fullwidth">
Expand All @@ -92,15 +100,18 @@ description: Header
</header>
```

## Breadcrumb Header

```html
<header class="header header-color--normal">
<div class="container__fullwidth">
<header class="header--breadcrumb header-color--normal">
<div class="container container--xl">
<div class="breadcrumb">
<ul class="breadcrumb__list">
<li class="breadcrumb__item"><a href="#">Home</a></li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span>Profil bearbeiten</li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span>Meine Trainings</li>
</ul>
</div>
<h1>Meine Trainings</h1>
</div>
</header>
```
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ See [All available alert styles](https://styleguide.socreatory.com/molecules/ale
<p class="announcement__text">🔥 It‘s H.O.T. <a class="announcement__link" href="/de/topics/data-mesh-workshop/">Get ice cream for free</a></p>
</div>

<header class="header header-color--normal">
<div class="container__fullwidth">
<header class="header--breadcrumb header-color--normal">
<div class="container container--xl">
<div class="breadcrumb">
<ul class="breadcrumb__list">
<li class="breadcrumb__item"><a href="#">Home</a></li>
Expand All @@ -53,7 +53,7 @@ See [All available alert styles](https://styleguide.socreatory.com/molecules/ale
</header>

<main class="customer-profile-edit-page">
<section class="container container--md">
<section class="container container--md container--centered">
<div class="alert alert--info">
<p class="alert__text"><strong>Erfolg!</strong> Vielen Dank.</p>
<button class="alert__btn" type="button">
Expand Down Expand Up @@ -88,7 +88,7 @@ See [All available alert styles](https://styleguide.socreatory.com/molecules/ale
</form>
</div>
</section>
<div class="container container--md">
<div class="container container--md container--centered">
<h2 class="login-form__headline">Profil löschen</h2>
<p>
Du kannst dein Profil bei uns ganz einfach löschen. Natürlich hast du danach keinen Zugriff mehr auf bereits absolvierte Trainings und die dazu gehörigen Zertifikate. Diese kannst du aber
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,19 +41,19 @@ See [All available alert styles](https://styleguide.socreatory.com/molecules/ale
<p class="announcement__text">🔥 It‘s H.O.T. <a class="announcement__link" href="/de/topics/data-mesh-workshop/">Get ice cream for free</a></p>
</div>

<header class="header header-color--normal">
<div class="container__fullwidth">
<header class="header--breadcrumb header-color--normal">
<div class="container container--xl">
<div class="breadcrumb">
<ul class="breadcrumb__list">
<li class="breadcrumb__item"><a href="#">Home</a></li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span>Profil</li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span>Msin Profil</li>
</ul>
</div>
</div>
</header>

<main class="customer-profile-page">
<section class="container container--md">
<section class="container container--md container--centered">
<div class="alert alert--info">
<p class="alert__text"><strong>Erfolg!</strong> Vielen Dank.</p>
<button class="alert__btn" type="button">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ description: Customer Trainings Page
</p>
</div>

<header class="header header-color--normal">
<div class="container__fullwidth">
<header class="header--breadcrumb header-color--normal">
<div class="container container--xl">
<div class="breadcrumb">
<ul class="breadcrumb__list">
<li class="breadcrumb__item"><a href="#">Home</a></li>
Expand All @@ -52,8 +52,9 @@ description: Customer Trainings Page
</div>
</header>


<main>
<section class="container container--xl">
<section class="container container--xl container--centered">
<h1 class="header__heading">Deine Trainings</h1>
<ul class="cards">
<li>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
title: Trainer:innen Trainings Detail Page
description: Backend-View for Trainers shows details of a specific training

```html
<scroll-nav>
<nav class="navbar-wrapper">
<div class="navbar">
<a href="#" class="navbar__brand-link">
<img class="navbar__logo" src="/snippet/images/logos/soc_logo.svg" alt="Software Creators Academy Logo" />
</a>
<input type="checkbox" id="profile__checkbox" />
<ul role="list" aria-label="Profilbereich" class="navigation-profile">
<li><a href="#">Profil</a></li>
<li><a href="#">Meine Trainings</a></li>
<li><a href="#">Logout</a></li>
</ul>
<label class="profile-label" for="profile__checkbox">Mein Name</label>
<input type="checkbox" id="navbar__checkbox" />
<div class="navigation-main">
<ul role="list" aria-label="Seitennavigation" class="navbar__items">
<li><a href="#" class="navbar__item">Trainings</a></li>
<li><a href="#" class="navbar__item">Trainer:innen</a></li>
<li><a href="#" class="navbar__item">Preise</a></li>
<li><a href="#" class="navbar__item">iSAQB</a></li>
</ul>
<ul class="navigation-meta" role="list" aria-label="Verfügbare Sprachen">
<li><a lang="de" href="#" title="Zu Deutsch wechseln" aria-label="Zu Deutsch wechseln" class="navigation-meta__item">DE</a></li>
<li><a lang="en" href="#" title="Switch to English" aria-label="Switch to English" aria-current="true" class="navigation-meta__item">EN</a></li>
</ul>
</div>
<label class="navbar__burger" for="navbar__checkbox"></label>
</div>
</nav>
</scroll-nav>

<header class="header--breadcrumb header-color--normal">
<div class="container container--xl">
<div class="breadcrumb">
<ul class="breadcrumb__list">
<li class="breadcrumb__item"><a href="#">Home</a></li>
<li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span>Training</li>
</ul>
</div>
<h1>TRAINING - 10.-12.1.2030</h1>
<p>öffentlich</p>
</div>
</header>

<main class="trainer-trainings-overview-page">
<h2>Teilnehmer:innen</h2>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Datum der Anmeldung</th>
<th>Bereits besucht</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hans Wurst</td>
<td>hans.wurst@example.com</td>
<td>1.1.2022</td>
<td>TRAINING1, TRAINING2, TRAINING3</td>
</tr>
<tr>
<td>2</td>
<td>Hans Wurst</td>
<td>hans.wurst@example.com</td>
<td>1.1.2022</td>
<td>TRAINING</td>
</tr>
<tr>
<td>3</td>
<td>Hans Wurst</td>
<td>hans.wurst@example.com</td>
<td>1.1.2022</td>
<td>TRAINING</td>
</tr>
</tbody>
</table>
</main>
<footer class="footer">
<div class="footer__top">
<div class="container__fullwidth">
<div class="footer__content">
<img class="footer__logo" src="/snippet/images/logos/soc_logo.svg" alt="Software Creators Academy Logo" />
<div class="footer__linkarea">
<ul class="footer__links">
<li class="footer__link"><a href="#">Trainings</a></li>
<li class="footer__link"><a href="#">Trainer:innen</a></li>
<li class="footer__link"><a href="#">Modulbaukasten</a></li>
<li class="footer__link"><a href="#">News</a></li>
</ul>
<ul class="footer__links">
<li class="footer__link"><a href="#">Impressum</a></li>
<li class="footer__link"><a href="#">Datenschutz</a></li>
<li class="footer__link"><a href="#">AGB</a></li>
<li class="footer__link"><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer__bottom">
<div class="container__fullwidth">
<div class="footer__content">
<div class="footer__company">socreatory — The Software Creators’ Academy</div>
<div class="footer__copyright">©2023</div>
</div>
</div>
</div>
</footer>
```
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ description: Backend-View for Trainers shows a list of all training a trainer is
</scroll-nav>

<header class="header--breadcrumb header-color--normal">
<div class="container__fullwidth">
<div class="container container--xl">
<div class="breadcrumb">
<ul class="breadcrumb__list">
<li class="breadcrumb__item"><a href="#">Home</a></li>
Expand Down

0 comments on commit dcbc985

Please sign in to comment.