ROENROLL-1934 Mobile fixes

src/app/dars/audit/audit.component.scss

@@ -17,10 +17,17 @@ $black: #000000;
   }
 }
 
+/deep/#profile-and-menu-wrapper {
+  display: none !important;
+}
+
 .audit-metadata {
   display: flex;
   justify-content: space-between;
   line-height: 0.5rem;
+  @media screen and (max-width: 960px) {
+    line-height: 1;
+  }
 }
 
 .audit-section-controles {
@@ -69,8 +76,8 @@ $black: #000000;
   }
 
   .audit-section {
-    padding-left: 1rem;
-    padding-right: 1rem;
+    padding-left: 0;
+    padding-right: 0;
   }
 }
 
@@ -310,6 +317,13 @@ $black: #000000;
   .advanced-standing-creds {
     width: 48%;
   }
+  @media screen and (max-width: 960px) {
+    flex-direction: column;
+    .hs-units,
+    .advanced-standing-creds {
+      width: 100%;
+    }
+  }
 }
 
 /*

src/app/dars/dars-view/dars-view.component.html

@@ -75,7 +75,7 @@
         <mat-card-title>Degree Audit (DARS)</mat-card-title>
       </mat-card-header>
       <mat-card-content>
-          <mat-tab-group>
+          <mat-tab-group mat-align-tabs="center" mat-stretch-tabs>
               <mat-tab label="Degree Audit">
                   <div class="run-audit-mobile">
                       <p>See the progress towards your current academic plan/program.</p>
@@ -112,7 +112,7 @@
                     aria-label="Run new degree audit"
                     [disabled]="(metadataStatus$ | async) != 'Loaded'"
                     color="primary"
-                    (click)="openDegreeAuditDialog()">
+                    (click)="openWhatIfAuditDialog()">
                     Run new &lsquo;what if&rsquo; audit
                     </button>
                 </div>
@@ -127,7 +127,7 @@
                     </ng-container>
                     <ng-container *ngSwitchCase="'Loaded'">
                         <cse-metadata-mobile-view
-                        [metadata]="programMetadata$ | async">
+                        [metadata]="whatIfMetadata$ | async">
                       </cse-metadata-mobile-view>
                     </ng-container>
                   </div>

src/app/dars/dars-view/dars-view.component.scss

@@ -22,6 +22,10 @@
   padding-top: 2rem;
 }
 
+/deep/#profile-and-menu-wrapper {
+  display: none !important;
+}
+
 #dars-view-title,
 .dars-header-bar,
 .dars-audit-group {

src/app/dars/metadata-mobile-view/metadata-mobile-view.component.html

@@ -5,16 +5,14 @@
         <div fxLayout="column" fxLayoutAlign="space-between start" fxFlex="80">
           <div fxLayout="column" fxLayoutAlign="start start">
             <!-- School -->
-            <mat-card-title>{{ audit.darsInstitutionCodeDescription }} </mat-card-title>
+            <mat-card-title>{{ audit.darsInstitutionCodeDescription | schoolOrCollege }} </mat-card-title>
             <!-- Program -->
-            <mat-card-subtitle>{{ audit.darsDegreeProgramCode }}</mat-card-subtitle>
+            <mat-card-subtitle>{{ audit.darsDegreeProgramDescription }}</mat-card-subtitle>
           </div>
         </div>
         <div fxLayout="column" fxLayoutAlign="space-between end" fxFlex="20">
-          <div *ngIf="!disabled" fxLayout="row" fxLayoutAlign="end center">
-            <button mat-raised-button>
-              <mat-icon class="download-audit-icon" aria-label="Download Audit PDF">vertical_align_bottom</mat-icon>
-            </button>
+          <div *ngIf="!disabled" fxLayout="column" fxLayoutAlign="end center">
+            <a class="mat-stroked-button mat-raised-button mat-primary" attr.aria-label="View full audit report for {{(audit.darsDegreeProgramDescription || '').toLowerCase()}}  Program of Study" [routerLink]="['/dars', audit.darsDegreeAuditReportId || 0]">View</a>
           </div>
         </div>
       </div>
@@ -30,9 +28,15 @@
 
       <mat-card-footer>
         <!-- Status -->
-        Status: {{ audit.darsStatusOfDegreeAuditRequest }} <br />
-        Run {{ audit.darsAuditRunDate | date:'short' }}
-
+        <div fxLayout="row">
+          <div>
+              Status: {{ audit.darsStatusOfDegreeAuditRequest }} <br />
+              Run {{ audit.darsAuditRunDate | date:'short' }}
+          </div>
+          <button mat-raised-button class="download-button">
+            <mat-icon class="download-audit-icon" aria-label="Download Audit PDF">vertical_align_bottom</mat-icon>
+          </button>
+        </div>
       </mat-card-footer>
     </mat-card>
   </div>

src/app/dars/metadata-mobile-view/metadata-mobile-view.component.scss

@@ -6,13 +6,17 @@
     font-size: 14px;
     font-weight: normal;
   }
-  mat-card-subtitle {
+  mat-card-subtitle,
+  mat-card-title {
     font-weight: bold;
     color: #000000;
   }
   mat-card-footer {
     margin: 0px;
   }
+  .download-button {
+    margin-left: auto;
+  }
   .download-audit-icon {
     color: mat-color($my-app-primary);
   }

src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.scss

@@ -6,6 +6,9 @@
 
 .mat-stepper-vertical {
   width: 731px;
+  @media screen and (max-width: 960px) {
+    width: auto;
+  }
 }
 
 .mat-radio-button {