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

bugfix(z-index): Fixed several z-index problems, progress-bar inside nya deltagare is now hidden behind the header when scrolling. (TV-551)

Browse Source 
Squashed commit of the following:

commit 87b53c3d03f71b5cfd6e632e39a3f2723deecdee
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Sep 16 10:57:12 2021 +0200

    Fixed issue with z-indexes
This commit is contained in:
Erik Tiekstra
2021-09-16 11:04:25 +02:00
parent bc8b09d0dc
commit ded0b83935
18 changed files with 62 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/mina-sidor-fa/src/app/components/toast-list/toast-list.component.scss
View File

@@ -1,9 +1,10 @@
@import 'mixins/list';
@import 'variables/z-index';
.toast-list {
position: fixed;
pointer-events: none;
z-index: 9999;
z-index: $msfa__z-index-toast;
margin: var(--digi--layout--gutter);
top: 0;
right: 0;

2
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.scss
View File

@@ -2,6 +2,8 @@
@import 'variables/gutters';
.employee-form {
position: relative;
&__header {
display: flex;
justify-content: space-between;

2
apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html
View File

@@ -1,5 +1,5 @@
<div class="employees-list">
<msfa-loader *ngIf="employeesLoading" [fullScreen]="true"></msfa-loader>
<msfa-loader *ngIf="employeesLoading" type="absolute"></msfa-loader>
<digi-table af-variation="secondary">
<table>
<thead>

5
apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.scss
View File

@@ -1,4 +1,5 @@
@import 'variables/gutters';
@import 'variables/z-index';
.avrop {
&__header {
@@ -16,6 +17,10 @@
margin-bottom: $digi--layout--gutter--xl;
}
&__progress-bar {
z-index: $msfa__z-index-default;
}
&__select-handledare {
max-width: var(--digi--typography--text--max-width);
margin-bottom: $digi--layout--gutter--xl;

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

@@ -3,18 +3,18 @@
<section class="start">
<header class="start__header">
<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>
<h1 class="start__heading">Välkommen {{ userFullName$ | async }}</h1>
</div>
<ng-container *ngIf="isAuthorizedUser(userRoles); else unauthorizedRef">
<p>
@@ -36,5 +36,5 @@
</msfa-layout>
<ng-template #loadingRef>
<msfa-loader [fullScreen]="true"></msfa-loader>
<msfa-loader type="full-screen"></msfa-loader>
</ng-template>

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

@@ -15,6 +15,5 @@
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;
}
}

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

@@ -1,14 +1,15 @@
@import 'mixins/list';
@import 'variables/colors';
@import 'variables/gutters';
@import 'variables/navigation';
@import 'mixins/list';
@import 'variables/z-index';
.sidebar {
display: flex;
flex-direction: column;
position: sticky;
top: $msfa__navigation-height;
z-index: 1;
z-index: $msfa__z-index-sidebar;
&__list {
@include msfa__reset-list;

3
apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.scss
View File

@@ -1,4 +1,5 @@
@import 'variables/colors';
@import 'variables/z-index';
.skip-to-content {
position: absolute;
@@ -8,7 +9,7 @@
width: 0;
height: 0;
overflow: hidden;
z-index: 1000;
z-index: $msfa__z-index-skip-to-content;
text-align: center;
padding: var(--digi--layout--gutter--xs) var(--digi--layout--gutter);
display: block;

2
apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html
View File

@@ -19,4 +19,4 @@
<msfa-footer class="msfa__footer"></msfa-footer>
</div>
<msfa-loader *ngIf="(userLoading$ | async) || (rolesLoading$ | async)" [fullScreen]="true"></msfa-loader>
<msfa-loader *ngIf="(userLoading$ | async) || (rolesLoading$ | async)" type="full-screen"></msfa-loader>

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

@@ -1,6 +1,7 @@
@import 'variables/navigation';
@import 'variables/breakpoints';
@import 'variables/gutters';
@import 'variables/navigation';
@import 'variables/z-index';
.msfa {
position: relative;
@@ -17,7 +18,7 @@
grid-area: header;
position: sticky;
top: 0;
z-index: 1;
z-index: $msfa__z-index-header;
}
&__sidebar {

7
apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss
View File

@@ -1,4 +1,5 @@
@import 'mixins/backdrop';
@import 'variables/z-index';
@keyframes spinning {
to {
@@ -11,8 +12,12 @@
align-items: center;
justify-content: center;
&--absolute {
@include msfa__backdrop($msfa__z-index-backdrop, false);
}
&--full-screen {
@include msfa__backdrop(1000);
@include msfa__backdrop($msfa__z-index-backdrop);
}
&__spinner {

7
apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.ts
View File

@@ -1,4 +1,5 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { LoaderType } from '@msfa-enums/loader-type.enum';
@Component({
selector: 'msfa-loader',
@@ -8,11 +9,11 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
})
export class LoaderComponent {
private readonly _defaultClass = 'loader';
@Input() fullScreen = false;
@Input() type: LoaderType;
get classes(): string {
if (this.fullScreen) {
return `${this._defaultClass} ${this._defaultClass}--full-screen`;
if (this.type) {
return `${this._defaultClass} ${this._defaultClass}--${this.type as string}`;
}
return this._defaultClass;
}

1
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss
View File

@@ -30,7 +30,6 @@
&__clear-btn {
position: absolute;
z-index: 20;
right: 0;
top: 0;
display: block;

7
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.scss
View File

@@ -1,11 +1,11 @@
@import 'variables/colors';
@import 'mixins/list';
@import 'variables/colors';
@import 'variables/gutters';
@import 'variables/z-index';
.tree-nodes-selector {
&__panel-wrapper {
position: relative;
z-index: 1;
}
&__toggle-panel-btn {
@@ -21,7 +21,6 @@
font-size: var(--digi--typography--font-size--m);
color: var(--digi--ui--color--background--overlay--opaque);
background-color: var(--digi--ui--color--background);
z-index: 1;
&:focus {
border-color: var(--digi--ui--color--focus--light);
@@ -60,7 +59,7 @@
&__panel {
position: absolute;
z-index: 10;
z-index: $msfa__z-index-selector-panel;
top: 100%;
left: 0;
margin-top: $digi--layout--gutter--xs;

4
apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts Normal file
View File

@@ -0,0 +1,4 @@
export enum LoaderType {
FULL_SCREEN = 'fullscreen',
ABSOLUTE = 'absolute',
}

11
apps/mina-sidor-fa/src/styles/mixins/_backdrop.scss
View File

@@ -1,9 +1,16 @@
@mixin msfa__backdrop($zIndex: 0) {
position: absolute;
@import 'variables/z-index';
@mixin msfa__backdrop($zIndex: $msfa__z-index-default, $fullScreen: true) {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zIndex;
background-color: rgba(255, 255, 255, 0.4);
@if $fullScreen {
position: fixed;
} @else {
position: absolute;
}
}

7
apps/mina-sidor-fa/src/styles/styles.scss
View File

@@ -3,6 +3,7 @@
@import 'mixins/backdrop';
@import 'mixins/icon';
@import 'mixins/link';
@import 'variables/z-index';
* {
font-family: var(--digi--typography--font-family);
@@ -65,7 +66,11 @@ dl {
}
&__backdrop {
@include msfa__backdrop;
@include msfa__backdrop($msfa__z-index-default, false);
&--full-screen {
@include msfa__backdrop($msfa__z-index-backdrop);
}
}
&__digi-icon {

8
apps/mina-sidor-fa/src/styles/variables/_z-index.scss Normal file
View File

@@ -0,0 +1,8 @@
$msfa__z-index-default: 0;
$msfa__z-index-header: 1;
$msfa__z-index-sidebar: 1;
$msfa__z-index-footer: 0;
$msfa__z-index-selector-panel: 1;
$msfa__z-index-backdrop: 1000;
$msfa__z-index-skip-to-content: 2;
$msfa__z-index-toast: 9999;