diff --git a/src/app/degree-planner/degree-planner.component.scss b/src/app/degree-planner/degree-planner.component.scss
index c4eed298cc448a38ee6af6b64d5963d93ef25c92..cb60f6c24dba05f1af357b2e612d02f9dfdf7eda 100644
--- a/src/app/degree-planner/degree-planner.component.scss
+++ b/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;
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.html b/src/app/degree-planner/shared/course-item/course-item.component.html
index 0715c805394fc15bc8a4b88446412960017045aa..8b06f5f8c5104532c77008c674b841d53a6a585f 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.html
+++ b/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
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.ts b/src/app/degree-planner/shared/course-item/course-item.component.ts
index 9e565bedc8dfacc5e3e58abefad5bb5d58380f82..89732edf42c3570289067db940b8eba38011d5ca 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.ts
+++ b/src/app/degree-planner/shared/course-item/course-item.component.ts
@@ -1,3 +1,4 @@
+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 },
});
});
diff --git a/src/app/shared/components/course-details/course-details.component.html b/src/app/shared/components/course-details/course-details.component.html
index fa218b620e3880db9da1ad5aa7990663c245c0c4..c5b9bdd1ae66be89a3c716b6d9a24e6846e8c157 100644
--- a/src/app/shared/components/course-details/course-details.component.html
+++ b/src/app/shared/components/course-details/course-details.component.html
@@ -1,63 +1,70 @@
-<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">
diff --git a/src/app/shared/components/course-details/course-details.component.scss b/src/app/shared/components/course-details/course-details.component.scss
index 4e6bdb695c22b8c8dacb8af28d826c8e274f883f..e7d44a09065d2a9d9d8f50ddff7972081339364e 100644
--- a/src/app/shared/components/course-details/course-details.component.scss
+++ b/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;
}
}
diff --git a/src/app/shared/components/course-details/course-details.component.ts b/src/app/shared/components/course-details/course-details.component.ts
index 721936d8abafd2295c00e4718e8c7bec6d5dbd37..e6e31cd146dcd4aa88e67fb6ae66ebf65dc9fc11 100644
--- a/src/app/shared/components/course-details/course-details.component.ts
+++ b/src/app/shared/components/course-details/course-details.component.ts
@@ -1,3 +1,4 @@
+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() {
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index b29f0ac22691a7fe84f1c98c0d9849afd6a119d2..9b6e3e4981591dfe709030d2b7b3b59ef1040efb 100644
--- a/src/assets/sass/general.scss
+++ b/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;
}
}
}