diff --git a/src/app/app.component.html b/src/app/app.component.html
index c9921fb3bcc483bdcda7d3be33e2764250ade7ef..a3e42dfa308393d1e7c94d738f9c41ffafebef29 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,87 +3,137 @@
<cse-navigation></cse-navigation>
</header>
<main>
- <mat-sidenav-container class="example-container" hasBackdrop="false">
- <mat-sidenav #rightAddCourse2 mode="over" position="end">
- <mat-toolbar color="primary" class="dialog-toolbar">
- <button mat-button class="close-btn" (click)="closeSidenav(rightAddCourse2)"><i class="material-icons">clear</i></button>
- <span class="dialog-toolbar-title">Add course to degree plan</span>
- </mat-toolbar>
- Course Details
- <!-- <cse-course-details></cse-course-details> -->
- </mat-sidenav>
- <mat-sidenav-content>
- <mat-sidenav-container>
- <mat-sidenav #rightAddCourse class="add-sidenav1" mode="over" position="end">
+ <mat-sidenav-container class="example-container" hasBackdrop="false" style="height: 100vh;">
+ <mat-sidenav mode="over" position="end" #rightAddCourse>
+ <mat-drawer-container>
+ <mat-drawer mode="side" position="start" #rightAddCourse2>
<mat-toolbar color="primary" class="dialog-toolbar">
- <span class="dialog-toolbar-title">Course Search</span>
- <button mat-button class="close-btn" (click)="closeSidenav(rightAddCourse)"><i class="material-icons">clear</i></button>
+ <button mat-button class="close-btn" (click)="rightAddCourse2.close()"><i class="material-icons">clear</i></button>
+ <span class="dialog-toolbar-title">Add course to degree plan</span>
</mat-toolbar>
- <div fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
- <mat-form-field>
- <mat-select placeholder="Term" required>
- <mat-option *ngFor="let term of coursesData$ | async" [value]="term">
- {{ term[0].termCode | getTermDescription }}
- </mat-option>
- <!-- <mat-option>Spring 2019</mat-option>
- <mat-option>Summer 2019</mat-option>
- <mat-option>Fall 2019</mat-option>
- <mat-option>Spring 2020</mat-option>
- <mat-option>Summer 2020</mat-option> -->
- </mat-select>
- <!-- <mat-error *ngIf="terms.hasError('required')">Please select term</mat-error> -->
- </mat-form-field>
+ <div id="course-details-content" class="mat-typography">
+ <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 start">
+ <h3>English 162<span class="course-detail-subtitle">Shakespeare</span></h3>
+ </div>
+ <div fxFlex="50" class="course-detail-title" fxLayoutAlign="end start">
+ <button mat-raised-button class="btn-primary mat-button" aria-label="Add course to plan">Add course</button>
+ </div>
+ </div>
+ </div>
+ <div>
+ <!-- <p>Introduction to several of Shakespare's most popular plays and their relation to other works of English and American literature.</p> -->
- <mat-form-field>
- <mat-select placeholder="Subject" [formControl]="" required>
- <mat-option>Afro-American Studies</mat-option>
- <mat-option>Agricultural and Applied Economics</mat-option>
- <mat-option>Agroecology</mat-option>
- <mat-option>Agronomy</mat-option>
- <mat-option>Air Force Aerospace Studies</mat-option>
- <mat-option>American Indian Studies</mat-option>
- <mat-option>Anatomy</mat-option>
- <mat-option>Anatomy & Physiology</mat-option>
- </mat-select>
- <!-- <mat-error *ngIf="terms.hasError('required')">Please select an existing subject or 'All'.</mat-error> -->
- </mat-form-field>
+ <p><span class="semi-bold">Enroll Info: </span>None</p>
+ <p><span class="semi-bold">Requisites: </span>None</p>
+ <ul class="courseDetails-list">
+ <li><span class="semi-bold">Credits:</span> 3</li>
+ <li><span class="semi-bold">Level: </span>
+ <span>Elementary</span>
+ </li>
+ <li><span class="semi-bold">Breadth: </span>
+ <span>Literature</span>
+ </li>
+ <li><span class="semi-bold">L&S Credit Type:</span>
+ Counts as LAS credit (L&S)
+ </li>
+ </ul>
+ <ul class="courseDetails-list">
+ <li><span class="semi-bold">Last Taught: </span>Fall 2018</li>
+ <li><span class="semi-bold">Typically Offered: </span>Fall, Spring, Summer</li>
+ </ul>
- <mat-form-field class="example-full-width">
- <input matInput placeholder="Subject, number" value="">
- </mat-form-field>
+ <p><span class="semi-bold">Subject Notes:</span><br>
+ <span class="subject-notes"></span></p>
</div>
- <div class="search-results-toolbar mat-typography" fxLayout="row" fxLayoutAlign="space-between center" style="padding: 12px 22px; background-color: #EDF1F3">
- <h3 style="margin: 0px;">7 of 7 results</h3>
- <span class="mat-button">Reset Search</span>
+ <div class="course-details-footer">
+ <p class="semi-bold course-detail-title">English Information:</p>
+ <div fxLayout="row">
+ <div fxLayout="row" fxFlex="100" fxLayoutGap="10px">
+ <div fxFlex="100" fxLayout.lt-sm="column" class="mat-dialog-actions" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="start start">
+ <a class="md-primary btn-link mat-button" href="">Website</a>
+ <a class="md-primary btn-link mat-button" href="">Undergraduate Info</a>
+ <a class="md-primary btn-link mat-button" href="">Graduate Info</a>
+ </div>
+ </div>
+ </div>
</div>
+ </div>
+ </mat-drawer>
+ <mat-drawer-conntent class="course-search-pane">
+ <mat-toolbar color="primary" class="dialog-toolbar">
+ <span class="dialog-toolbar-title">Course Search</span>
+ <button mat-button class="close-btn" (click)="rightAddCourse.close(); rightAddCourse2.close()"><i class="material-icons">clear</i></button>
+ </mat-toolbar>
- <div id="course-search-results" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
- <mat-form-field>
- <mat-select placeholder="Order by">
- <mat-option>Relevance</mat-option>
- <mat-option>Subject</mat-option>
- <mat-option>Catalog Number</mat-option>
- </mat-select>
- </mat-form-field>
+ <form class="add-course-form" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
+ <mat-form-field>
+ <input type="text" placeholder="Term" aria-label="Term" matInput [formControl]="" [matAutocomplete]="term">
+ <mat-autocomplete #term="matAutocomplete">
+ <mat-option *ngFor="let term of coursesData$ | async" [value]="term[0].termCode | getTermDescription">
+ {{ term[0].termCode | getTermDescription }}
+ </mat-option>
+ </mat-autocomplete>
+ </mat-form-field>
- <cse-course-item (click)="rightAddCourse2.toggle()"
- style="padding: 8px;
- border: solid 1px #FDFDFD;
- background-color: #FDFDFD;
- border-radius: 5px;
- font-family: 'Helvetica Neue', Georgia, Helvetica, Arial, sans-serif;
- font-size: 14px;
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
- cursor: pointer;">
- Chem 101
- </cse-course-item>
- </div>
- </mat-sidenav>
- <mat-sidenav-content>
- <router-outlet></router-outlet>
- </mat-sidenav-content>
- </mat-sidenav-container>
+ <mat-form-field>
+ <input type="text" placeholder="Subject" aria-label="Subject" matInput [formControl]="" [matAutocomplete]="subject">
+ <mat-autocomplete #subject="matAutocomplete">
+ <mat-option>Afro-American Studies</mat-option>
+ <mat-option>Agricultural and Applied Economics</mat-option>
+ <mat-option>Agroecology</mat-option>
+ <mat-option>Agronomy</mat-option>
+ <mat-option>Air Force Aerospace Studies</mat-option>
+ <mat-option>American Indian Studies</mat-option>
+ <mat-option>Anatomy</mat-option>
+ <mat-option>Anatomy & Physiology</mat-option>
+ </mat-autocomplete>
+ <!-- <mat-error *ngIf="terms.hasError('required')">Please select an existing subject or 'All'.</mat-error> -->
+ </mat-form-field>
+
+ <mat-form-field class="example-full-width">
+ <input matInput placeholder="Subject, number" value="">
+ </mat-form-field>
+ </form>
+
+ <div class="search-results-toolbar mat-typography" fxLayout="row" fxLayoutAlign="space-between center" style="padding: 12px 22px; background-color: #EDF1F3">
+ <h3 style="margin: 0px;">7 of 7 results</h3>
+ <span class="mat-button">Reset Search</span>
+ </div>
+
+ <div id="course-search-results" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
+ <mat-form-field>
+ <mat-select placeholder="Order by">
+ <mat-option>Relevance</mat-option>
+ <mat-option>Subject</mat-option>
+ <mat-option>Catalog Number</mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <cse-course-item (click)="rightAddCourse2.toggle()">
+ <div class="course-item">
+ <p class="course-number">ENGL 162</p>
+ <p class="course-title">Shakespeare</p>
+ </div>
+ <div class="course-item">
+ <p class="course-number">PHILOS 101</p>
+ <p class="course-title">Introduction to Philosophy</p>
+ </div>
+ <div class="course-item">
+ <p class="course-number">Math 135</p>
+ <p class="course-title">Algebraic Reasoning for Teaching Math</p>
+ </div>
+ </cse-course-item>
+ </div>
+ </mat-drawer-conntent>
+ </mat-drawer-container>
+ </mat-sidenav>
+
+ <mat-sidenav-content>
+ <router-outlet></router-outlet>
</mat-sidenav-content>
+
</mat-sidenav-container>
- </main>
+ </main>
\ No newline at end of file
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 9ac05f405b87314d62c9ae5a23cebb233c0884f0..c8384270e7cbb0dca64cb6bd38f6fb59769bcf98 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,3 +1,7 @@
+@import 'assets/material-theme.scss';
+@import 'shared/components/course-details/course-details.component.scss';
+@import 'degree-planner/shared/course-item/course-item.component.scss';
+
header {
position: absolute;
top: 0;
@@ -18,4 +22,13 @@ main {
.add-sidenav1 {
width:380px;
-}
\ No newline at end of file
+}
+
+#course-details-content {
+ padding: 0 25px 25px 25px;
+}
+
+.course-search-pane {
+ width: 340px;
+ height: 100vh;
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 83f523b88a51128a4426c1c92afabaea61418bdd..b7d80fbb6d7697610448ce103d1debaa9f1e2b18 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,29 +12,34 @@ import { CoreModule } from '@app/core/core.module';
import { SharedModule } from '@app/shared/shared.module';
import { HeaderComponent } from './core/header/header.component';
import { SidenavService } from './core/service/sidenav.service';
-import { degreePlannerReducer } from '@app/degree-planner/store/reducer';
-import { DegreePlanEffects } from '@app/degree-planner/store/effects/plan.effects';
-import { NoteEffects } from '@app/degree-planner/store/effects/note.effects';
+import { degreePlannerReducer } from '@app/degree-planner/reducer';
+import { DegreePlanEffects } from '@app/degree-planner/effects/plan.effects';
+import { NoteEffects } from '@app/degree-planner/effects/note.effects';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
@NgModule({
- imports: [
- StoreModule.forRoot({
- degreePlanner: degreePlannerReducer,
- }),
- EffectsModule.forRoot([DegreePlanEffects, NoteEffects]),
- BrowserModule,
- BrowserAnimationsModule,
- HttpClientModule,
- CoreModule,
- SharedModule,
- AppRoutingModule,
- StoreDevtoolsModule.instrument({
- maxAge: 5,
- }),
- ],
- declarations: [AppComponent, HeaderComponent],
- providers: [SidenavService],
- bootstrap: [AppComponent],
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ imports: [
+ StoreModule.forRoot({
+ degreePlanner: degreePlannerReducer
+ }),
+ EffectsModule.forRoot([DegreePlanEffects, NoteEffects]),
+ BrowserModule,
+ BrowserAnimationsModule,
+ HttpClientModule,
+ CoreModule,
+ SharedModule,
+ AppRoutingModule,
+ MatAutocompleteModule,
+ StoreDevtoolsModule.instrument({
+ maxAge: 5
+ }),
+ ],
+ declarations: [
+ AppComponent,
+ HeaderComponent
+ ],
+ providers: [ SidenavService ],
+ bootstrap: [ AppComponent ],
+ schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {}