diff --git a/src/app/dars/audit/audit.component.scss b/src/app/dars/audit/audit.component.scss index 1fc28b2940f75bed19c77679a95d8eca49200028..a0d0f58343cc630542544d48ff9669a975665cb1 100644 --- a/src/app/dars/audit/audit.component.scss +++ b/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%; + } + } } /* diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html index 07ce75c9e5e87e0fc6655bf2a048c759df1a0b41..1f670a0e1df6eec5f57b4ea62825346472f8ecc9 100644 --- a/src/app/dars/dars-view/dars-view.component.html +++ b/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 ‘what if’ 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> diff --git a/src/app/dars/dars-view/dars-view.component.scss b/src/app/dars/dars-view/dars-view.component.scss index 9f511f98dfbd84696041e713fea66fea1b3232a3..c141255e7f642bc65fc87a3d6230bc7355d62f14 100644 --- a/src/app/dars/dars-view/dars-view.component.scss +++ b/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 { diff --git a/src/app/dars/metadata-mobile-view/metadata-mobile-view.component.html b/src/app/dars/metadata-mobile-view/metadata-mobile-view.component.html index 1ff55854994d6d1ffa8e24a9f6faf0a61bc9863f..5f1fa206dd5520f712b394383e212ba40d53b323 100644 --- a/src/app/dars/metadata-mobile-view/metadata-mobile-view.component.html +++ b/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> diff --git a/src/app/dars/metadata-mobile-view/metadata-mobile-view.component.scss b/src/app/dars/metadata-mobile-view/metadata-mobile-view.component.scss index 3509b2460bcf514e828924f6756c7645069e643a..da1aa6b5c6d4e039d043d2ff4ca006f2c8735da6 100644 --- a/src/app/dars/metadata-mobile-view/metadata-mobile-view.component.scss +++ b/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); } diff --git a/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.scss b/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.scss index 072449b6ecba09f3a37793f81299cd951c78f75a..9342d9dbfa3b9358f0e68a00404af17fefe8800a 100644 --- a/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.scss +++ b/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 {