fix(ui): scroll footer on news

51cbe6ce · Bastien DUMONT · 3f726d1f · 51cbe6ce · 51cbe6ce · 51cbe6ce
Commit 51cbe6ce authored 1 year ago by Bastien DUMONT
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
+<app-header />
 <div class="app-container">
-  <app-header />
  <div class="app-body">
    <div *ngIf="loading" class="loader" aria-busy="true">
      <img class="loader-gif" src="/assets/gif/loader_circle_grey.gif" alt />
@@ -9,6 +9,6 @@
      <router-outlet></router-outlet>
      <router-outlet name="print"></router-outlet>
    </ng-container>
+    <router-outlet *ngIf="!loading" name="footer"></router-outlet>
  </div>
-  <router-outlet *ngIf="!loading" name="footer"></router-outlet>
 </div>
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -6,6 +6,7 @@
  display: flex;
  flex-direction: column;
  height: 100%;
+  overflow-y: auto;
 }

 @media print {

--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -21,7 +21,6 @@ import { PrintService } from './shared/service/print.service';
  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements OnInit {
-  public title = 'resin';
  public loading = true;

  constructor(
@@ -37,10 +36,6 @@ export class AppComponent implements OnInit {
    if (this.authService.isLoggedIn()) {
      this.profilService.getProfile();
    }
-    this.setHeightApp();
-    window.addEventListener('resize', () => {
-      this.setHeightApp();
-    });
    this.routerListener.loadRouting();
    // handle pwa update
    this.updateService.subscribeUpdate();
@@ -91,9 +86,4 @@ export class AppComponent implements OnInit {
    });
    this.runtimeConfigLoaderService.loadConfig().subscribe();
  }
-
-  private setHeightApp(): void {
-    const vh = window.innerHeight * 0.01;
-    document.documentElement.style.setProperty('--vh', `${vh}px`);
-  }
 }
--- a/src/app/profile/profile.component.scss
+++ b/src/app/profile/profile.component.scss
@@ -12,7 +12,6 @@
  gap: 1rem;
  padding-block: 16px;
  box-sizing: border-box;
-  overflow: scroll;
  scrollbar-gutter: stable !important;
  @media #{$tablet} {
    padding: 1rem;

--- a/src/index.html
+++ b/src/index.html
@@ -67,7 +67,7 @@
    <meta name="theme-color" content="#333333" />
  </head>
  <body>
-    <app-root />
+    <app-root class="root" />
    <noscript>Please enable JavaScript to continue using this application.</noscript>
  </body>
 </html>
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -46,6 +46,13 @@ body {
    border-radius: 8px;
  }
 }
+
+.root {
+  display: flex;
+  flex-direction: column;
+  height: 100svh;
+}
+
 a {
  color: $default-link-color;
  text-decoration: none;