Skip to content
Snippets Groups Projects
Commit 4dc09d59 authored by jvanboxtel@wisc.edu's avatar jvanboxtel@wisc.edu
Browse files

ROENROLL-1593 course details mobile

parent a8bc1b29
No related branches found
No related tags found
No related merge requests found
......@@ -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;
......
......@@ -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
......
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 },
});
});
......
<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">
......
......@@ -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;
}
}
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() {
......
......@@ -237,7 +237,7 @@ body {
@media screen and (max-width: 957px) {
.mat-dialog-container {
.dialog-with-toolbar {
padding-top: 20px;
padding: 20px !important;
}
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment