arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Erik Tiekstra
2021-09-10 08:46:47 +02:00
parent 270d46eb17
commit 7df0ed8526
10 changed files with 37 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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

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

@@ -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;
}
}