From 466abd1deebd5dd999999ecf1cef079715627e3b Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Thu, 12 Aug 2021 15:34:51 +0200 Subject: [PATCH] feat(navigation): Updated css to match the scetches. (TV-349) Squashed commit of the following: commit 07b76ab978ee3e5244e413dfa79cde279a5f3bbb Author: Erik Tiekstra Date: Thu Aug 12 15:23:15 2021 +0200 Updated navigation and sidebar to somehow match the scetches --- .../toast-list/toast/toast.component.scss | 1 + .../components/icon/icon.component.html | 13 ++++++ .../components/icon/icon.component.scss | 3 ++ .../shared/components/icon/icon.component.ts | 2 +- .../navigation/navigation.component.html | 18 +++------ .../navigation/navigation.component.scss | 24 +++++------ .../components/sidebar/sidebar.component.html | 40 ++++++++----------- .../components/sidebar/sidebar.component.scss | 11 +++-- .../components/layout/layout.component.scss | 2 +- .../src/app/shared/enums/icon-size.enum.ts | 1 + .../src/app/shared/enums/icon-type.enum.ts | 1 + .../src/styles/variables/_gutters.scss | 1 + 12 files changed, 63 insertions(+), 54 deletions(-) diff --git a/apps/dafa-web/src/app/components/toast-list/toast/toast.component.scss b/apps/dafa-web/src/app/components/toast-list/toast/toast.component.scss index 30593aa..4ca66a1 100644 --- a/apps/dafa-web/src/app/components/toast-list/toast/toast.component.scss +++ b/apps/dafa-web/src/app/components/toast-list/toast/toast.component.scss @@ -35,6 +35,7 @@ &__content { display: flex; + width: 100%; background-color: var(--digi--ui--color--background); flex-direction: column; justify-content: center; diff --git a/apps/dafa-web/src/app/shared/components/icon/icon.component.html b/apps/dafa-web/src/app/shared/components/icon/icon.component.html index 377d7a0..ce3824e 100644 --- a/apps/dafa-web/src/app/shared/components/icon/icon.component.html +++ b/apps/dafa-web/src/app/shared/components/icon/icon.component.html @@ -24,6 +24,19 @@ d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" > + + + + diff --git a/apps/dafa-web/src/app/shared/components/icon/icon.component.scss b/apps/dafa-web/src/app/shared/components/icon/icon.component.scss index 4f65103..260bcd3 100644 --- a/apps/dafa-web/src/app/shared/components/icon/icon.component.scss +++ b/apps/dafa-web/src/app/shared/components/icon/icon.component.scss @@ -17,4 +17,7 @@ &--xl { @include dafa__digi-ng-icon(1.5em); } + &--xxl { + @include dafa__digi-ng-icon(2em); + } } diff --git a/apps/dafa-web/src/app/shared/components/icon/icon.component.ts b/apps/dafa-web/src/app/shared/components/icon/icon.component.ts index c278f4a..0e496c1 100644 --- a/apps/dafa-web/src/app/shared/components/icon/icon.component.ts +++ b/apps/dafa-web/src/app/shared/components/icon/icon.component.ts @@ -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, IconType.SETTINGS, IconType.PLUS]; +const CUSTOM_ICONS: IconType[] = [IconType.HOME, IconType.SETTINGS, IconType.PLUS, IconType.CLIPBOARD]; @Component({ selector: 'dafa-icon', diff --git a/apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.html b/apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.html index 7e7ea37..f7dacf2 100644 --- a/apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.html +++ b/apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.html @@ -1,4 +1,3 @@ -
@@ -6,22 +5,17 @@
- diff --git a/apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.scss b/apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.scss index 6dce856..ac5ce3c 100644 --- a/apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.scss +++ b/apps/dafa-web/src/app/shared/components/layout/components/navigation/navigation.component.scss @@ -44,28 +44,24 @@ &__item { display: flex; - align-items: center; + } - &--user { - padding: var(--digi--layout--gutter--s); - } + &__user, + &__link { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: var(--digi--layout--gutter--s) var(--digi--layout--gutter); } &__link { text-decoration: none; - display: flex; color: var(--digi--typography--color--text--light); - padding: var(--digi--layout--gutter--s); - } - - &__link { - &:hover { - } } &__text { - margin-right: var(--digi--layout--gutter); - font-size: var(--digi--typography--font-size--xs); - // margin-top: var(--digi--layout--gutter--xs); + font-size: 0.75rem; + margin-top: var(--digi--layout--gutter--s); } } diff --git a/apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.html b/apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.html index 47a8ea8..914356b 100644 --- a/apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.html +++ b/apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.html @@ -7,44 +7,38 @@ [routerLinkActiveOptions]="{ exact: true }" class="sidebar__link" > - + Hem -
  • - - - Administration - -
    • -
  • - - - Mina deltagare - -
  • - + Avrop
  • - - - Meddelanden + + + Mina deltagare
  • - - - Statistik + + + Planera aktiviteter
  • - - - Inställningar + + + Rapportera + +
    • +
  • + + + Administration
    • diff --git a/apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.scss b/apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.scss index bfda9a7..afafe8b 100644 --- a/apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.scss +++ b/apps/dafa-web/src/app/shared/components/layout/components/sidebar/sidebar.component.scss @@ -1,4 +1,5 @@ @import 'variables/colors'; +@import 'variables/gutters'; @import 'variables/navigation'; @import 'mixins/list'; @@ -15,20 +16,24 @@ &__link { position: relative; display: flex; + flex-direction: column; + gap: var(--digi--layout--gutter--xs); align-items: center; width: 100%; - padding: var(--digi--layout--gutter) var(--digi--layout--gutter); + padding: $digi--layout--gutter--m var(--digi--layout--gutter); border-bottom: 1px solid var(--digi--ui--color--background--off); color: var(--digi--typography--color--text) !important; text-decoration: none; font-weight: var(--digi--typography--font-weight); + font-size: var(--digi--typography--font-size--s); + text-align: center; &:hover { background-color: var(--digi--ui--color--background--tertiary); } &--active { - font-weight: var(--digi--typography--font-weight--semibold); + background-color: var(--digi--ui--color--background--tertiary); &::before { content: ''; @@ -43,6 +48,6 @@ } &__icon { - margin-right: 0.875rem; + color: var(--digi--typography--color--link); } } diff --git a/apps/dafa-web/src/app/shared/components/layout/layout.component.scss b/apps/dafa-web/src/app/shared/components/layout/layout.component.scss index c49d2ae..ee69480 100644 --- a/apps/dafa-web/src/app/shared/components/layout/layout.component.scss +++ b/apps/dafa-web/src/app/shared/components/layout/layout.component.scss @@ -5,7 +5,7 @@ .dafa { display: grid; height: 100vh; - grid-template-columns: 15rem 1fr; + grid-template-columns: 12rem 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: 'header header' diff --git a/apps/dafa-web/src/app/shared/enums/icon-size.enum.ts b/apps/dafa-web/src/app/shared/enums/icon-size.enum.ts index 4cbf748..2d0b486 100644 --- a/apps/dafa-web/src/app/shared/enums/icon-size.enum.ts +++ b/apps/dafa-web/src/app/shared/enums/icon-size.enum.ts @@ -3,4 +3,5 @@ export enum IconSize { M = 'm', L = 'l', XL = 'xl', + XXL = 'xxl', } diff --git a/apps/dafa-web/src/app/shared/enums/icon-type.enum.ts b/apps/dafa-web/src/app/shared/enums/icon-type.enum.ts index bd98aae..34ef996 100644 --- a/apps/dafa-web/src/app/shared/enums/icon-type.enum.ts +++ b/apps/dafa-web/src/app/shared/enums/icon-type.enum.ts @@ -2,6 +2,7 @@ export enum IconType { HOME = 'home', // Custom SETTINGS = 'settings', // Custom PLUS = 'plus', // Custom + CLIPBOARD = 'clipboard', // Custom USER = 'user', USERS = 'users', BELL = 'bell', diff --git a/apps/dafa-web/src/styles/variables/_gutters.scss b/apps/dafa-web/src/styles/variables/_gutters.scss index 3425849..8cf5ce1 100644 --- a/apps/dafa-web/src/styles/variables/_gutters.scss +++ b/apps/dafa-web/src/styles/variables/_gutters.scss @@ -2,6 +2,7 @@ @import 'functions/rem'; // AF DIGI Variables +$digi--layout--gutter--m: rem(12); $digi--layout--gutter--l: rem(25); $digi--layout--gutter--xl: rem(40); $digi--layout--gutter--xxl: rem(60);