Fix projector detail view, then fix scrolling

OpenSlides · Sep 15, 2023 · bf352ca · bf352ca
1 parent f6adbc7
commit bf352ca
Show file tree

Hide file tree

Showing 7 changed files with 265 additions and 268 deletions.
diff --git a/client/src/app/site/modules/site-wrapper/components/banner/banner.component.html b/client/src/app/site/modules/site-wrapper/components/banner/banner.component.html
@@ -1,18 +1,20 @@
-<div
-    *ngFor="let banner of activeBanners | async"
-    class="banner flex-center background-accent"
-    [ngClass]="[banner.class ? banner.class : '', banner.largerOnMobileView ? 'larger-on-mobile' : '']"
->
-    <ng-container *ngIf="banner.component">
-        <ng-template [cdkPortalOutlet]="createComponentPortal(banner.component)"></ng-template>
-    </ng-container>
-    <ng-container *ngIf="!banner.component">
-        <a class="banner-link" [routerLink]="banner.link" [style.cursor]="banner.link ? 'pointer' : 'default'">
-            <mat-icon>{{ banner.icon }}</mat-icon>
-            <span>{{ banner.text | translate }}</span>
-            <div *ngIf="banner.subText">
-                {{ banner.subText | translate }}
-            </div>
-        </a>
-    </ng-container>
+<div osResized (osResizedHeight)="registerBannerHeight($event)">
+    <div
+        *ngFor="let banner of activeBanners | async"
+        class="banner flex-center background-accent"
+        [ngClass]="[banner.class ? banner.class : '', banner.largerOnMobileView ? 'larger-on-mobile' : '']"
+    >
+        <ng-container *ngIf="banner.component">
+            <ng-template [cdkPortalOutlet]="createComponentPortal(banner.component)"></ng-template>
+        </ng-container>
+        <ng-container *ngIf="!banner.component">
+            <a class="banner-link" [routerLink]="banner.link" [style.cursor]="banner.link ? 'pointer' : 'default'">
+                <mat-icon>{{ banner.icon }}</mat-icon>
+                <span>{{ banner.text | translate }}</span>
+                <div *ngIf="banner.subText">
+                    {{ banner.subText | translate }}
+                </div>
+            </a>
+        </ng-container>
+    </div>
 </div>
diff --git a/client/src/app/site/modules/site-wrapper/components/banner/banner.component.ts b/client/src/app/site/modules/site-wrapper/components/banner/banner.component.ts
@@ -1,5 +1,5 @@
 import { ComponentPortal } from '@angular/cdk/portal';
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Constructable } from 'src/app/domain/interfaces/constructable';
 
@@ -10,14 +10,28 @@ import { BannerDefinition, BannerService } from '../../services/banner.service';
     templateUrl: `./banner.component.html`,
     styleUrls: [`./banner.component.scss`]
 })
-export class BannerComponent {
+export class BannerComponent implements OnDestroy {
     public readonly activeBanners: Observable<BannerDefinition[]>;
 
+    private ownHeight = 0;
+
     public constructor(bannerService: BannerService) {
         this.activeBanners = bannerService.getActiveBannersObservable();
     }
 
+    public ngOnDestroy(): void {
+        this.registerBannerHeight(0);
+    }
+
     public createComponentPortal(component: Constructable): ComponentPortal<any> {
         return new ComponentPortal(component);
     }
+
+    public registerBannerHeight(height: number): void {
+        const areaHeight =
+            Number(document.documentElement.style.getPropertyValue(`--banner-area-height`).replace(`px`, ``)) || 0;
+        const newHeight = areaHeight === this.ownHeight ? height : areaHeight - this.ownHeight + height;
+        document.documentElement.style.setProperty(`--banner-area-height`, `${newHeight}px`);
+        this.ownHeight = height;
+    }
 }
diff --git a/client/src/app/site/modules/site-wrapper/site-wrapper.module.ts b/client/src/app/site/modules/site-wrapper/site-wrapper.module.ts
@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
+import { DirectivesModule } from 'src/app/ui/directives';
 
 import { BannerComponent } from './components/banner/banner.component';
 import { SiteWrapperComponent } from './components/site-wrapper/site-wrapper.component';
@@ -14,6 +15,7 @@ import { SiteWrapperServiceModule } from './services/site-wrapper-service.module
     declarations: [SiteWrapperComponent, BannerComponent],
     imports: [
         CommonModule,
+        DirectivesModule,
         RouterModule,
         PortalModule,
         MatButtonModule,

diff --git a/...igation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.html b/...igation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.html
@@ -64,9 +64,11 @@
         </mat-nav-list>
     </ng-template>
     <ng-template osSidenavMainContent>
-        <div class="content ensure-bottom-spacers-work-in-chrome">
+        <div class="content">
             <os-global-headbar></os-global-headbar>
-            <router-outlet #o="outlet"></router-outlet>
+            <div class="scrollable-content">
+                <router-outlet #o="outlet"></router-outlet>
+            </div>
         </div>
         <div class="toolbars">
             <os-action-bar></os-action-bar>

diff --git a/...igation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.scss b/...igation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.scss
@@ -65,11 +65,7 @@ mat-icon {
 }
 
 .scrollable-content {
-    height: calc(100% - var(--global-headbar-height));
+    height: calc(100vh - var(--global-headbar-height) - var(--view-headbar-height) - var(--banner-area-height));
     width: 100%;
     overflow: auto;
 }
-
-.ensure-bottom-spacers-work-in-chrome {
-    overflow: auto;
-}
diff --git a/...s/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss b/...s/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss
@@ -3,7 +3,8 @@
         height: calc(
             100vh -
                 (
-                    var(--global-headbar-height) + var(--view-headbar-height) // Offset for the headbars
+                    var(--global-headbar-height) + var(--view-headbar-height) + var(--banner-area-height)
+                        // Offset for the headbars
                     + 96px // Offset for the stepper
                     + 20px // Offset for the bottom spacer
                 )