diff --git a/goofy-client/apps/goofy/src/app/app.component.html b/goofy-client/apps/goofy/src/app/app.component.html
index 0e1b8beb003bc59f96a2043c717f239d2c6d1598..d5df7d2504ba73d9b657ceb433490929d9785839 100644
--- a/goofy-client/apps/goofy/src/app/app.component.html
+++ b/goofy-client/apps/goofy/src/app/app.component.html
@@ -5,7 +5,7 @@
<div class="container">
<goofy-client-navigation></goofy-client-navigation>
- <main><router-outlet></router-outlet></main>
+ <main [ngClass]="{ small: navigationCollapse$ | async }"><router-outlet></router-outlet></main>
<section>
<goofy-client-build-info *ngIf="apiRoot.resource" [apiRoot]="apiRoot.resource"></goofy-client-build-info>
</section>
diff --git a/goofy-client/apps/goofy/src/app/app.component.scss b/goofy-client/apps/goofy/src/app/app.component.scss
index de26de1a5d9dee7c8c542a304841da9f9b3a6c55..5d42337c5ffeeadfb966837b2ff924318b0038b2 100644
--- a/goofy-client/apps/goofy/src/app/app.component.scss
+++ b/goofy-client/apps/goofy/src/app/app.component.scss
@@ -13,17 +13,32 @@
justify-content: space-between;
align-items: flex-start;
flex-grow: 1;
+ margin-top: 64px;
}
main {
position: relative;
flex-grow: 1;
- overflow-x: hidden;
+ max-width: calc(100vw - (40px + 256px));
+ //overflow-x: hidden;
+ transition: max-width 0.3s ease-in-out;
+ transition-delay: 0s;
+ background-color: #fff;
+
+ &.small {
+ max-width: calc(100vw - (40px + 72px));
+ transition-delay: 0.2s;
+ }
}
section {
width: 40px;
flex-shrink: 0;
+ position: sticky;
+ right: 0;
+ top: 64px;
+ z-index: 1;
+ height: calc(100vh - 64px);
@include media('>largeDesktop') {
//width: 360px;
diff --git a/goofy-client/apps/goofy/src/app/app.component.ts b/goofy-client/apps/goofy/src/app/app.component.ts
index 7453c803e7409034ff8b10cc4949e53193edbd0d..bbd18e5366bec44583282643616ef7a28426cab4 100644
--- a/goofy-client/apps/goofy/src/app/app.component.ts
+++ b/goofy-client/apps/goofy/src/app/app.component.ts
@@ -9,6 +9,7 @@ import { AuthConfig, OAuthService } from 'angular-oauth2-oidc';
import { JwksValidationHandler } from 'angular-oauth2-oidc-jwks';
import { Environment } from 'libs/environment-shared/src/lib/environment.model';
import { Observable } from 'rxjs';
+import { AppService } from '@goofy-client/app-shared';
@Component({
selector: 'goofy-client-root',
@@ -25,14 +26,17 @@ export class AppComponent implements OnInit {
title = 'goofy';
apiRoot$: Observable<StateResource<ApiRootResource>>;
+ navigationCollapse$: Observable<boolean>;
constructor(
private apiRootService: ApiRootService,
private iconService: IconService,
private oAuthService: OAuthService,
- @Inject(ENVIRONMENT_CONFIG) private envConfig: Environment,
+ private appService: AppService,
+ @Inject(ENVIRONMENT_CONFIG) private envConfig: Environment
) {
this.iconService.registerIcons();
+ this.navigationCollapse$ = this.appService.getNavigationCollapse();
}
ngOnInit(): void {
diff --git a/goofy-client/apps/goofy/src/styles/layout/_main.scss b/goofy-client/apps/goofy/src/styles/layout/_main.scss
index 266cff8f1d8be400ef073b747547004a4b4e332d..34648ec9cc1223bba47a1074263a430b51e88ca8 100644
--- a/goofy-client/apps/goofy/src/styles/layout/_main.scss
+++ b/goofy-client/apps/goofy/src/styles/layout/_main.scss
@@ -5,8 +5,17 @@
overflow: auto;
padding-bottom: 40px;
outline: 0;
+
+ &--full {
+ //background-color: #fff;
+ box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.08), inset 1px 0 0 rgba(0, 0, 0, 0.08), inset -1px 0 0 rgba(0, 0, 0, 0.08);
+ position: relative;
+ }
}
-body.dark .l-scroll-area {
- background-color: rgb(40, 40, 40);
+body.dark {
+ .l-scroll-area,
+ .l-scroll-area--full {
+ background-color: rgb(40, 40, 40);
+ }
}
diff --git a/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss b/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
index 454bef4b83521be56442c47416425b8bb5460350..206a83d14da65c5e50fbf7e464241a3f3549b209 100644
--- a/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
+++ b/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
@@ -19,4 +19,5 @@
p {
margin: 0;
line-height: 1;
+ white-space: nowrap;
}
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
index fc9c594f7e5d57a56a07969e451062d05fa9e756..281bcac46adc9ba7b6ef4c893b380e57d8b667f9 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
@@ -12,6 +12,7 @@ header {
display: flex;
align-items: center;
justify-content: space-between;
+ position: fixed;
.title {
font-size: 24px;
diff --git a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss b/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
index f129e02825cebb3ca912287c8f9873ff8efd89d5..e99d86ce1ded08852286da191925766c5b298fd7 100644
--- a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
+++ b/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
@@ -2,6 +2,11 @@
@use '~@angular/material' as mat;
@import "variables";
+:host {
+ position: sticky;
+ top: 64px;
+}
+
nav {
width: 256px;
background-color: inherit;
diff --git a/goofy-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html b/goofy-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html
index 099a4892a05a1abf60f936e630ca231948a311a8..be8ab61299618de87e864ea87fc63b19d9c9bc7c 100644
--- a/goofy-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html
+++ b/goofy-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html
@@ -1,10 +1,10 @@
-<goofy-client-subnavigation>
+<goofy-client-subnavigation class="mat-app-background">
<a routerLink="../" mat-icon-button data-test-id="back-button" class="back-button" aria-label="back button with arrow icon" matTooltip="zurück zur Detailseite">
<mat-icon>arrow_back</mat-icon>
</a>
</goofy-client-subnavigation>
-<div class="l-scroll-area" tabindex="0" autofocus>
+<div class="l-scroll-area--full">
<goofy-client-vorgang-in-postfach-breadcrumb-container></goofy-client-vorgang-in-postfach-breadcrumb-container>
<goofy-client-postfach-page-mail-list [postfachMailListStateResource]="postfachMailListStateResource" data-test-id="postfach-mail-list"></goofy-client-postfach-page-mail-list>
</div>
diff --git a/goofy-client/libs/ui/src/lib/ui/subnavigation/subnavigation.component.scss b/goofy-client/libs/ui/src/lib/ui/subnavigation/subnavigation.component.scss
index 0ec3a5b02c6e3c8bd737b2a0953ca2c0acf49e6e..f2831aab4ae9fc1afd8d24c8c9fa76bec3e8d145 100644
--- a/goofy-client/libs/ui/src/lib/ui/subnavigation/subnavigation.component.scss
+++ b/goofy-client/libs/ui/src/lib/ui/subnavigation/subnavigation.component.scss
@@ -2,9 +2,8 @@
:host {
position: sticky;
- top: 0;
+ top: 64px;
height: 48px;
- background-color: inherit;
width: 100%;
z-index: 2;
box-shadow: $shadow-bottom;
@@ -13,9 +12,8 @@
align-items: center;
padding: 4px 16px;
-
&.shadow {
- overflow-x: hidden;
+ //overflow-x: hidden;
box-shadow: $shadow-bottom, 0 2px 2px -2px rgba(#000, 0.16);
}
}
diff --git a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.scss b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.scss
index 8295aadf7fbd9da4672a54b6d130f084d3ad441e..3b2a0f7fae74bd2308da2a6afbb1dc34f5fbae6b 100644
--- a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.scss
+++ b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.scss
@@ -4,6 +4,7 @@
:host {
position: relative;
display: block;
+ background-color: inherit;
}
.header-spinner {
diff --git a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html
index f79e4f209b13c3a63cb8baa3ab59b536a92ea3e4..98eab0271684f80549cee147da6216a6992e2372 100644
--- a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html
+++ b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html
@@ -1,13 +1,13 @@
<ng-container *ngIf="vorgangStateResource$ | async as vorgangStateResource">
- <goofy-client-subnavigation>
+ <goofy-client-subnavigation class="mat-app-background">
<a routerLink="/" mat-icon-button data-test-id="back-button" class="back-button" aria-label="back button with arrow icon" matTooltip="zurück zur Vorgangsliste">
<mat-icon>arrow_back</mat-icon>
</a>
<goofy-client-vorgang-detail-action-buttons [vorgangWithEingang]="vorgangStateResource.resource"></goofy-client-vorgang-detail-action-buttons>
</goofy-client-subnavigation>
- <div class="l-scroll-area" tabindex="0" autofocus>
+ <div class="l-scroll-area--full">
<goofy-client-vorgang-detail-area [vorgangStateResource]="vorgangStateResource"></goofy-client-vorgang-detail-area>
</div>
diff --git a/goofy-client/libs/vorgang/src/lib/vorgang-list-page/vorgang-list-page.component.html b/goofy-client/libs/vorgang/src/lib/vorgang-list-page/vorgang-list-page.component.html
index 3964469edd54ae5b98d8e227f1a29a87b1dd97db..2bf1a8ddb3fa9fe14514a55299a3034ef1045f33 100644
--- a/goofy-client/libs/vorgang/src/lib/vorgang-list-page/vorgang-list-page.component.html
+++ b/goofy-client/libs/vorgang/src/lib/vorgang-list-page/vorgang-list-page.component.html
@@ -1,2 +1,2 @@
-<goofy-client-subnavigation></goofy-client-subnavigation>
+<goofy-client-subnavigation class="mat-app-background"></goofy-client-subnavigation>
<goofy-client-vorgang-list-container></goofy-client-vorgang-list-container>
diff --git a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-page.component.html b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-page.component.html
index 267b6f94f5df1cc565842c6a44f922c521fa92ca..878fbd3db900ae567c916a14678e7826e96f8694 100644
--- a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-page.component.html
+++ b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-page.component.html
@@ -1,11 +1,11 @@
<goofy-client-spinner [stateResource]="wiedervorlageStateResource">
- <goofy-client-subnavigation data-test-id="subnavigation-wiedervorlage">
+ <goofy-client-subnavigation data-test-id="subnavigation-wiedervorlage" class="mat-app-background">
<goofy-client-wiedervorlage-action-buttons [wiedervorlage]="wiedervorlageStateResource.resource">
</goofy-client-wiedervorlage-action-buttons>
</goofy-client-subnavigation>
- <div class="l-scroll-area" tabindex="0" autofocus>
+ <div class="l-scroll-area--full">
<div class="wrapper">
<goofy-client-breadcrumb [vorgang]="vorgang" [wiedervorlage]="wiedervorlageStateResource.resource">
</goofy-client-breadcrumb>