From 4dc09d5931c2326fe5f42c05db6326f30982dfe5 Mon Sep 17 00:00:00 2001
From: "jvanboxtel@wisc.edu" <jvanboxtel@wisc.edu>
Date: Wed, 17 Apr 2019 14:48:08 -0500
Subject: [PATCH] ROENROLL-1593 course details mobile
---
.../degree-planner.component.scss | 11 ++
.../course-item/course-item.component.html | 2 +-
.../course-item/course-item.component.ts | 9 +-
.../course-details.component.html | 113 ++++++++++--------
.../course-details.component.scss | 5 +-
.../course-details.component.ts | 4 +
src/assets/sass/general.scss | 2 +-
7 files changed, 88 insertions(+), 58 deletions(-)
diff --git a/src/app/degree-planner/degree-planner.component.scss b/src/app/degree-planner/degree-planner.component.scss
index c4eed29..cb60f6c 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 0715c80..8b06f5f 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 9e565be..89732ed 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 fa218b6..c5b9bdd 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 4e6bdb6..e7d44a0 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 721936d..e6e31cd 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 b29f0ac..9b6e3e4 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;
}
}
}
--
GitLab