feat(start): Added image to startpage. (TV-563)

Squashed commit of the following:

commit 51311ee17f60c3faeb05fa04293301e60ff0c1ec
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Sep 10 08:45:29 2021 +0200

    Fixed margin-issue

commit e052b7b83121af8809214c5523367b58856954e2
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Sep 10 08:39:47 2021 +0200

    Added image to startpage

apps/mina-sidor-fa/src/app/pages/start/start.component.html

@@ -1,8 +1,21 @@
-<msfa-layout *ngIf="userRoles$ | async as userRoles; else loadingRef">
+<msfa-layout [showBreadCrumbs]="false" *ngIf="userRoles$ | async as userRoles; else loadingRef">
   <digi-typography>
     <section class="start">
       <header class="start__header">
-        <h1>Välkommen {{ userFullName$ | async }}</h1>
+        <div class="start__image-wrapper">
+          <h1 class="start__heading">Välkommen {{ userFullName$ | async }}</h1>
+          <digi-media-image
+            af-src="/assets/images/start_1280w.jpg"
+            af-srcset="
+              assets/images/start_600w.jpg  800w,
+              assets/images/start_800w.jpg  1050w,
+              assets/images/start_1000w.jpg 1200w
+            "
+            af-alt="En kvinna som tittar i kameran"
+            af-width="1000"
+            af-height="465"
+          ></digi-media-image>
+        </div>
         <ng-container *ngIf="isAuthorizedUser(userRoles); else unauthorizedRef">
           <p>
             Detta är Arbetsförmedlingens nya plattform för våra fristående aktörer, här kommer du bland annat kunna

apps/mina-sidor-fa/src/app/pages/start/start.component.scss

@@ -1,2 +1,20 @@
+@import 'variables/colors';
+@import 'variables/gutters';
+
 .start {
+  &__image-wrapper {
+    position: relative;
+    margin-bottom: $digi--layout--gutter--l;
+  }
+
+  &__heading {
+    position: absolute;
+    margin: 0;
+    bottom: $digi--layout--gutter--l;
+    left: calc(#{$digi--layout--gutter} * -1);
+    background-color: var(--digi--ui--color--complementary-alt);
+    color: var(--digi--typography--color--text--light);
+    padding: $digi--layout--gutter--s $digi--layout--gutter--l;
+    z-index: 1;
+  }
 }

apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.scss

@@ -14,10 +14,6 @@
   padding: 0 var(--digi--layout--gutter);
   height: $msfa__navigation-height;
 
-  @media (min-width: $digi--layout--breakpoint--m) {
-    height: $msfa__navigation-height-large;
-  }
-
   &__logo-wrapper {
     height: 100%;
     display: flex;
@@ -32,15 +28,6 @@
     }
   }
 
-  &__logo {
-    height: $msfa__navigation-height / 2.5;
-    vertical-align: middle;
-
-    @media (min-width: $digi--layout--breakpoint--m) {
-      height: $msfa__navigation-height-large / 2.5;
-    }
-  }
-
   &__list {
     @include msfa__reset-list;
     display: flex;

apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   position: sticky;
-  top: $msfa__navigation-height-large;
+  top: $msfa__navigation-height;
 
   &__list {
     @include msfa__reset-list;

apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss

@@ -12,10 +12,6 @@
     'sidebar content'
     'footer footer';
 
-  // @media (min-width: $digi--layout--breakpoint--m) {
-  //   grid-template-rows: $msfa__navigation-height-large 1fr auto;
-  // }
-
   &__header {
     grid-area: header;
     position: sticky;
@@ -32,12 +28,12 @@
   &__content {
     grid-area: content;
     max-width: $digi--layout--breakpoint--l;
-    padding: var(--digi--layout--gutter) $digi--layout--gutter--l $digi--layout--gutter--xxl;
+    padding: $digi--layout--gutter--l $digi--layout--gutter--l $digi--layout--gutter--xxl;
   }
 
   &__breadcrumbs {
     display: block;
-    margin-bottom: var(--digi--layout--gutter);
+    margin-bottom: $digi--layout--gutter;
   }
 
   &__footer {

apps/mina-sidor-fa/src/styles/variables/_navigation.scss

@@ -1,2 +1 @@
-$msfa__navigation-height: 2.5rem;
+$msfa__navigation-height: 4rem;
-$msfa__navigation-height-large: 4rem;