ROENROLL-1593 course details mobile

src/app/degree-planner/degree-planner.component.scss

@@ -47,6 +47,17 @@ mat-sidenav {
   }
 }
 
+/deep/.dialog-fullscreen {
+  max-width: none !important;
+  max-height: none !important;
+
+  width: 100% !important;
+  height: 100% !important;
+  .mat-dialog-content {
+    max-height: 100% !important;
+  }
+}
+
 @media screen and (max-width: 600px) {
   #menu-toggle-btn {
     position: relative;

src/app/degree-planner/shared/course-item/course-item.component.html

@@ -91,7 +91,7 @@
         <mat-menu #courseMenu="matMenu" class="course-item-menu" isFocusable="true" isTabbable="true">
           <ng-template matMenuContent>
             <button mat-menu-item (click)="openCourseDetailsDialog()" aria-describedby="course-details-content" aria-label="Open dialog to see course details">
-              Course Details
+              Course details
             </button>
             <button mat-menu-item [matMenuTriggerFor]="academicYearsGroup" aria-label="Select to move this course to a different term">
               Move

src/app/degree-planner/shared/course-item/course-item.component.ts

+import { MediaMatcher } from '@angular/cdk/layout';
 import { Component, Input, OnInit } from '@angular/core';
 import { MatDialog, MatSnackBar } from '@angular/material';
 import { Store, select } from '@ngrx/store';
@@ -52,6 +53,7 @@ export class CourseItemComponent implements OnInit {
   public plannedCourses: ReadonlyArray<Course>;
   public toActiveTerm: boolean;
   public isStruckthrough = false;
+  public mobileView: MediaQueryList;
 
   constructor(
     private api: DegreePlannerApiService,
@@ -59,7 +61,10 @@ export class CourseItemComponent implements OnInit {
     private store: Store<GlobalState>,
     private constants: ConstantsService,
     private snackBar: MatSnackBar,
-  ) {}
+    public mediaMatcher: MediaMatcher,
+  ) {
+    this.mobileView = mediaMatcher.matchMedia('(max-width: 959px)');
+  }
 
   ngOnInit() {
     const isActive = this.era === 'active';
@@ -302,6 +307,7 @@ export class CourseItemComponent implements OnInit {
       this.snackBar.open(`'${short} ${catalogNumber}' no longer offered`);
       return;
     }
+    console.log('mobile view', this.mobileView);
 
     this.api
       .getCourseDetails(subjectCode, courseId)
@@ -309,6 +315,7 @@ export class CourseItemComponent implements OnInit {
         const dialogRef = this.dialog.open(CourseDetailsDialogComponent, {
           maxWidth: '800px',
           width: '80%',
+          panelClass: this.mobileView.matches ? 'dialog-fullscreen' : '',
           data: { courseDetails: courseDetails, courseType: this.type },
         });
       });

src/app/shared/components/course-details/course-details.component.html

-<div id="course-details-content">
-  <div fxLayout="row">
-    <div
-      fxLayout="row"
-      fxLayout.lt-md="column"
-      fxFlex="100"
-      fxLayoutGap="10px"
-      class="course-details-header">
-      <div fxFlex="50" class="course-detail-title" fxLayoutAlign="start center">
-        <h3>
-          {{ courseDetails.fullCourseDesignation | titlecase }}
-          <span class="course-detail-subtitle">{{ courseDetails.title }}</span>
-        </h3>
-      </div>
-      <div
-        *ngIf="type === 'search' || type === 'saved'"
-        fxFlex="50"
-        fxLayout="row"
-        fxLayoutAlign="end start">
-        <div class="term-selection">
-          <form [formGroup]="termSelector" (ngSubmit)="addCourseToPlan($event)">
-            <mat-form-field style="margin-right:20px;">
-              <mat-select
-                placeholder="Term"
-                aria-label="Term"
-                matInput
-                role="listbox"
-                formControlName="term"
-                cdkFocusInitial>
-                <mat-option
-                  role="option"
-                  *ngFor="let term of (droppableTermCodes$ | async)"
-                  [value]="term"
-                  >{{ term | getTermDescription }}</mat-option>
-              </mat-select>
-            </mat-form-field>
+<div id="course-details-content" fxLayout="column">
+  <div class="course-details-header" fxLayout="column" fxFlex="100" fxLayoutGap="10px" class="term-selection" *ngIf="mobileView.matches">
+    <div class="term-selection" *ngIf="type === 'search' || type === 'saved'" fxLayout="row" fxFlex="100">
+      <form [formGroup]="termSelector" (ngSubmit)="addCourseToPlan($event)" style="width:100%;display:flex">
+        <mat-form-field style="margin-right:20px;">
+          <mat-select placeholder="Term" aria-label="Term" matInput role="listbox" formControlName="term" cdkFocusInitial>
+            <mat-option role="option" *ngFor="let term of (droppableTermCodes$ | async)" [value]="term" >
+              {{ term | getTermDescription }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
 
-            <button
-              mat-raised-button
-              color="primary"
-              mat-dialog-close
-              (click)="addCourseToPlan($event)">
-              Add to plan
-            </button>
-          </form>
-        </div>
-      </div>
+        <button mat-raised-button color="primary" mat-dialog-close (click)="addCourseToPlan($event)" style="margin-top:6px;height:60%;margin-left:auto">
+          Add to plan
+        </button>
+      </form>
+    </div>
+    <div fxLayout="column" fxFlex="100" class="course-detail-title" fxLayoutAlign="end start">
+      <h2>
+        {{ courseDetails.fullCourseDesignation | titlecase }}
+        <div class="course-detail-subtitle">{{ courseDetails.title }}</div>
+      </h2>
     </div>
   </div>
+  <div fxLayout="row" fxFlex="100" fxLayoutGap="10px" class="course-details-header" *ngIf="!mobileView.matches">
+    <div fxFlex="50" class="course-detail-title" fxLayoutAlign="start center">
+      <h2>
+        {{ courseDetails.fullCourseDesignation | titlecase }}
+        <span class="course-detail-subtitle">{{ courseDetails.title }}</span>
+      </h2>
+    </div>
+    <div *ngIf="type === 'search' || type === 'saved'" fxFlex="50" fxLayout="row" fxLayoutAlign="end start">
+      <div class="term-selection">
+        <form [formGroup]="termSelector" (ngSubmit)="addCourseToPlan($event)">
+          <mat-form-field style="margin-right:20px;">
+            <mat-select
+              placeholder="Term"
+              aria-label="Term"
+              matInput
+              role="listbox"
+              formControlName="term"
+              cdkFocusInitial>
+              <mat-option
+                role="option"
+                *ngFor="let term of (droppableTermCodes$ | async)"
+                [value]="term"
+                >{{ term | getTermDescription }}</mat-option>
+            </mat-select>
+          </mat-form-field>
 
-  <div
-    fxLayout="column"
-    fxLayoutAlign="space-around start"
-    fxLayoutGap="10px"
-    class="course-details-content">
+          <button
+            mat-raised-button
+            color="primary"
+            mat-dialog-close
+            (click)="addCourseToPlan($event)">
+            Add to plan
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+  <div fxLayout="column" fxLayoutAlign="space-around start" fxLayoutGap="10px" class="course-details-content">
     <p>{{ courseDetails.description }}</p>
 
     <p *ngIf="courseDetails.enrollmentPrerequisites">
-      <span class="semi-bold">Requisites: </span
-      >{{ courseDetails.enrollmentPrerequisites }}
+      <span class="semi-bold">Requisites: </span>
+        {{ courseDetails.enrollmentPrerequisites }}
     </p>
 
     <ul class="courseDetails-list">

src/app/shared/components/course-details/course-details.component.scss

@@ -25,6 +25,7 @@
     .course-detail-subtitle {
       font-weight: 300;
       display: block;
+      font-size: 16px;
       line-height: 1.8;
     }
   }
@@ -32,7 +33,7 @@
     padding-top: 0px;
   }
   .course-details-header {
-    padding: 12px 0px;
+    padding: 12px 0px 0px;
   }
   .btn-link {
     color: map-get($uw-primary, 500);
@@ -69,6 +70,6 @@
     margin-top: 0px;
   }
   .course-details-header {
-    margin-bottom: 22px;
+    // margin-bottom: 22px;
   }
 }

src/app/shared/components/course-details/course-details.component.ts

+import { MediaMatcher } from '@angular/cdk/layout';
 import { Component, OnInit, OnDestroy, Inject, Input } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material';
 import { FormBuilder, FormGroup } from '@angular/forms';
@@ -36,6 +37,7 @@ export class CourseDetailsComponent implements OnInit, OnDestroy {
   public selectedSearchTerm: string;
   public term$: Observable<PlannedTerm>;
   public termSelector: FormGroup;
+  public mobileView: MediaQueryList;
 
   public selectedSearchTerm$: Observable<string>;
   public droppableTermCodes$: Observable<string[]>;
@@ -48,9 +50,11 @@ export class CourseDetailsComponent implements OnInit, OnDestroy {
     private store: Store<GlobalState>,
     private fb: FormBuilder,
     public dialog: MatDialog,
+    public mediaMatcher: MediaMatcher,
   ) {
     this.courseDetails = data.courseDetails;
     this.type = data.courseType;
+    this.mobileView = mediaMatcher.matchMedia('(max-width: 959px)');
   }
 
   ngOnInit() {

src/assets/sass/general.scss

@@ -237,7 +237,7 @@ body {
 @media screen and (max-width: 957px) {
   .mat-dialog-container {
     .dialog-with-toolbar {
-      padding-top: 20px;
+      padding: 20px !important;
     }
   }
 }