Feature/535 header auf mobile (#586)

* add new header * cm * add layout for mobile header * use only one content slot * clean up * revert ehight * finish basic layout * adjust height * fix appereance of default header * fix top padding from overview * clean up * add gap to filters * fix cypress tests * display current quarter * update overview layout logic to bootstrap * optimize styling * hide quarter label if not collapes * clean up and implement review --------- Co-authored-by: Yanick Minder <[email protected]>
puzzle · Nov 14, 2023 · d631eaf · d631eaf
1 parent 3e3947e
commit d631eaf
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 58 deletions.
diff --git a/frontend/cypress/e2e/login.cy.ts b/frontend/cypress/e2e/login.cy.ts
@@ -7,12 +7,12 @@ describe('OKR Login', () => {
 
   it('Login and check correct name is displayed', () => {
     cy.title().should('equal', 'Puzzle OKR');
-    cy.get("pzsh-menu-dropdown > div[slot='toggle']").contains(users.gl.name);
+    cy.getByTestId('user-name').contains(users.gl.name);
   });
 
   it('Login  and logout', () => {
     cy.title().should('equal', 'Puzzle OKR');
-    cy.get("pzsh-menu-dropdown > div[slot='toggle']").click();
+    cy.getByTestId('user-options').click();
     cy.getByTestId('logout').click();
     cy.origin(Cypress.env('login_url'), () => {
       cy.url().should('include', Cypress.env('login_url'));

diff --git a/frontend/src/app/application-banner/application-banner.component.html b/frontend/src/app/application-banner/application-banner.component.html
@@ -1,13 +1,34 @@
 <pzsh-banner id="okrBanner">
-  <img slot="tangram" ngSrc="assets/images/triangles-okr-header.svg" alt="okr-tangram" height="140" width="274" />
-  <div slot="content" class="header-content h-100 m-0 pt-3 pb-3 d-flex gap-2 flex-column container-fluid">
-    <div class="d-flex align-items-end gap-2">
-      <span class="d-flex flex-column">
-        <p class="mb-2">Quartal</p>
-        <app-quarter-filter></app-quarter-filter>
-      </span>
-      <app-objective-filter></app-objective-filter>
-    </div>
-    <app-team-filter></app-team-filter>
+  <img alt="okr-tangram" height="140" ngSrc="assets/images/triangles-okr-header.svg" slot="tangram" width="274" />
+  <div class="h-100 m-0 d-flex" slot="content">
+    <section class="d-none d-md-flex">
+      <div class="header-content h-100 m-0 pt-3 pb-3 d-flex gap-2 flex-column container-fluid">
+        <div class="d-flex align-items-end gap-2">
+          <span class="d-flex flex-column">
+            <p class="mb-2">Quartal</p>
+            <app-quarter-filter></app-quarter-filter>
+          </span>
+          <app-objective-filter></app-objective-filter>
+        </div>
+        <app-team-filter></app-team-filter>
+      </div>
+    </section>
+
+    <section class="m-0 d-sm-flex d-md-none w-100">
+      <mat-accordion [displayMode]="'flat'" class="w-100">
+        <mat-expansion-panel (closed)="panelOpenState = false" (opened)="panelOpenState = true" id="header-accordion">
+          <mat-expansion-panel-header>
+            <mat-panel-title *ngIf="!panelOpenState"
+              >{{ (quarterLabel$ | async) || quarterLabel$.getValue() }}
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div class="d-flex gap-2 flex-column">
+            <app-quarter-filter (quarterLabel$)="quarterLabel$.next($event)"></app-quarter-filter>
+            <app-objective-filter></app-objective-filter>
+            <app-team-filter></app-team-filter>
+          </div>
+        </mat-expansion-panel>
+      </mat-accordion>
+    </section>
   </div>
 </pzsh-banner>
diff --git a/frontend/src/app/application-banner/application-banner.component.scss b/frontend/src/app/application-banner/application-banner.component.scss
@@ -3,11 +3,11 @@
 #okrBanner {
   position: fixed;
   width: 100%;
-  height: $header-height;
+  height: min-content;
   z-index: 100;
   transition: 0.5s;
 }
 
 .header-content {
-  padding-left: 32px;
+  padding-left: 1.5rem;
 }
diff --git a/frontend/src/app/application-banner/application-banner.component.ts b/frontend/src/app/application-banner/application-banner.component.ts
@@ -1,4 +1,5 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
 
 @Component({
   selector: 'app-application-banner',
@@ -11,6 +12,8 @@ export class ApplicationBannerComponent implements AfterViewInit, OnDestroy {
   PUZZLE_TOP_BAR_HEIGHT: number = 48;
   okrBanner: HTMLElement | null = null;
   eventListener: EventListener | null = null;
+  quarterLabel$: BehaviorSubject<string> = new BehaviorSubject<string>('');
+  panelOpenState = false;
 
   resizeObserver: ResizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
     this.updateScrollEventListeners(entries[0].contentRect.height);

diff --git a/frontend/src/app/application-top-bar/application-top-bar.component.html b/frontend/src/app/application-top-bar/application-top-bar.component.html
@@ -1,29 +1,30 @@
 <div id="topBarHeight">
   <div id="okrTopbar">
-    <span class="d-flex h-100 align-items-center px-4">
+    <span class="d-flex h-100 align-items-center ps-4">
       <img alt="okr-logo" height="32" ngSrc="assets/images/okr-logo.svg" width="214" />
     </span>
     <div class="d-flex align-items-center">
       <div class="px-3">
         <a class="topBarEntry" href="https://wiki.puzzle.ch/Puzzle/OKRs">
           <mat-icon aria-hidden="false" aria-label="Help icon" class="text-white" fontIcon="help_outline"></mat-icon>
-          Hilfe
+          <span class="d-none d-md-flex"> Hilfe </span>
         </a>
       </div>
 
       <button
         (menuClosed)="menuIsOpen = false"
         (menuOpened)="menuIsOpen = true"
         [matMenuTriggerFor]="menu"
-        class="topBarEntry text-white me-5"
+        [attr.data-testId]="'user-options'"
+        class="topBarEntry text-white me-md-5 me-1"
         mat-button
       >
         <span class="d-flex align-items-center gap-1">
           <span class="mt-1">
             <mat-icon>person_outline</mat-icon>
           </span>
 
-          <p class="fw-normal fs-6">{{ username | async }}</p>
+          <p class="fw-normal fs-6 d-none d-md-flex" [attr.data-testId]="'user-name'">{{ username | async }}</p>
           <span class="mt-1">
             <mat-icon *ngIf="!menuIsOpen">expand_more</mat-icon>
             <mat-icon *ngIf="menuIsOpen">expand_less</mat-icon>

diff --git a/frontend/src/app/overview/overview.component.html b/frontend/src/app/overview/overview.component.html
@@ -2,7 +2,7 @@
 
 <app-application-top-bar></app-application-top-bar>
 <app-application-banner id="bannerComponent"></app-application-banner>
-<div class="overviewContainer bg-grey mt-header-height">
+<div class="overviewContainer">
   <app-team
     *ngFor="let overviewEntity of overviewEntities$ | async; trackBy: trackByFn"
     [overviewEntity]="overviewEntity"

diff --git a/frontend/src/app/overview/overview.component.scss b/frontend/src/app/overview/overview.component.scss
@@ -1,19 +0,0 @@
-@import "_variables";
-
-.overviewContainer {
-  overflow-x: hidden;
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
-@media screen and (max-width: 500px) {
-  .overviewContainer {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-.mt-header-height {
-  padding-top: $header-height;
-  background-color: $overview-bg;
-}

diff --git a/frontend/src/app/overview/overview.component.ts b/frontend/src/app/overview/overview.component.ts
@@ -40,8 +40,8 @@ export class OverviewComponent implements OnDestroy {
       .subscribe(() => this.loadOverviewWithParams());
 
     combineLatest([
-      <Observable<void>>refreshDataService.teamFilterReady,
-      <Observable<void>>refreshDataService.quarterFilterReady,
+      refreshDataService.teamFilterReady.asObservable(),
+      refreshDataService.quarterFilterReady.asObservable(),
     ])
       .pipe(take(1))
       .subscribe(() => {

diff --git a/frontend/src/app/quarter-filter/quarter-filter.component.ts b/frontend/src/app/quarter-filter/quarter-filter.component.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { QuarterService } from '../shared/services/quarter.service';
 import { Quarter } from '../shared/types/model/Quarter';
-import { Subject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
 import { ActivatedRoute, Router } from '@angular/router';
 import { getValueFromQuery } from '../shared/common';
 import { RefreshDataService } from '../shared/services/refresh-data.service';
@@ -12,7 +12,8 @@ import { RefreshDataService } from '../shared/services/refresh-data.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class QuarterFilterComponent implements OnInit {
-  quarters: Subject<Quarter[]> = new Subject<Quarter[]>();
+  quarters: BehaviorSubject<Quarter[]> = new BehaviorSubject<Quarter[]>([]);
+  @Output() quarterLabel$ = new EventEmitter<string>();
   quarterId: number = -1;
 
   constructor(
@@ -31,19 +32,23 @@ export class QuarterFilterComponent implements OnInit {
         this.quarterId = quarterId;
         this.changeDisplayedQuarter();
       } else {
+        this.quarterId = quarters[0].id;
         if (quarterQuery !== undefined) {
-          this.quarterId = quarters[0].id;
           this.changeDisplayedQuarter();
         } else {
-          this.quarterId = quarters[0].id;
           this.refreshDataService.quarterFilterReady.next();
         }
       }
+      const quarterLabel = quarters.find((e) => e.id == quarterId)?.label || '';
+      this.quarterLabel$.next(quarterLabel);
     });
   }
 
   changeDisplayedQuarter() {
     const id = this.quarterId;
+    const quarterLabel = this.quarters.getValue().find((e) => e.id == id)?.label || '';
+    this.quarterLabel$.next(quarterLabel);
+
     this.router
       .navigate([], { queryParams: { quarter: id } })
       .then(() => this.refreshDataService.quarterFilterReady.next());

diff --git a/frontend/src/app/team/team.component.scss b/frontend/src/app/team/team.component.scss
@@ -1,17 +1,6 @@
-.team-title {
-  font-size: 1.5rem;
-  padding-bottom: 16px;
-}
-
 .column-width {
   flex-grow: 1;
   min-width: 320px;
-  max-width: 500px;
+  max-width: 576px;
   flex-wrap: wrap;
 }
-
-@media screen and (max-width: 500px) {
-  .team-title {
-    padding-left: 31px;
-  }
-}
diff --git a/frontend/src/style/_variables.scss b/frontend/src/style/_variables.scss
@@ -7,7 +7,8 @@ $eggshell: #f6f7f8;
 $keyResult-border: #5d6974;
 $keyResult-bg: #e5e8eb;
 
-$header-height: 140px;
+$default-header-height: 140px;
+$mobile-header-height: 48px;
 $top-bar-height: 48px;
 
 $overview-bg: #d9d9d9;

diff --git a/frontend/src/style/custom_angular.components.scss b/frontend/src/style/custom_angular.components.scss
@@ -60,3 +60,7 @@ $scale-gap: 0.1;
     transform: scale(#{$scale-value});
   }
 }
+
+#header-accordion.mat-expansion-panel {
+  background: transparent;
+}
diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
@@ -159,3 +159,23 @@ body pzsh-backdrop {
     padding: 0 !important;
   }
 }
+
+.overviewContainer {
+  overflow-x: hidden;
+  padding-top: $default-header-height;
+  background-color: $overview-bg;
+  @extend .px-sm-4;
+
+  @include media-breakpoint-down(md) {
+    padding-top: $mobile-header-height;
+  }
+}
+
+.team-title {
+  font-size: 1.5rem;
+  padding-bottom: 16px;
+
+  @include media-breakpoint-down(sm) {
+    padding-left: 32px;
+  }
+}