Add home cards

package-lock.json

@@ -21,6 +21,7 @@
         "@angular/router": "^16.2.0",
         "@nguniversal/express-engine": "^16.2.0",
         "express": "^4.15.2",
+        "normalize.css": "^8.0.1",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.13.0"
@@ -10525,6 +10526,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "node_modules/npm-bundled": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-3.0.0.tgz",

package.json

@@ -27,6 +27,7 @@
     "@angular/router": "^16.2.0",
     "@nguniversal/express-engine": "^16.2.0",
     "express": "^4.15.2",
+    "normalize.css": "^8.0.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
@@ -47,4 +48,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.1.3"
   }
-}
+}

src/app/app.module.ts

@@ -7,11 +7,13 @@ import {MatCardModule} from "@angular/material/card";
 import { AppRoutingModule } from './app-routing.module';
 import { HomeComponent } from './home/home.component';
 import {MatButtonModule} from "@angular/material/button";
+import { HomeCardComponent } from './home-card/home-card.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    HomeComponent
+    HomeComponent,
+    HomeCardComponent
   ],
     imports: [
         BrowserModule,

src/app/home-card/home-card.component.html

@@ -0,0 +1,8 @@
+<a target="_blank" tabindex="0" (click)="triggerAction()" (keyup.enter)="triggerAction()" >
+  <div class="content-container">
+    <ng-content></ng-content>
+  </div>
+  <div class="thumb-container" [style]="{background: background}">
+
+  </div>
+</a>

src/app/home-card/home-card.component.scss

@@ -0,0 +1,55 @@
+.thumb-container {
+  width: 100%;
+  min-width: 200px;
+  height: 200px;
+  border-radius: 24px;
+}
+
+:host[size="small"] {
+  grid-column: span 2;
+  justify-content: start;
+}
+
+:host {
+
+
+
+
+  > a {
+    &:hover {
+      background: var(--theme-color-secondary-container)
+    }
+
+    display: flex;
+    flex-direction: column-reverse;
+    overflow: hidden;
+
+    border-radius: 24px;
+
+    transition: border-radius .3s cubic-bezier(.2,0,0,1),background-color .3s cubic-bezier(.2,0,0,1);
+
+
+    background: var(--theme-color-surface-1);
+
+    cursor: pointer;
+
+    &:focus {
+      outline: 2px solid var(--theme-color-on-surface);
+      border-radius: 48px;
+    }
+  }
+}
+
+.content-container {
+  margin: 24px;
+  display: grid;
+  gap: 8px;
+}
+
+:host ::ng-deep .title {
+  font-size: var(--theme-headline-s-font-size);
+  font-weight: var(--theme-headline-s-font-weight);
+  letter-spacing: var(--theme-headline-s-letter-spacing);
+
+  transition: font-variation-settings .3s cubic-bezier(.2,0,0,1);
+}

src/app/home-card/home-card.component.ts

@@ -0,0 +1,21 @@
+import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'app-home-card',
+  templateUrl: './home-card.component.html',
+  styleUrls: ['./home-card.component.scss']
+})
+export class HomeCardComponent {
+  @Input() background: string = '';
+  @Output() action = new EventEmitter<any>();
+
+  @HostBinding('attr.size') @Input() size: 'small' | 'medium' | 'large' = 'small';
+
+  onClick() {
+    console.log('on click')
+  }
+
+  triggerAction() {
+    this.action.emit();
+  }
+}

src/app/home/home.component.html

@@ -1,7 +1,8 @@
 <div class="page">
   <main>
     <header class="content-centered">
-      <div class="primary-container full-width" style="background-image:url(assets/rescla_civilian_white_first_aid_tent_without_sides_on_a_festiva_67f9c388-7d5a-4d56-87c1-40e138a005c0-gray.png)">
+<!--      <div class="primary-container full-width" style="background-image:url(assets/rescla_civilian_white_first_aid_tent_without_sides_on_a_festiva_67f9c388-7d5a-4d56-87c1-40e138a005c0-gray.png)">-->
+      <div class="primary-container full-width">
         <div class="wrapper">
           <h1>Hulp&shy;verlening</h1>
           <div class="description">
@@ -16,5 +17,25 @@
         </div>
       </div>
     </header>
+    <div class="content-container">
+      <app-home-card [background]="background1" (action)="navigateToCursussen()">
+        <span class="title">Cursussen</span>
+        <span class="description">
+          Voor mensen die een cursus willen volgen
+        </span>
+      </app-home-card>
+      <app-home-card [background]="background2">
+        <span class="title">Lid worden</span>
+        <span class="description">
+          Heb je EHBO en wil je lid worden?
+        </span>
+      </app-home-card>
+      <app-home-card [background]="background3">
+        <span class="title">Leden</span>
+        <span class="description">
+          Voor huidige leden
+        </span>
+      </app-home-card>
+    </div>
   </main>
 </div>

src/app/home/home.component.scss

@@ -37,10 +37,14 @@ header {
     padding: 56px;
     border-radius: 24px;
 
+
+
     background: var(--theme-color-surface-1);
-    background-repeat: no-repeat;
-    background-position: 0 50%;
-    background-size: cover;
+    background: #95E5CA;
+    background: linear-gradient(90deg, #95E5CA 0%, #FDCDCD 100%);
+    //background-repeat: no-repeat;
+    //background-position: 0 50%;
+    //background-size: cover;
 
     .wrapper {
       max-width: 1200px;
@@ -100,8 +104,33 @@ h1 {
     font-size: var(--theme-headline-s-font-size);
     font-weight: var(--theme-headline-s-font-weight);
     letter-spacing: var(--theme-headline-s-letter-spacing);
-
-
-
   }
 }
+
+
+.content-container {
+  margin-top: 96px;
+  max-width: 1200px;
+  width: 100%;
+
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-flow: row;
+  grid-auto-rows: minmax(var(--min-row-height),auto);
+}
+
+.section {
+  margin: 96px 0;
+}
+
+.card-set {
+  --min-row-height: 320px;
+  --stacked-col-max-height: 198px;
+
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-flow: row;
+  grid-auto-rows: minmax(var(--min-row-height), auto);
+}

src/app/home/home.component.ts

@@ -7,4 +7,11 @@ import { Component } from '@angular/core';
 })
 export class HomeComponent {
 
+  background1 = 'linear-gradient(90deg, #F8C5CC 0%, #B0A4DF 100%)'
+  background2 = 'linear-gradient(90deg, #BDED9E 0%, #BCFEE2 100%)'
+  background3 = 'linear-gradient(90deg, #CDC0B2 0%, #F4F576 33.33%, #EEEFE0 50%, #F4F576 66.666%, #CDC0B2 100%)'
+
+  navigateToCursussen() {
+    console.log('hello world')
+  }
 }

src/styles.scss

@@ -1,5 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
 
+@import "normalize.css";
+@import "styles/_custom-reset.scss";
+
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
@@ -7,11 +10,19 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 body {
   box-sizing: border-box;
 
-  --theme-color-background: #1f1f1f;
-  --theme-color-on-background: #e3e3e3;
-  --theme-color-surface-1: #282928;
-  --theme-color-primary: #a8c7fa;
-  --theme-color-on-primary: #062e6f;
+  //--theme-color-background: #1f1f1f;
+  --theme-color-background: #fff;
+  //--theme-color-on-background: #e3e3e3;
+  --theme-color-on-background: #1f1f1f;
+  //--theme-color-surface-1: #282928;
+  --theme-color-surface-1: #faf8fd;
+  //--theme-color-primary: #a8c7fa;
+  --theme-color-primary: #0b57d0;
+  //--theme-color-on-primary: #062e6f;
+  --theme-color-on-primary: #fff;
+
+  --theme-color-secondary-container: #c2e7ff;
+  --theme-color-on-surface: #1f1f1f;
 
 
   --theme-title-l-font-family: "Google Sans Text", sans-serif;
@@ -33,14 +44,25 @@ body {
   --theme-hero-font-weight: 475;
   --theme-hero-letter-spacing: normal;
 
+  --min-row-height: 320px;
+
 
   .mat-mdc-unelevated-button.mat-primary {
     --mdc-filled-button-container-color: var(--theme-color-primary);
     --mdc-filled-button-label-text-color: var(--theme-color-on-primary);
   }
 
-
-
   background: var(--theme-color-background);
 
 }
+
+// Main styling
+.content-container {
+  max-width: 1200px;
+  width: 100%;
+}
+
+.section {
+  margin: 96px 0;
+}
+

src/styles/_custom-reset.scss

@@ -0,0 +1,42 @@
+// https://www.joshwcomeau.com/css/custom-css-reset/
+
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+/*
+  2. Remove default margin
+*/
+* {
+  margin: 0;
+}
+/*
+  Typographic tweaks!
+  3. Add accessible line-height
+  4. Improve text rendering
+*/
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+  5. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+  6. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+  font: inherit;
+}
+/*
+  7. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}