Responsive app

src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ import { TeamsComponent } from './component/teams/teams.component';
 const routes: Routes = [
   { path: '', component: MatrixComponent },
   { path: 'circular-heatmap', component: CircularHeatmapComponent },
+  { path: 'matrix', component: MatrixComponent },
   { path: 'activity-description', component: ActivityDescriptionComponent },
   { path: 'mapping', component: MappingComponent },
   { path: 'usage', redirectTo: 'usage/' },

src/app/app.component.css

@@ -2,21 +2,34 @@
 .main-container {
   width: 100%;
   height: 100%;
-  /*border: 10px solid yellow;*/
 }
 
 .sidenav-content {
   display: flex;
   padding: 10px;
-  align-items: left;
-  justify-content: left;
-  /*background-color: red;*/
+  justify-content: space-between;
 }
 
-.example-sidenav {
+.sidenav-menu {
   padding: 20px;
 }
 
+.menu-close {
+  position: absolute;
+  right: 0;
+  top: 2px;
+  background: transparent;
+  border: 0;
+  color: #ddd;
+}
+
 .github-fork-ribbon:before {
   background-color: #333;
 }
+
+@media only screen and (max-width: 750px) {
+    .github-fork-ribbon {
+        display: none;
+      }
+
+}

src/app/app.component.html

@@ -1,11 +1,18 @@
 <mat-drawer-container class="main-container" autosize>
-  <mat-drawer #drawer class="example-sidenav" mode="side">
+  <mat-drawer
+    #drawer
+    class="sidenav-menu"
+    mode="side"
+    opened="{{ menuIsOpen }}">
+    <button class="menu-close" (click)="toggleMenu()">
+      <mat-icon class="white-icon">close</mat-icon>
+    </button>
     <a routerLink="/"><app-logo></app-logo></a>
     <app-sidenav-buttons></app-sidenav-buttons>
   </mat-drawer>
 
   <div class="sidenav-content">
-    <button type="button" mat-button (click)="drawer.toggle()" color="primary">
+    <button type="button" mat-button (click)="toggleMenu()" color="primary">
       <mat-icon>menu</mat-icon>
     </button>
     <a

src/app/app.component.ts

@@ -1,10 +1,25 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'DSOMM';
+  menuIsOpen: boolean = true;
+
+  ngOnInit(): void {
+    let menuState: string | null = localStorage.getItem('state.menuIsOpen');
+    if (menuState === 'false') {
+      setTimeout(() => {
+        this.menuIsOpen = false;
+      }, 600);
+    }
+  }
+
+  toggleMenu(): void {
+    this.menuIsOpen = !this.menuIsOpen;
+    localStorage.setItem('state.menuIsOpen', this.menuIsOpen.toString());
+  }
 }

src/app/component/circular-heatmap/circular-heatmap.component.css

@@ -17,22 +17,34 @@
 }
 
 .right-panel {
-  float: right;
-  width: 25%;
   margin: 5%;
   padding: 20px;
+  height: 80vh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
 }
-.downloadButtonClass {
-  position: fixed;
-  padding: 10px;
-  bottom: 5%;
-  right: 5%;
+
+.heatmapClass {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 6fr 4fr;
+  height: 100%;
+  width: 100%;
 }
-.resetButtonClass {
-  position: fixed;
-  padding: 10px;
-  bottom: 5%;
-  right: 18%;
+
+.heatmapChart {
+  grid-row: 1/4;
+  display: grid;
+  justify-items: center;
+  align-content: space-between;
+}
+#chart {
+  width: 100%;
+  max-width: min(100vh - 60px, 100vw - 60px);
+}
+
+.downloadButtonClass {
+  margin: 10px 0;
 }
 .overlay-details {
   z-index: 2;
@@ -69,15 +81,86 @@
   justify-content: top;
   margin-left: auto;
 }
+.team-filter {
+  padding: 0.4rem;
+  grid-column: 2/3;
+  display: flex;
+  flex-direction: column;
+}
+
+.team-filter.hidden {
+  height: 0;
+  visibility: collapse;
+}
+
+.filter-toggle .hidden {
+  display: none;
+}
 .team-list {
   list-style-type: none;
   margin: 0;
   padding: 0 1em;
 }
-/* .team-filter {
+.mat-chip-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 1rem;  
+}
+.filter-container {
+  position: relative;
+}
+button.filter-toggle {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  border: 0;
+  background-color: transparent;
+  z-index: 1;
   padding: 0;
-  width: 60%;
-} */
-.team-filter > .mat-form-field {
-  display: block;
+  min-width: 0;
+  line-height: 24px;
 }
+
+.footer-buttons {
+  grid-column: 2/3;
+  place-self: flex-end;
+  margin: 0 1rem;
+  padding-top: 1rem;
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+}
+
+@media only screen and (max-width: 750px) {
+  .heatmapClass {
+      grid-template-rows: auto auto 1fr auto;
+      grid-template-columns: 1fr;
+  }
+
+  .team-filter, .heatmapChart, .footer-buttons {
+      grid-column: 1;
+  }
+
+  .team-filter {
+      grid-row: 1;
+      padding: 0.4rem;
+  }
+
+  .mat-chip-list {
+      padding: 0.4rem;
+  }
+
+  .heatmapChart {
+      grid-row: 2;
+  }
+
+  #chart {
+      max-width: max(60vh, 60vw);
+  }
+
+  .overlay-details {
+    width: 100%;
+  }  
+
+}

src/app/component/circular-heatmap/circular-heatmap.component.html

@@ -192,9 +192,18 @@ <h2>Nothing to show</h2>
           </div>
         </ng-template>
       </div>
-      <div id="chart" class="heatmapClass">
-        <div class="right-panel">
-          <div class="team-filter">
+      <div class="heatmapClass">
+        <div id="chart" class="heatmapChart"></div>
+        <div class="filter-container">
+          <button
+            class="filter-toggle"
+            mat-button
+            color="primary"
+            (click)="toggleFilters()">
+            <mat-icon [class.hidden]="!showFilters">keyboard_arrow_up</mat-icon>
+            <mat-icon [class.hidden]="showFilters">filter_alt</mat-icon>
+          </button>
+          <div class="team-filter" [class.hidden]="!showFilters">
             <mat-form-field class="team-chip-list">
               <mat-label>Team Group Filter</mat-label>
               <mat-chip-list selectable>
@@ -225,68 +234,69 @@ <h2>Nothing to show</h2>
               </mat-chip-list>
             </mat-form-field>
           </div>
-          <mat-card class="example-card" *ngIf="showActivityCard">
-            <mat-card-title-group>
-              <mat-card-title>{{ cardHeader }}</mat-card-title>
-              <mat-card-subtitle>{{ cardSubheader }}</mat-card-subtitle>
-            </mat-card-title-group>
-            <mat-card-content
-              *ngFor="let activity of activityData; index as activityIndex">
-              <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                  <mat-panel-title>
-                    <button
-                      class="title-button"
+        </div>
+        <mat-card class="example-card" *ngIf="showActivityCard">
+          <mat-card-title-group>
+            <mat-card-title>{{ cardHeader }}</mat-card-title>
+            <mat-card-subtitle>{{ cardSubheader }}</mat-card-subtitle>
+          </mat-card-title-group>
+          <mat-card-content
+            *ngFor="let activity of activityData; index as activityIndex">
+            <mat-expansion-panel>
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <button
+                    class="title-button"
+                    (click)="
+                      $event.preventDefault();
+                      openActivityDetails(
+                        currentDimension,
+                        cardHeader,
+                        activity['activityName']
+                      )
+                    ">
+                    {{ activity['activityName'] }}
+                  </button>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <ng-template matExpansionPanelContent>
+                <ul class="team-list">
+                  <li *ngFor="let teamname of teamVisible">
+                    <mat-checkbox
+                      [checked]="activity.teamsImplemented[teamname]"
+                      color="primary"
                       (click)="
-                        $event.preventDefault();
-                        openActivityDetails(
-                          currentDimension,
-                          cardHeader,
-                          activity['activityName']
-                        )
+                        this.teamCheckbox(activityIndex, teamname);
+                        $event.preventDefault()
                       ">
-                      {{ activity['activityName'] }}
-                    </button>
-                  </mat-panel-title>
-                </mat-expansion-panel-header>
-                <ng-template matExpansionPanelContent>
-                  <ul class="team-list">
-                    <li *ngFor="let teamname of teamVisible">
-                      <mat-checkbox
-                        [checked]="activity.teamsImplemented[teamname]"
-                        color="primary"
-                        (click)="
-                          this.teamCheckbox(activityIndex, teamname);
-                          $event.preventDefault()
-                        ">
-                        {{ teamname }}
-                      </mat-checkbox>
-                    </li>
-                  </ul>
-                  <b *ngIf="teamVisible.length === 0">
-                    No Teams Selected, Please select a team from the filters
-                    above.
-                  </b>
-                </ng-template>
-              </mat-expansion-panel>
-            </mat-card-content>
-          </mat-card>
+                      {{ teamname }}
+                    </mat-checkbox>
+                  </li>
+                </ul>
+                <b *ngIf="teamVisible.length === 0">
+                  No Teams Selected, Please select a team from the filters
+                  above.
+                </b>
+              </ng-template>
+            </mat-expansion-panel>
+          </mat-card-content>
+        </mat-card>
+        <div class="footer-buttons">
+          <button
+            class="normal-button"
+            mat-raised-button
+            class="downloadButtonClass"
+            (click)="saveEditedYAMLfile()">
+            Download edited YAML file
+          </button>
+          <button
+            class="normal-button"
+            mat-raised-button
+            class="resetButtonClass"
+            (click)="deleteLocalTeamsProgress()">
+            Reset Implemented
+          </button>
         </div>
-
-        <button
-          class="normal-button"
-          mat-raised-button
-          class="downloadButtonClass"
-          (click)="saveEditedYAMLfile()">
-          Download edited YAML file
-        </button>
-        <button
-          class="normal-button"
-          mat-raised-button
-          class="resetButtonClass"
-          (click)="deleteLocalTeamsProgress()">
-          Delete team progress
-        </button>
       </div>
     </div>
     <div class="col-md-3"></div>