From 88cbb86c032e6a32ae1331f3333e13c561232689 Mon Sep 17 00:00:00 2001
From: "jvanboxtel@wisc.edu" <jvanboxtel@wisc.edu>
Date: Tue, 25 Jun 2019 09:55:00 -0500
Subject: [PATCH] ROENROLL-1842 basic mobile page layout

---
 .../dars/dars-view/dars-view.component.html   | 67 ++++++++++++++++++-
 .../dars/dars-view/dars-view.component.scss   | 10 ++-
 src/app/dars/dars-view/dars-view.component.ts |  7 +-
 3 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index 26743d1..7aa7173 100644
--- a/src/app/dars/dars-view/dars-view.component.html
+++ b/src/app/dars/dars-view/dars-view.component.html
@@ -1,4 +1,4 @@
-<mat-sidenav-container id="dars-container">
+<mat-sidenav-container id="dars-container" *ngIf="!mobileView.matches">
   <mat-sidenav id="dars-report-container" mode="over" position="end" [opened]="(visibleAuditStatus$ | async) != 'NotLoaded'">
     <div class="audit-wrapper">
       <div class="audit-header-buttons">
@@ -99,3 +99,68 @@
     </div>
   </div>
 </mat-sidenav-container>
+
+<div *ngIf="mobileView.matches">
+  <mat-card>
+      <mat-card-header>
+        <mat-card-title>Degree Audit (DARS)</mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+          <mat-tab-group>
+              <mat-tab label="Degree Audit">
+                See the progress towards your current program of study.
+                <button mat-raised-button
+                  aria-label="Run new degree audit"
+                  color="primary"
+                  [disabled]="(metadataStatus$ | async) != 'Loaded'"
+                  (click)="openNewAuditOptionsDialog('degree')">
+                  Run new degree audit
+                </button>
+                <mat-divider></mat-divider>
+                <h3>Audits</h3>
+                <div class="dars-audit-group" [ngSwitch]="metadataStatus$ | async">
+                    <ng-container *ngSwitchCase="'Error'">
+                      <h2 style="color:red">error loading metadata</h2>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'Loading'">
+                      <mat-spinner></mat-spinner>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'Loaded'">
+                      <cse-dars-metadata-table
+                        [metadata]="programMetadata$ | async"
+                        (openAudit)="openAudit($event)">
+                      </cse-dars-metadata-table>
+                    </ng-container>
+                  </div>
+              </mat-tab>
+              <mat-tab label="What-if">
+                See the progress towards a new or current program of study and degree plans.
+                <button
+                mat-raised-button
+                aria-label="Run new degree audit"
+                [disabled]="(metadataStatus$ | async) != 'Loaded'"
+                color="primary"
+                (click)="openNewAuditOptionsDialog('whatif')">
+                Run new &lsquo;what if&rsquo; audit
+                </button>
+                <mat-divider></mat-divider>
+                <h3>Audits</h3>
+                <div class="dars-audit-group" [ngSwitch]="metadataStatus$ | async">
+                    <ng-container *ngSwitchCase="'Error'">
+                      <h2 style="color:red">error loading metadata</h2>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'Loading'">
+                      <mat-spinner></mat-spinner>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'Loaded'">
+                      <cse-dars-metadata-table
+                        [metadata]="whatIfMetadata$ | async"
+                        (openAudit)="openAudit($event)">
+                      </cse-dars-metadata-table>
+                    </ng-container>
+                  </div>
+              </mat-tab>
+          </mat-tab-group>
+      </mat-card-content>
+  </mat-card>
+</div>
diff --git a/src/app/dars/dars-view/dars-view.component.scss b/src/app/dars/dars-view/dars-view.component.scss
index df6ebc5..3f419ea 100644
--- a/src/app/dars/dars-view/dars-view.component.scss
+++ b/src/app/dars/dars-view/dars-view.component.scss
@@ -1,3 +1,5 @@
+@import 'assets/material-theme.scss';
+
 #dars-container {
   width: 100%;
   height: 100%;
@@ -50,8 +52,7 @@
 
 #loading-audit {
   text-align: center;
-  font-family: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
-
+  font-family: mat-font-family($config);
   img {
     width: 100%;
     max-width: 150px;
@@ -75,3 +76,8 @@
   justify-content: space-between;
   align-items: baseline;
 }
+
+mat-card-header {
+  background-color: mat-color($my-app-primary);
+  color: white;
+}
diff --git a/src/app/dars/dars-view/dars-view.component.ts b/src/app/dars/dars-view/dars-view.component.ts
index ccd3b8c..ffd480a 100644
--- a/src/app/dars/dars-view/dars-view.component.ts
+++ b/src/app/dars/dars-view/dars-view.component.ts
@@ -1,3 +1,4 @@
+import { MediaMatcher } from '@angular/cdk/layout';
 import { Component, OnInit } from '@angular/core';
 import { AuditMetadata } from '../models/audit-metadata';
 import { MatDialog } from '@angular/material';
@@ -23,13 +24,17 @@ export class DARSViewComponent implements OnInit {
   public whatIfMetadata$: Observable<AuditMetadata[]>;
   public visibleAuditStatus$: Observable<DARSState['visibleAudit']['status']>;
   public audit$: Observable<Audit | null>;
+  public mobileView: MediaQueryList;
   public alerts$: Observable<Alert[]>;
 
   constructor(
     private store: Store<GlobalState>,
     public dialog: MatDialog,
+    public mediaMatcher: MediaMatcher,
     private api: DarsApiService,
-  ) {}
+  ) {
+    this.mobileView = mediaMatcher.matchMedia('(max-width: 959px)');
+  }
 
   public ngOnInit() {
     this.store.dispatch(new darsActions.StartLoadingMetadata());
-- 
GitLab