Skip to content
Snippets Groups Projects
Commit 859eba19 authored by pnogal's avatar pnogal
Browse files

Create sidenav with DG Menu and Course Key section

parent 2112ac23
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 247 additions and 40 deletions
src/app/degree-planner/degree-planner.component.html
+ 60
− 31
View file @ 859eba19
......@@ -10,35 +10,64 @@
</div>
<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
<mat-accordion>
<mat-expansion-panel class="year-container" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
Past: 2017-2018
</mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
<mat-card class="term-container" fxFlex="33%">
<div fxLayout="row" fxLayoutAlign="space-between stretch">
<h2>Fall 2017</h2><p class="text-right semi-bold">14 Credits</p>
</div>
<div style="background-color: #fff">
<app-term-container></app-term-container>
</div>
</mat-card>
<mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
<div fxLayout="row" fxLayoutAlign="space-between stretch">
<h2>Spring 2018</h2><p class="text-right semi-bold">14 Credits</p>
</div>
<div style="background-color: #fff">Courses go here....</div>
</mat-card>
<mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
<div fxLayout="row" fxLayoutAlign="space-between stretch">
<h2>Summer 2018</h2><p class="text-right semi-bold">14 Credits</p>
</div>
<div style="background-color: #fff">Courses go here....</div>
</mat-card>
<mat-sidenav-container id="plans-container">
<mat-sidenav #sidenav position="end" mode="side" [fixedTopGap]="500" opened disableClose>
<app-sidenav-menu-item></app-sidenav-menu-item>
</mat-sidenav>
<mat-sidenav-content>
<div fxLayout="row" fxLayout.sm="column" fxLayoutGap="20px" fxLayoutAlign="space-between center" style="margin: 24px 0px 24px 24px;">
<div fxFlex="70">
<mat-form-field>
<mat-select placeholder="Degree Plans" [disableOptionCentering]=true [value]="selectedDegreePlan">
<mat-option *ngFor="let degreePlan of degreePlans" [value]="degreePlan.roadmapId">
{{degreePlan.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
\ No newline at end of file
<div fxFlex="20"><button mat-button class="btn-primary">Check Plan (DARS)</button></div>
<div fxFlex><button id="menu-toggle-btn" mat-button (click)="sidenav.toggle()">
<i *ngIf="sidenav.opened" class="material-icons">chevron_right</i>
<i *ngIf="!sidenav.opened" class="material-icons">chevron_left</i>
</button></div>
</div>
<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
<mat-accordion>
<mat-expansion-panel class="year-container" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
Past: 2017-2018
</mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
<mat-card class="term-container" fxFlex="33%">
<div fxLayout="row" fxLayoutAlign="space-between stretch">
<h2>Fall 2017</h2><p class="text-right semi-bold">14 Credits</p>
</div>
<div style="background-color: #fff">
<app-term-container></app-term-container>
</div>
</mat-card>
<mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
<div fxLayout="row" fxLayoutAlign="space-between stretch">
<h2>Spring 2018</h2><p class="text-right semi-bold">14 Credits</p>
</div>
<div style="background-color: #fff">Courses go here....</div>
</mat-card>
<mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
<div fxLayout="row" fxLayoutAlign="space-between stretch">
<h2>Summer 2018</h2><p class="text-right semi-bold">14 Credits</p>
</div>
<div style="background-color: #fff">Courses go here....</div>
</mat-card>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
src/app/degree-planner/degree-planner.component.scss
+ 13
− 0
View file @ 859eba19
#plans-container {
height: 100vh;
}
mat-sidenav {
width: 280px;
}
.term-container {
background-color: #E1E1E1;
......@@ -6,4 +13,10 @@
.term-container h2 {
color: #2879A8;
font-weight: 400;
}
#menu-toggle-btn {
border-radius: 50% 0 0 50%;
padding: 8px;
background-color: #F0F0F0;
}
\ No newline at end of file
src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html 0 → 100644
+ 35
− 0
View file @ 859eba19
<div id="sidenav-container" fxLayout="column" fxLayout.sm="column">
<mat-expansion-panel id="menu-items-container" expanded="true">
<mat-expansion-panel-header>
<mat-panel-title>
<h3>Menu</h3>
</mat-panel-title>
</mat-expansion-panel-header>
<div>
<button mat-button class="sidenav-link-btn"><i class="material-icons">add_box</i> Add Degree Plan</button>
<button mat-button class="sidenav-link-btn"><i class="material-icons">note_add </i>Add Note</button>
<button mat-button class="sidenav-link-btn"><i class="material-icons">email</i> Share Plan</button>
<button mat-button class="sidenav-link-btn"><i class="material-icons">print</i>Print</button>
<button mat-button class="sidenav-link-btn"><i class="material-icons">settings</i> Plan Settings</button>
</div>
</mat-expansion-panel>
<mat-expansion-panel id="course-keys-container" expanded="true">
<mat-expansion-panel-header>
<mat-panel-title>
<h3>Course Key</h3>
</mat-panel-title>
</mat-expansion-panel-header>
<ul id="course-key-list">
<li><i class="material-icons complete-icon">check_circle</i> Course is complete</li>
<li><i class="material-icons in-progress-icon">check_circle</i> Course is currently in progress</li>
<li><i class="material-icons problem-icon">report_problem</i> Course is waitlisted</li>
<li><i class="material-icons error-icon">error</i> Course is incomplete</li>
<li><i class="material-icons help-icon">help</i> Course is likely to be offered based on course history</li>
<li><span class="not-offered">&#x2015;</span>Course no longer offered</li>
<li><i class="material-icons favorite-icon">favorite_border</i> Course is a favorite</li>
</ul>
</mat-expansion-panel>
</div>
\ No newline at end of file
src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.scss 0 → 100644
+ 58
− 0
View file @ 859eba19
@import '~@angular/material/theming';
@import '~src/assets/material-theme.scss';
#sidenav-container {
height: 100vh;
.mat-expansion-panel {
border-radius: 0px;
}
h3 {
font-weight: 400;
}
}
#menu-items-container {
div {
border-top: 1px solid rgba(0, 0, 0, 0.54);
padding-top: 20px;
}
}
.sidenav-link-btn {
width: 90%;
text-align: left;
border: 1px solid #b7b7b7;
border-radius: 4px;
padding: 1px 10px;
text-transform: uppercase;
color: map-get($uw-primary, 500);
font-weight: 500;
margin-bottom: 6px !important;
.material-icons {
padding-right: 8px;
}
}
#course-key-list {
list-style-type: none;
padding: 20px 0 0px 0;
margin-top: 0px;
border-top: 1px solid rgba(0, 0, 0, 0.54);
li {
font-size: 14px;
padding-bottom: 12px;
position: relative;
padding-left: 2.6em;
.material-icons, .not-offered {
font-size: 15px;
position: absolute;
left: 6px;
top: 2px;
}
}
}
.not-offered {
top: 0 !important;
}
\ No newline at end of file
src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.spec.ts 0 → 100644
+ 25
− 0
View file @ 859eba19
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SidenavMenuItemComponent } from './sidenav-menu-item.component';
describe('SidenavMenuItemComponent', () => {
let component: SidenavMenuItemComponent;
let fixture: ComponentFixture<SidenavMenuItemComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SidenavMenuItemComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SidenavMenuItemComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.ts 0 → 100644
+ 16
− 0
View file @ 859eba19
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sidenav-menu-item',
templateUrl: './sidenav-menu-item.component.html',
styleUrls: ['./sidenav-menu-item.component.scss']
})
export class SidenavMenuItemComponent implements OnInit {
events: string[] = [];
opened: boolean;
constructor() { }
ngOnInit() {
}
}
src/app/shared/shared.module.ts
+ 8
− 3
View file @ 859eba19
......@@ -10,8 +10,10 @@ import {
MatExpansionModule,
MatCardModule,
MatSelectModule } from '@angular/material';
import { MatSidenavModule } from '@angular/material/sidenav';
import { TermContainerComponent } from '../degree-planner/term-container/term-container.component';
import { SidenavMenuItemComponent } from '../degree-planner/sidenav-menu-item/sidenav-menu-item.component';
const modules = [
CommonModule,
......@@ -24,12 +26,15 @@ const modules = [
MatExpansionModule,
MatCardModule,
MatSelectModule,
FlexLayoutModule
FlexLayoutModule,
MatSidenavModule
];
@NgModule({
imports: [ modules ],
exports: [ modules ],
declarations: [ ],
exports: [ modules, TermContainerComponent, SidenavMenuItemComponent ],
declarations: [
TermContainerComponent, SidenavMenuItemComponent
],
})
export class SharedModule { }
src/assets/material-theme.scss
+ 0
− 6
View file @ 859eba19
......@@ -113,9 +113,3 @@ $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
button {
text-transform: uppercase;
}
.btn-primary {
background-color: map-get($uw-primary, 500);
color: #fff;
font-weight: 400;
}
\ No newline at end of file
src/assets/sass/general.scss
+ 32
− 0
View file @ 859eba19
@import '~src/assets/material-theme.scss';
body {
background-color: #ccc;
margin: 0px;
......@@ -9,4 +11,34 @@ body {
.semi-bold {
font-weight: 700;
}
.btn-primary {
background-color: map-get($uw-primary, 500);
color: #fff;
font-weight: 400;
}
.complete-icon{
color: #457A3B;
}
.in-progress-icon {
color: #9CBA99;
}
.problem-icon {
color: #F7C376;
}
.error-icon {
color: map-get($uw-accent, 600);
}
.help-icon {
color: map-get($uw-primary, 500);
}
.favorite-icon {
color: map-get($uw-accent, 600);
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment