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

Added som basic functionality

Browse Source
This commit is contained in:
Erik Tiekstra
2021-03-17 10:58:55 +01:00
committed by Erik Tiekstra
parent dd743fd638
commit bf66859f06
20 changed files with 271 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/dafa-web/src/app/app.component.html
View File

@@ -1,11 +1,14 @@
<div [ngClass]="appClass">
<dafa-skip-to-content mainContentId="dafa-main-content"></dafa-skip-to-content>
<dafa-skip-to-content mainContentId="dafa-main-content"></dafa-skip-to-content>
<header class="dafa__header">
<dafa-navigation></dafa-navigation>
</header>
<header class="dafa__header">
<dafa-navigation></dafa-navigation>
</header>
<main id="dafa-main-content" class="dafa__main">
<main id="dafa-main-content" class="dafa__main">
<dafa-sidebar class="dafa__sidebar"></dafa-sidebar>
<div class="dafa__content">
<router-outlet></router-outlet>
</main>
</div>
</main>
</div>

25
apps/dafa-web/src/app/app.component.scss
View File

@@ -0,0 +1,25 @@
@import 'variables/gutters';
@import 'variables/navigation';
@import 'variables/breakpoints';
.dafa {
&__main {
display: grid;
grid-template-columns: 15rem 1fr;
grid-template-areas: 'sidebar content';
}
&__sidebar {
grid-area: sidebar;
height: calc(100vh - #{$dafa__navigation-height} - 1px);
@media (min-width: $af__breakpoint-m) {
height: calc(100vh - #{$dafa__navigation-height-large} - 1px);
}
}
&__content {
grid-area: content;
padding: $af__gutter-l;
}
}

3
apps/dafa-web/src/app/app.module.ts
View File

@@ -4,11 +4,12 @@ import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavigationModule } from './components/navigation/navigation.module';
import { SidebarModule } from './components/sidebar/sidebar.module';
import { SkipToContentModule } from './components/skip-to-content/skip-to-content.module';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule, AppRoutingModule, SkipToContentModule, NavigationModule],
imports: [BrowserModule, HttpClientModule, AppRoutingModule, SkipToContentModule, NavigationModule, SidebarModule],
providers: [],
bootstrap: [AppComponent],
})

6
apps/dafa-web/src/app/components/navigation/navigation.component.html
View File

@@ -1,10 +1,10 @@
<div class="navigation">
<div class="navigation__logo-wrapper">
<a [routerLink]="['/']" aria-label="Till startsidan för FA Mina sidor">
<img src="assets/logo/fa-mina-sidor-dark.svg" class="navigation__logo" alt="" />
<img src="assets/logo/fa-mina-sidor-light.svg" class="navigation__logo" alt="" />
</a>
</div>
<ul class="navigation__list dafa__hide-on-print">
<!-- <ul class="navigation__list dafa__hide-on-print">
<li class="navigation__item">
<a
class="navigation__link"
@@ -16,5 +16,5 @@
<span class="navigation__text">Startsida</span>
</a>
</li>
</ul>
</ul> -->
</div>

48
apps/dafa-web/src/app/components/navigation/navigation.component.scss
View File

@@ -1,24 +1,22 @@
@import 'mixins/list';
@import 'variables/border-radius';
@import 'variables/breakpoints';
@import 'variables/colors';
@import 'variables/gutters';
@import 'variables/typography';
$navigation-height: 2.5rem;
$navigation-height-large: 4rem;
@import 'variables/navigation';
.navigation {
background-color: white;
border-bottom: 1px solid $af__color-background-gray;
background-color: $af__color-primary;
border-bottom: 1px solid $af__color-background-dark-gray;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 $af__gutter-m;
height: $dafa__navigation-height;
@media (max-width: $af__breakpoint-s-below) {
flex-direction: column;
@media (min-width: $af__breakpoint-m) {
height: $dafa__navigation-height-large;
}
&__logo-wrapper {
@@ -28,23 +26,24 @@ $navigation-height-large: 4rem;
}
&__logo {
height: $navigation-height / 2;
height: $dafa__navigation-height / 2.5;
vertical-align: middle;
@media (min-width: $af__breakpoint-m) {
height: $navigation-height-large / 2;
height: $dafa__navigation-height-large / 2.5;
}
}
&__list {
@include dafa__reset-list;
display: flex;
height: 100%;
}
&__item {
display: flex;
align-items: center;
border-left: 1px solid $af__color-background-gray;
border-left: 1px solid $af__color-background-dark-gray;
&--no-link {
padding: 0 $af__gutter-m;
@@ -56,7 +55,7 @@ $navigation-height-large: 4rem;
}
&:last-child {
border-right: 1px solid $af__color-background-gray;
border-right: 1px solid $af__color-background-dark-gray;
}
}
@@ -68,20 +67,16 @@ $navigation-height-large: 4rem;
align-items: center;
justify-content: center;
font-size: $af__font-size-xs;
color: $af__color-text;
color: $af__color-text-light;
width: 7rem;
height: $navigation-height;
height: 100%;
font-weight: $af__font-weight-normal;
text-decoration: none;
@media (min-width: $af__breakpoint-m) {
height: $navigation-height-large;
}
}
&__link {
&:hover {
background-color: $af__color-background-gray;
background-color: $af__color-interactive;
}
&--active {
@@ -92,7 +87,7 @@ $navigation-height-large: 4rem;
bottom: 0;
left: 0;
height: 5px;
background-color: $af__color-primary;
background-color: $af__color-secondary;
}
}
}
@@ -100,17 +95,4 @@ $navigation-height-large: 4rem;
&__text {
margin-top: $af__gutter-xxs;
}
&__news {
display: flex;
gap: $af__gutter-xs;
padding: $af__gutter-xs $af__gutter-s;
background-color: $af__color-complementary-alt;
color: $af__color-text-light;
border-radius: $af__border-radius;
&:hover {
background-color: darken($af__color-complementary-alt, 10%);
}
}
}

70
apps/dafa-web/src/app/components/sidebar/sidebar.component.html Normal file
View File

@@ -0,0 +1,70 @@
<nav class="sidebar" aria-label="Sidofält">
<ul class="sidebar__list">
<li class="sidebar__item">
<a
[routerLink]="['/']"
[routerLinkActive]="['sidebar__link--active']"
[routerLinkActiveOptions]="{ exact: true }"
class="sidebar__link"
>
<dafa-icon class="sidebar__icon" [icon]="iconType.HOME"></dafa-icon>
Hem
</a>
</li>
<li class="sidebar__item">
<a
[routerLink]="['/mina-deltagare']"
[routerLinkActive]="['sidebar__link--active']"
[routerLinkActiveOptions]="{ exact: true }"
class="sidebar__link"
>
<dafa-icon class="sidebar__icon" [icon]="iconType.USERS"></dafa-icon>
Mina deltagare
</a>
</li>
<li class="sidebar__item">
<a
[routerLink]="['/avrop']"
[routerLinkActive]="['sidebar__link--active']"
[routerLinkActiveOptions]="{ exact: true }"
class="sidebar__link"
>
<dafa-icon class="sidebar__icon" [icon]="iconType.CALENDAR"></dafa-icon>
Avrop
</a>
</li>
<li class="sidebar__item">
<a
[routerLink]="['/meddelanden']"
[routerLinkActive]="['sidebar__link--active']"
[routerLinkActiveOptions]="{ exact: true }"
class="sidebar__link"
>
<dafa-icon class="sidebar__icon" [icon]="iconType.ENVELOPE"></dafa-icon>
Meddelanden
</a>
</li>
<li class="sidebar__item">
<a
[routerLink]="['/statistik']"
[routerLinkActive]="['sidebar__link--active']"
[routerLinkActiveOptions]="{ exact: true }"
class="sidebar__link"
>
<dafa-icon class="sidebar__icon" [icon]="iconType.SOK_KANDIDAT"></dafa-icon>
Statistik
</a>
</li>
<li class="sidebar__item">
<a
[routerLink]="['/installningar']"
[routerLinkActive]="['sidebar__link--active']"
[routerLinkActiveOptions]="{ exact: true }"
class="sidebar__link"
>
<dafa-icon class="sidebar__icon" [icon]="iconType.SETTINGS"></dafa-icon>
Inställningar
</a>
</li>
</ul>
</nav>

51
apps/dafa-web/src/app/components/sidebar/sidebar.component.scss Normal file
View File

@@ -0,0 +1,51 @@
@import 'variables/colors';
@import 'variables/gutters';
@import 'variables/typography';
@import 'mixins/link';
@import 'mixins/list';
.sidebar {
display: flex;
height: 100%;
flex-direction: column;
background-color: $af__color-background-light-gray;
border-right: 1px solid $af__color-background-dark-gray;
&__list {
@include dafa__reset-list;
}
&__link {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: $af__gutter-s $af__gutter-m;
border-bottom: 1px solid $af__color-background-dark-gray;
color: $af__color-text !important;
text-decoration: none;
font-weight: $af__font-weight-normal;
&:hover {
background-color: $af__color-background-gray;
}
&--active {
font-weight: $af__font-weight-semi-bold;
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 5px;
background-color: $af__color-primary;
}
}
}
&__icon {
margin-right: 0.875rem;
}
}

25
apps/dafa-web/src/app/components/sidebar/sidebar.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { SidebarComponent } from './sidebar.component';
describe('SidebarComponent', () => {
let component: SidebarComponent;
let fixture: ComponentFixture<SidebarComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [SidebarComponent],
imports: [RouterTestingModule],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(SidebarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

12
apps/dafa-web/src/app/components/sidebar/sidebar.component.ts Normal file
View File

@@ -0,0 +1,12 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IconType } from '@dafa-enums/icon-type.enum';
@Component({
selector: 'dafa-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SidebarComponent {
iconType = IconType;
}

12
apps/dafa-web/src/app/components/sidebar/sidebar.module.ts Normal file
View File

@@ -0,0 +1,12 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { IconModule } from '@dafa-shared/components/icon/icon.module';
import { SidebarComponent } from './sidebar.component';
@NgModule({
declarations: [SidebarComponent],
imports: [CommonModule, RouterModule, IconModule],
exports: [SidebarComponent],
})
export class SidebarModule {}

7
apps/dafa-web/src/app/data/enums/icon-type.enum.ts
View File

@@ -1,5 +1,10 @@
export enum IconType {
HOME = 'home',
HOME = 'home', // Custom
SETTINGS = 'settings', // Custom
USER = 'user',
USERS = 'users',
BELL = 'bell',
CALENDAR = 'calendar',
ENVELOPE = 'envelope',
SOK_KANDIDAT = 'sok-kandidat',
}

4
apps/dafa-web/src/app/pages/start/start.component.html
View File

@@ -1,5 +1,3 @@
<digi-ng-typography-base>
<dafa-horizontal-center>
<section class="start">Start funkar!</section>
</dafa-horizontal-center>
<section class="start">Start funkar!</section>
</digi-ng-typography-base>

101
apps/dafa-web/src/app/pages/start/start.component.scss
View File

@@ -1,101 +0,0 @@
@import 'variables/breakpoints';
@import 'variables/colors';
@import 'variables/gutters';
@import 'variables/typography';
@import 'mixins/ie11';
@import 'mixins/typography';
.start {
&__header {
position: relative;
width: 100%;
margin: $af__gutter-goliath 0;
}
&__heading {
position: absolute;
margin: 0;
bottom: $af__gutter-xxl;
left: -$af__gutter-m;
background-color: $af__color-primary;
color: $af__color-text-light;
padding: $af__gutter-m $af__gutter-xxl;
}
&__intro {
max-width: 700px;
}
&__subheading {
font-size: $af__font-size-h1 !important;
margin: $af__gutter-xxl 0 !important;
@include dafa__typography-ornament;
}
&__background-image {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center 33%;
@media (min-width: $af__breakpoint-m) {
height: 250px;
}
@media (min-width: $af__breakpoint-l) {
height: 290px;
}
@media (min-width: $af__breakpoint-xl) {
height: 320px;
}
}
&__cta-wrapper {
background-color: $af__color-background-alt-tertiary;
margin: $af__gutter-xxl 0;
padding: $af__gutter-xxl;
}
&__cta {
display: flex;
gap: $af__gutter-xl;
}
&__puff {
width: calc(100% / 3);
@include ie11 {
&:not(:first-child) {
margin-left: $af__gutter-xl;
}
}
}
&__footer {
margin-top: $af__gutter-goliath;
background-color: $af__color-background-light-gray;
padding: $af__gutter-xxl 0 $af__gutter-goliath;
}
&__footer-heading {
margin-top: 0 !important;
margin-bottom: $af__gutter-l !important;
}
&__card-wrapper {
display: flex;
align-content: stretch;
gap: $af__gutter-xxl;
}
&__card {
max-width: 400px;
flex-basis: 100%;
}
&__card-link {
display: inline-block;
margin-top: $af__gutter-l;
}
}

8
apps/dafa-web/src/app/pages/start/start.module.ts
View File

@@ -2,16 +2,10 @@ import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-b
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
import { StartComponent } from './start.component';
@NgModule({
declarations: [StartComponent],
imports: [
CommonModule,
RouterModule.forChild([{ path: '', component: StartComponent }]),
DigiNgTypographyBaseModule,
HorizontalCenterModule,
],
imports: [CommonModule, RouterModule.forChild([{ path: '', component: StartComponent }]), DigiNgTypographyBaseModule],
})
export class StartModule {}

25
apps/dafa-web/src/app/shared/components/icon/icon.component.html
View File

@@ -1,12 +1,19 @@
<digi-ng-icon-custom *ngIf="isCustomIcon; else DigiNgIcon" aria-hidden="true" class="icon" [ngClass]="[iconClass]">
<svg *ngIf="icon === iconType.HOME" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 576 512">
<svg *ngIf="icon === iconType.HOME" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="25" height="25">
<path
d="M472.847,226.846l-34.116-34.116L250.998,4.997c-6.664-6.663-17.468-6.663-24.132,0L39.132,192.73L4.999,226.864
c-6.548,6.78-6.361,17.584,0.419,24.132c6.614,6.388,17.099,6.388,23.713,0l4.983-5.018v214.801
c0,9.426,7.641,17.067,17.067,17.067h375.467c9.426,0,17.067-7.641,17.067-17.067V245.978l5,5.001
c6.78,6.548,17.584,6.36,24.132-0.419C479.235,243.946,479.235,233.46,472.847,226.846z M290.115,443.713h-102.4V307.179h102.4
V443.713z M409.581,443.713h-85.333v-153.6c0-9.426-7.641-17.067-17.067-17.067H170.648c-9.426,0-17.067,7.641-17.067,17.067
v153.6H68.248V211.845L238.914,41.178l170.667,170.667V443.713z"
d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"
fill="currentColor"
></path>
</svg>
<svg
*ngIf="icon === iconType.SETTINGS"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
width="25"
height="25"
>
<path
d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
fill="currentColor"
></path>
</svg>
@@ -14,5 +21,9 @@
<ng-template #DigiNgIcon>
<digi-ng-icon-user-alt *ngIf="icon === iconType.USER" [ngClass]="iconClass"></digi-ng-icon-user-alt>
<digi-ng-icon-users-solid *ngIf="icon === iconType.USERS" [ngClass]="iconClass"></digi-ng-icon-users-solid>
<digi-ng-icon-bell *ngIf="icon === iconType.BELL" [ngClass]="iconClass"></digi-ng-icon-bell>
<digi-ng-icon-calendar-alt *ngIf="icon === iconType.CALENDAR" [ngClass]="iconClass"></digi-ng-icon-calendar-alt>
<digi-ng-icon-envelope-filled *ngIf="icon === iconType.ENVELOPE" [ngClass]="iconClass"></digi-ng-icon-envelope-filled>
<digi-ng-icon-sokkandidat *ngIf="icon === iconType.SOK_KANDIDAT" [ngClass]="iconClass"></digi-ng-icon-sokkandidat>
</ng-template>

2
apps/dafa-web/src/app/shared/components/icon/icon.component.ts
View File

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c
import { IconSize } from '@dafa-enums/icon-size.enum';
import { IconType } from '@dafa-enums/icon-type.enum';
const CUSTOM_ICONS: IconType[] = [IconType.HOME];
const CUSTOM_ICONS: IconType[] = [IconType.HOME, IconType.SETTINGS];
@Component({
selector: 'dafa-icon',

16
apps/dafa-web/src/app/shared/components/icon/icon.module.ts
View File

@@ -1,10 +1,24 @@
import { DigiNgIconBellModule } from '@af/digi-ng/_icon/icon-bell';
import { DigiNgIconCalendarAltModule } from '@af/digi-ng/_icon/icon-calendar-alt';
import { DigiNgIconEnvelopeFilledModule } from '@af/digi-ng/_icon/icon-envelope-filled';
import { DigiNgIconSokkandidatModule } from '@af/digi-ng/_icon/icon-sokkandidat';
import { DigiNgIconUserAltModule } from '@af/digi-ng/_icon/icon-user-alt';
import { DigiNgIconUsersSolidModule } from '@af/digi-ng/_icon/icon-users-solid';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { IconComponent } from './icon.component';
@NgModule({
declarations: [IconComponent],
imports: [CommonModule],
imports: [
CommonModule,
DigiNgIconUserAltModule,
DigiNgIconUsersSolidModule,
DigiNgIconBellModule,
DigiNgIconCalendarAltModule,
DigiNgIconEnvelopeFilledModule,
DigiNgIconSokkandidatModule,
],
exports: [IconComponent],
})
export class IconModule {}

2
apps/dafa-web/src/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>FA Mina Sidor</title>

2
apps/dafa-web/src/styles/variables/_navigation.scss Normal file
View File

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