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

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;