From 0768a111bdbfa64cd2bae4878cf566571974557c Mon Sep 17 00:00:00 2001
From: Scott Berg <scott.berg@wisc.edu>
Date: Thu, 29 Nov 2018 15:42:35 +0000
Subject: [PATCH] Update terms / courses to match the updated design
---
.../course-details-dialog.component.spec.ts | 32 ++++++-------
.../favorites-container.component.scss | 4 +-
.../course-item/course-item.component.scss | 15 +++---
.../term-container.component.html | 46 +++++++++++-------
.../term-container.component.scss | 48 ++++++++++++++++---
5 files changed, 94 insertions(+), 51 deletions(-)
diff --git a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.spec.ts b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.spec.ts
index 0d75a52..2a4b12f 100644
--- a/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.spec.ts
+++ b/src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.spec.ts
@@ -3,23 +3,23 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CourseDetailsDialogComponent } from './course-details-dialog.component';
describe('CourseDetailsDialogComponent', () => {
- let component: CourseDetailsDialogComponent;
- let fixture: ComponentFixture<CourseDetailsDialogComponent>;
+let component: CourseDetailsDialogComponent;
+ let fixture: ComponentFixture<CourseDetailsDialogComponent>;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ CourseDetailsDialogComponent ]
- })
- .compileComponents();
- }));
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ CourseDetailsDialogComponent ]
+ })
+ .compileComponents();
+ }));
- beforeEach(() => {
- fixture = TestBed.createComponent(CourseDetailsDialogComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CourseDetailsDialogComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/src/app/degree-planner/favorites-container/favorites-container.component.scss b/src/app/degree-planner/favorites-container/favorites-container.component.scss
index 12c9f1f..2eb0c62 100644
--- a/src/app/degree-planner/favorites-container/favorites-container.component.scss
+++ b/src/app/degree-planner/favorites-container/favorites-container.component.scss
@@ -13,8 +13,8 @@
right: 0;
bottom: 0;
left: 0;
- background-color: rgb(241, 241, 241);
- border: dashed 3px #2879A8;
+ background-color:white;
+ border: dashed 2px #2879A8;
color: #2879A8;
font-weight: bold;
text-transform: uppercase;
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.scss b/src/app/degree-planner/shared/course-item/course-item.component.scss
index b816d57..963e095 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.scss
+++ b/src/app/degree-planner/shared/course-item/course-item.component.scss
@@ -2,21 +2,22 @@
position: relative;
display: block;
width: 100%;
- padding: 10px;
+ padding: 8px;
box-sizing: border-box;
- border: solid 1px white;
- background-color: white;
+ border: solid 1px #FDFDFD;
+ background-color: #FDFDFD;
border-radius: 5px;
font-family: "Helvetica Neue", Georgia, Helvetica, Arial, sans-serif;
font-size: 14px;
- margin-bottom: 10px;
+ margin-bottom: 8px;
+ box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
transition: border-color .25s ease, box-shadow .25s ease;
cursor: pointer;
&:hover {
border-color: #0679A8;
- box-shadow: 0 1px 5px 1px rgba(0, 0, 0, .25)
+ box-shadow: 0 1px 5px 1px rgba(0, 0, 0, .25);
}
&.disabled {
@@ -51,10 +52,6 @@
display: inline-block;
}
-.course-info {
- margin-bottom: 5px;
-}
-
.course-number {
font-weight: bold;
font-size: 16px;
diff --git a/src/app/degree-planner/term-container/term-container.component.html b/src/app/degree-planner/term-container/term-container.component.html
index 211d4d3..d242ab6 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -1,24 +1,36 @@
<mat-card class="term-container">
- <div fxLayout="row" fxLayoutAlign="space-between stretch">
- <h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold credits">{{getTotalCredits()}} Credits</p>
- </div>
- <div
- cdkDropList
- id="term-{{term.termCode}}"
- [cdkDropListData]="courses"
- [cdkDropListConnectedTo]="termCodes"
- class="course-list"
- (cdkDropListDropped)="drop($event)">
- <div class="course-wrapper" [cdkDragData]="course" *ngFor="let course of courses" cdkDrag>
- <div class="course-wrapper-inner">
- <cse-course-item
- [course]="course"
+ <div class="term-inner">
+ <div fxLayout="row" class="term-header" fxLayoutAlign="space-between center">
+ <h2>{{ term.termCode | getTermDescription }}</h2>
+ <div fxLayout="row" fxLayoutAlign="end center">
+ <p class="text-right semi-bold credits">{{getTotalCredits()}} Cr</p>
+ <button mat-icon-button>
+ <mat-icon aria-label="Term notes">insert_drive_file</mat-icon>
+ </button>
+ </div>
+ </div>
+ <div
+ cdkDropList
+ id="term-{{term.termCode}}"
+ [cdkDropListData]="courses"
+ [cdkDropListConnectedTo]="termCodes"
+ class="course-list"
+ (cdkDropListDropped)="drop($event)">
+ <div class="course-wrapper" [cdkDragData]="course" *ngFor="let course of courses" cdkDrag>
+ <div class="course-wrapper-inner">
+ <cse-course-item
+ [course]="course"
+ (click)="openCourseDetailsDialog(course)"
[status]="'in-progress'"
[subject]="subjectsMap[course.subjectCode]"
- (click)="openCourseDetailsDialog(course)"
- ></cse-course-item>
+ ></cse-course-item>
+ </div>
</div>
+ <p *ngIf="!courses || courses.length === 0" class="no-courses text-center semi-bold">No Courses Taken</p>
</div>
- <p *ngIf="!courses || courses.length === 0" class="no-courses text-center semi-bold">No Courses Taken</p>
+ </div>
+
+ <div class="add-new-wrapper">
+ <button mat-raised-button>+ Add Course</button>
</div>
</mat-card>
\ No newline at end of file
diff --git a/src/app/degree-planner/term-container/term-container.component.scss b/src/app/degree-planner/term-container/term-container.component.scss
index 1de9d3d..6b08649 100644
--- a/src/app/degree-planner/term-container/term-container.component.scss
+++ b/src/app/degree-planner/term-container/term-container.component.scss
@@ -1,15 +1,38 @@
.term-container {
- background-color: #E1E1E1;
+ background-color: #EEF1F3;
+ padding: 0;
+}
+
+.term-inner {
+ padding: 4px 8px 4px 8px;
+}
+
+.term-header {
+ margin: 0;
+
+ h2 {
+ margin: 0;
+ }
+
+ .mat-icon-button {
+ line-height: 20px;
+ margin-left: 5px;
+ color: #2879A8;
+ }
}
.term-container h2 {
- color: #2879A8;
+ color: #494949;
font-weight: 400;
+ font-size: 18px;
}
-.credits,
-.term-container h2 {
- margin: 0 0 20px 0;
+.credits {
+ display: flex;
+ // justify-content: flex-end;
+ align-items: center;
+ font-size: 14px;
+ font-weight: 400;
}
.cdk-drop-list-dragging {
@@ -21,8 +44,8 @@
right: 0;
bottom: 0;
left: 0;
- background-color: #C7CACB;
- border: dashed 3px #2879A8;
+ background-color: #EEF1F3;
+ border: dashed 2px #2879A8;
color: #2879A8;
font-weight: bold;
text-transform: uppercase;
@@ -31,4 +54,15 @@
align-items: center;
justify-content: center;
}
+}
+
+.add-new-wrapper {
+ border-top: solid #E0E4E7 1px;
+ padding: 8px;
+
+ button {
+ width: 100%;
+ box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
+ color: #2879A8;
+ }
}
\ No newline at end of file
--
GitLab