From 2a82f66ea0164387b42b378c4148057870f2b0f4 Mon Sep 17 00:00:00 2001
From: "jvanboxtel@wisc.edu" <jvanboxtel@wisc.edu>
Date: Fri, 8 Feb 2019 08:23:46 -0600
Subject: [PATCH] ROENROLL-1250
---
.../degree-planner.component.html | 8 +-
.../degree-planner.component.ts | 25 +++
.../degree-planner/degree-planner.module.ts | 35 ++--
.../modify-plan-dialog.component.html | 53 +++++
.../modify-plan-dialog.component.ts | 29 +++
.../term-container.component.html | 2 +-
.../term-container.component.scss | 162 +++++++--------
src/assets/material-theme.scss | 190 +++++++++---------
src/assets/sass/general.scss | 157 ++++++++-------
9 files changed, 391 insertions(+), 270 deletions(-)
create mode 100644 src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html
create mode 100644 src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.ts
diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index b361933..87796ef 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -32,8 +32,12 @@
<mat-icon>settings</mat-icon>
</button>
<mat-menu #degreePlanMenu="matMenu">
- <button mat-menu-item (click)="onRenamePlanClick()">Rename plan</button>
- <button mat-menu-item (click)="onPrintPlanClick()">Print plan</button>
+ <button mat-menu-item (click)="onCreatePlanClick()">Create new plan</button>
+ <button mat-menu-item (click)="onRenamePlanClick()">Rename plan</button>
+ <button mat-menu-item (click)="onDeletePlanClick()">Delete plan</button>
+ <button mat-menu-item (click)="onMakePrimayClick()">Make primary</button>
+ <hr>
+ <button mat-menu-item (click)="onPrintPlanClick()">Print plan</button>
<button mat-menu-item (click)="onSharePlanClick()">Share plan</button>
</mat-menu>
</div>
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts
index 8a8b8da..7ed5ebc 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner.component.ts
@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
import { select } from '@ngrx/store';
import { Component } from '@angular/core';
import { MatSelectChange } from '@angular/material';
+import { MatDialog } from '@angular/material';
import { Store } from '@ngrx/store';
import { MediaMatcher } from '@angular/cdk/layout';
@@ -24,6 +25,8 @@ import {
// Actions
import { ChangeVisiblePlanRequest } from '@app/degree-planner/store/actions/plan.actions';
+import { ModifyPlanDialogComponent } from './dialogs/modify-plan-dialog/modify-plan-dialog.component';
+
@Component({
selector: 'cse-degree-planner',
templateUrl: './degree-planner.component.html',
@@ -43,6 +46,7 @@ export class DegreePlannerComponent implements OnInit {
constructor(
private store: Store<GlobalState>,
public mediaMatcher: MediaMatcher,
+ public dialog: MatDialog,
) {
this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
}
@@ -63,9 +67,30 @@ export class DegreePlannerComponent implements OnInit {
}
}
+ public onCreatePlanClick() {
+ // TODO
+ console.log('onCreatePlanClick');
+ const data = {};
+ this.dialog.open(ModifyPlanDialogComponent, { data });
+ }
+
public onRenamePlanClick() {
// TODO
console.log('onRenamePlanClick');
+ const data = {};
+ this.dialog.open(ModifyPlanDialogComponent, { data });
+ }
+
+ public onMakePrimayClick() {
+ // TODO
+ // open confirm dialog
+ console.log('onMakePrimaryClick');
+ }
+
+ public onDeletePlanClick() {
+ // TODO
+ // open confirm dialog
+ console.log('onDeletePlanClick');
}
public onPrintPlanClick() {
diff --git a/src/app/degree-planner/degree-planner.module.ts b/src/app/degree-planner/degree-planner.module.ts
index 12364b4..26ae053 100644
--- a/src/app/degree-planner/degree-planner.module.ts
+++ b/src/app/degree-planner/degree-planner.module.ts
@@ -7,27 +7,28 @@ import { TermContainerComponent } from './term-container/term-container.componen
import { SidenavMenuItemComponent } from './sidenav-menu-item/sidenav-menu-item.component';
import { SavedForLaterContainerComponent } from './favorites-container/favorites-container.component';
import { CourseItemComponent } from './shared/course-item/course-item.component';
-import { CourseDetailsDialogComponent } from './dialogs/course-details-dialog/course-details-dialog.component';
import { NotesDialogComponent } from './dialogs/notes-dialog/notes-dialog.component';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { RemoveCourseConfirmDialogComponent } from './dialogs/remove-course-confirm-dialog/remove-course-confirm-dialog.component';
+import { ModifyPlanDialogComponent } from './dialogs/modify-plan-dialog/modify-plan-dialog.component';
@NgModule({
- imports: [SharedModule, DragDropModule, DegreePlannerRoutingModule],
- exports: [DragDropModule],
- declarations: [
- DegreePlannerComponent,
- TermContainerComponent,
- CourseItemComponent,
- SidenavMenuItemComponent,
- SavedForLaterContainerComponent,
- NotesDialogComponent,
- RemoveCourseConfirmDialogComponent
- ],
- entryComponents: [
- CourseDetailsDialogComponent,
- NotesDialogComponent,
- RemoveCourseConfirmDialogComponent
- ]
+ imports: [SharedModule, DragDropModule, DegreePlannerRoutingModule],
+ exports: [DragDropModule],
+ declarations: [
+ DegreePlannerComponent,
+ TermContainerComponent,
+ CourseItemComponent,
+ SidenavMenuItemComponent,
+ SavedForLaterContainerComponent,
+ NotesDialogComponent,
+ RemoveCourseConfirmDialogComponent,
+ ModifyPlanDialogComponent,
+ ],
+ entryComponents: [
+ NotesDialogComponent,
+ RemoveCourseConfirmDialogComponent,
+ ModifyPlanDialogComponent,
+ ],
})
export class DegreePlannerModule {}
diff --git a/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html b/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html
new file mode 100644
index 0000000..69d7213
--- /dev/null
+++ b/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html
@@ -0,0 +1,53 @@
+<style>
+ .form-field-stretch {
+ padding-top: 20px;
+ width: 100%;
+ }
+</style>
+
+<mat-toolbar color="primary" class="dialog-toolbar">
+ <span class="dialog-toolbar-title">Modify Plan</span>
+ <button mat-button mat-dialog-close class="close-btn">
+ <i class="material-icons">clear</i>
+ </button>
+</mat-toolbar>
+
+<mat-dialog-content class="mat-typography dialog-with-toolbar">
+ <div class="create-plan-content" *ngIf="true">
+ <mat-dialog-content [formGroup]="form">
+ <mat-form-field class="form-field-stretch">
+ <input matInput placeholder="Name" formControlName="planName">
+ </mat-form-field>
+ </mat-dialog-content>
+ </div>
+
+ <div class="rename-plan-content" *ngIf="false">
+ <mat-dialog-content [formGroup]="form">
+ <mat-form-field class="form-field-stretch">
+ <input matInput placeholder="Name" formControlName="planName">
+ </mat-form-field>
+ </mat-dialog-content>
+ </div>
+
+ <div class="delete-plan-content" *ngIf="false">
+ <mat-dialog-content [formGroup]="form">
+ <mat-form-field>
+ <input matInput placeholder="Name" formControlName="planName">
+ </mat-form-field>
+ </mat-dialog-content>
+ </div>
+
+ <div class="make-plan-primary-content" *ngIf="false">
+ <mat-dialog-content [formGroup]="form">
+ <mat-form-field>
+ <input matInput placeholder="Name" formControlName="planName">
+ </mat-form-field>
+ </mat-dialog-content>
+ </div>
+
+ <mat-dialog-actions align="end">
+ <button mat-button class="btn-secondary" mat-dialog-close aria-label="Close note dialog"> Cancel </button>
+ <button mat-raised-button class="btn-primary mat-button" (click)="createPlanSave()" *ngIf="false">Save</button>
+ <button mat-raised-button class="btn-primary mat-button" (click)="renamePlanSave()">Save</button>
+ </mat-dialog-actions>
+</mat-dialog-content>
\ No newline at end of file
diff --git a/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.ts b/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.ts
new file mode 100644
index 0000000..c863905
--- /dev/null
+++ b/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.ts
@@ -0,0 +1,29 @@
+import { FormGroup, FormControl } from '@angular/forms';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'cse-course-details-dialog',
+ templateUrl: './modify-plan-dialog.component.html',
+})
+export class ModifyPlanDialogComponent implements OnInit {
+ public form: FormGroup;
+
+ constructor() {
+ this.form = new FormGroup({
+ planName: new FormControl(),
+ });
+ }
+
+ ngOnInit() {}
+
+ renamePlanSave() {
+ console.log('PUT /degreePlan/<planId> { primary: <bool>, name: <string> }');
+ }
+ makePlanPrimarySave() {
+ // Open confirm dialog
+ console.log('PUT /degreePlan/<planId> { primary: true, name: <string> }');
+ }
+ createPlanSave() {
+ console.log('POST /degreePlan { primary: <bool>, name: <string> }');
+ }
+}
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 4461021..da66fcf 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -58,6 +58,6 @@
</div>
</div>
<div class="add-new-wrapper" *ngIf="isActiveTerm$ | async">
- <button mat-raised-button (click)="openAddSidenav()">+ Add Course</button>
+ <button mat-raised-button (click)="openAddSidenav()" class="add-course-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 618434d..61593de 100644
--- a/src/app/degree-planner/term-container/term-container.component.scss
+++ b/src/app/degree-planner/term-container/term-container.component.scss
@@ -1,111 +1,115 @@
@import 'assets/material-theme.scss';
.term-container {
- background-color: #EEF1F3;
- padding: 0;
+ background-color: #eef1f3;
+ padding: 0;
+}
+
+.add-course-button {
+ text-transform: uppercase;
}
.term-inner {
- padding: 4px 8px 4px 8px;
+ padding: 4px 8px 4px 8px;
}
.term-header {
- margin: 0;
+ margin: 0;
- h2 {
- margin: 0;
- }
+ h2 {
+ margin: 0;
+ }
- .mat-icon-button {
- line-height: 20px;
- margin-left: 5px;
- color: #2879A8;
- }
+ .mat-icon-button {
+ line-height: 20px;
+ margin-left: 5px;
+ color: #2879a8;
+ }
}
.term-container h2 {
- color: #494949;
- font-weight: 400;
- font-size: 18px;
+ color: #494949;
+ font-weight: 400;
+ font-size: 18px;
}
.credits {
- display: flex;
- // justify-content: flex-end;
- align-items: center;
- font-size: 14px;
- font-weight: 400;
+ display: flex;
+ // justify-content: flex-end;
+ align-items: center;
+ font-size: 14px;
+ font-weight: 400;
}
.cdk-drop-list-dragging {
- position: relative;
- &:after {
- content: 'Add course to term';
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: #EEF1F3;
- border: dashed 2px #2879A8;
- color: #2879A8;
- font-weight: bold;
- text-transform: uppercase;
- border-radius: 5px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
+ position: relative;
+ &:after {
+ content: 'Add course to term';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: #eef1f3;
+ border: dashed 2px #2879a8;
+ color: #2879a8;
+ font-weight: bold;
+ text-transform: uppercase;
+ border-radius: 5px;
+ display: flex;
+ 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;
- }
+ border-top: solid #e0e4e7 1px;
+ padding: 8px;
+
+ button {
+ width: 100%;
+ box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+ color: #2879a8;
+ }
}
.add-note-icon {
- color: map-get($uw-primary, 500);
+ color: map-get($uw-primary, 500);
}
.note-item {
- position: relative;
- display: block;
- width: 100%;
- padding: 10px;
- box-sizing: border-box;
- border: solid 1px white;
- background-color: white;
- border-radius: 5px;
- font-family: "Helvetica Neue", Georgia, Helvetica, Arial, sans-serif;
- font-size: 14px;
- margin-bottom: 10px;
-
- &:hover {
- cursor: pointer;
- border-color: #0679A8;
- box-shadow: 0 1px 5px 1px rgba(0, 0, 0, .25)
- }
-
- p {
- margin: 0;
- padding: 0;
- }
- .note-excerpt {
- height: 32px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
+ position: relative;
+ display: block;
+ width: 100%;
+ padding: 10px;
+ box-sizing: border-box;
+ border: solid 1px white;
+ background-color: white;
+ border-radius: 5px;
+ font-family: 'Helvetica Neue', Georgia, Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ margin-bottom: 10px;
+
+ &:hover {
+ cursor: pointer;
+ border-color: #0679a8;
+ box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.25);
+ }
+
+ p {
+ margin: 0;
+ padding: 0;
+ }
+ .note-excerpt {
+ height: 32px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
}
.no-courses {
- text-align: center;
- padding: 25px 0;
- font-weight: bold;
-}
\ No newline at end of file
+ text-align: center;
+ padding: 25px 0;
+ font-weight: bold;
+}
diff --git a/src/assets/material-theme.scss b/src/assets/material-theme.scss
index 2318b36..496dcc5 100644
--- a/src/assets/material-theme.scss
+++ b/src/assets/material-theme.scss
@@ -1,115 +1,117 @@
@import '~@angular/material/theming';
$uw-accent: (
- 50 : #f8e1e2,
- 100 : #eeb4b6,
- 200 : #e28286,
- 300 : #d65055,
- 400 : #ce2b30,
- 500 : #c5050c,
- 600 : #bf040a,
- 700 : #b80408,
- 800 : #b00306,
- 900 : #a30103,
- A100 : #ffcece,
- A200 : #ff9b9b,
- A400 : #ff6868,
- A700 : #ff4e4e,
- contrast: (
- 50 : #000000,
- 100 : #000000,
- 200 : #000000,
- 300 : #ffffff,
- 400 : #ffffff,
- 500 : #ffffff,
- 600 : #ffffff,
- 700 : #ffffff,
- 800 : #ffffff,
- 900 : #ffffff,
- A100 : #000000,
- A200 : #000000,
- A400 : #000000,
- A700 : #000000,
- )
+ 50: #f8e1e2,
+ 100: #eeb4b6,
+ 200: #e28286,
+ 300: #d65055,
+ 400: #ce2b30,
+ 500: #c5050c,
+ 600: #bf040a,
+ 700: #b80408,
+ 800: #b00306,
+ 900: #a30103,
+ A100: #ffcece,
+ A200: #ff9b9b,
+ A400: #ff6868,
+ A700: #ff4e4e,
+ contrast: (
+ 50: #000000,
+ 100: #000000,
+ 200: #000000,
+ 300: #ffffff,
+ 400: #ffffff,
+ 500: #ffffff,
+ 600: #ffffff,
+ 700: #ffffff,
+ 800: #ffffff,
+ 900: #ffffff,
+ A100: #000000,
+ A200: #000000,
+ A400: #000000,
+ A700: #000000,
+ ),
);
$uw-primary: (
- 50 : #e1eff5,
- 100 : #b4d7e5,
- 200 : #82bcd4,
- 300 : #4fa1c2,
- 400 : #2a8db5,
- 500 : #0479a8,
- 600 : #0371a0,
- 700 : #036697,
- 800 : #025c8d,
- 900 : #01497d,
- A100 : #aad6ff,
- A200 : #77bdff,
- A400 : #44a5ff,
- A700 : #2a99ff,
- contrast: (
- 50 : #000000,
- 100 : #000000,
- 200 : #000000,
- 300 : #000000,
- 400 : #ffffff,
- 500 : #ffffff,
- 600 : #ffffff,
- 700 : #ffffff,
- 800 : #ffffff,
- 900 : #ffffff,
- A100 : #000000,
- A200 : #000000,
- A400 : #000000,
- A700 : #000000,
- )
+ 50: #e1eff5,
+ 100: #b4d7e5,
+ 200: #82bcd4,
+ 300: #4fa1c2,
+ 400: #2a8db5,
+ 500: #0479a8,
+ 600: #0371a0,
+ 700: #036697,
+ 800: #025c8d,
+ 900: #01497d,
+ A100: #aad6ff,
+ A200: #77bdff,
+ A400: #44a5ff,
+ A700: #2a99ff,
+ contrast: (
+ 50: #000000,
+ 100: #000000,
+ 200: #000000,
+ 300: #000000,
+ 400: #ffffff,
+ 500: #ffffff,
+ 600: #ffffff,
+ 700: #ffffff,
+ 800: #ffffff,
+ 900: #ffffff,
+ A100: #000000,
+ A200: #000000,
+ A400: #000000,
+ A700: #000000,
+ ),
);
$uw-warn: (
- 50 : #fff0e0,
- 100 : #ffd9b3,
- 200 : #ffc080,
- 300 : #ffa64d,
- 400 : #ff9326,
- 500 : #ff8000,
- 600 : #ff7800,
- 700 : #ff6d00,
- 800 : #ff6300,
- 900 : #ff5000,
- A100 : #ffffff,
- A200 : #fff5f2,
- A400 : #ffcfbf,
- A700 : #ffbca6,
- contrast: (
- 50 : #000000,
- 100 : #000000,
- 200 : #000000,
- 300 : #000000,
- 400 : #000000,
- 500 : #000000,
- 600 : #000000,
- 700 : #000000,
- 800 : #000000,
- 900 : #ffffff,
- A100 : #000000,
- A200 : #000000,
- A400 : #000000,
- A700 : #000000,
- )
+ 50: #fff0e0,
+ 100: #ffd9b3,
+ 200: #ffc080,
+ 300: #ffa64d,
+ 400: #ff9326,
+ 500: #ff8000,
+ 600: #ff7800,
+ 700: #ff6d00,
+ 800: #ff6300,
+ 900: #ff5000,
+ A100: #ffffff,
+ A200: #fff5f2,
+ A400: #ffcfbf,
+ A700: #ffbca6,
+ contrast: (
+ 50: #000000,
+ 100: #000000,
+ 200: #000000,
+ 300: #000000,
+ 400: #000000,
+ 500: #000000,
+ 600: #000000,
+ 700: #000000,
+ 800: #000000,
+ 900: #ffffff,
+ A100: #000000,
+ A200: #000000,
+ A400: #000000,
+ A700: #000000,
+ ),
);
-$custom-typography: mat-typography-config($font-family: '"Helvetica Neue", Georgia, Helvetica, Arial, sans-serif');
+$custom-typography: mat-typography-config(
+ $font-family: '"Helvetica Neue", Georgia, Helvetica, Arial, sans-serif',
+);
@include mat-core($custom-typography);
$my-app-primary: mat-palette($uw-primary);
-$my-app-accent: mat-palette($uw-accent);
-$my-app-warn: mat-palette($uw-warn);
+$my-app-accent: mat-palette($uw-accent);
+$my-app-warn: mat-palette($uw-warn);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
// Since we're not using uw-style for buttons we need to add a few styles to mirror its appearance.
button {
- text-transform: uppercase;
+ // text-transform: uppercase;
}
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index 3e9ccb7..308fbf5 100644
--- a/src/assets/sass/general.scss
+++ b/src/assets/sass/general.scss
@@ -1,76 +1,78 @@
@import 'assets/material-theme.scss';
body {
- background-color: #ccc;
- margin: 0px;
+ background-color: #ccc;
+ margin: 0px;
}
.text-right {
- text-align: right;
+ text-align: right;
}
.text-left {
- text-align: left;
+ text-align: left;
}
.text-center {
- text-align: center;
+ text-align: center;
}
.semi-bold {
- font-weight: 700;
+ font-weight: 700;
}
.btn-primary[disabled] {
- color: rgba(0,0,0,.26) !important;
- background-color: rgba(0,0,0,.12) !important;
+ color: rgba(0, 0, 0, 0.26) !important;
+ background-color: rgba(0, 0, 0, 0.12) !important;
}
-.btn-primary, .btn-secondary, .btn-delete {
- min-width: 100px !important;
- font-weight: 400 !important;
- letter-spacing: 1px;
- font-size: 14px;
+.btn-primary,
+.btn-secondary,
+.btn-delete {
+ min-width: 100px !important;
+ font-weight: 400 !important;
+ letter-spacing: 1px;
+ font-size: 14px;
}
.btn-primary {
- background-color: #0479a8 !important;
- color: white !important;
+ background-color: #0479a8 !important;
+ color: white !important;
}
.btn-secondary {
- color: map-get($uw-primary, 500) !important;
- border: 1px solid #b7b7b7 !important;
- border-radius: 4px !important;
+ color: map-get($uw-primary, 500) !important;
+ border: 1px solid #b7b7b7 !important;
+ border-radius: 4px !important;
}
.btn-link {
- color: map-get($uw-primary, 500) !important;
+ color: map-get($uw-primary, 500) !important;
}
.btn-delete {
- background-color: #b5261e;
- color: white;
+ background-color: #b5261e;
+ color: white;
}
.complete-icon {
- color: #457A3B;
+ color: #457a3b;
}
.in-progress-icon {
- color: #9CBA99;
+ color: #9cba99;
}
.problem-icon {
- color: #F7C376;
+ color: #f7c376;
}
.error-icon {
- color: map-get($uw-accent, 600);
+ color: map-get($uw-accent, 600);
}
.help-icon {
- color: map-get($uw-primary, 500);
+ color: map-get($uw-primary, 500);
}
.complete-icon,
@@ -79,49 +81,49 @@ body {
.error-icon,
.help-icon,
.not-offered {
- font-size: 16px !important;
- margin-left: 5px;
- padding-top: 5px;
+ font-size: 16px !important;
+ margin-left: 5px;
+ padding-top: 5px;
}
#favoriteCourse-dropZone {
- .course-favorite {
- .course-item {
- border: 1px solid #b7b7b7;
- border-radius: 4px;
- padding: 5px 10px;
- }
+ .course-favorite {
+ .course-item {
+ border: 1px solid #b7b7b7;
+ border-radius: 4px;
+ padding: 5px 10px;
}
+ }
}
.cdk-drag-placeholder {
- position: relative;
- opacity: 0;
- height: 0;
+ position: relative;
+ opacity: 0;
+ height: 0;
}
.course-wrapper:not(.cdk-drag-preview) {
- transform: translate(0) !important;
+ transform: translate(0) !important;
}
.cdk-drag-preview {
- .course-wrapper-inner {
- transform: rotate(-3deg);
- border-radius: 5px;
- box-shadow: -3px 3px 3px 2px rgba(0, 0, 0, 0.26);
- }
+ .course-wrapper-inner {
+ transform: rotate(-3deg);
+ border-radius: 5px;
+ box-shadow: -3px 3px 3px 2px rgba(0, 0, 0, 0.26);
+ }
}
.no-courses {
- padding: 20px 10px;
+ padding: 20px 10px;
}
.list-comma::before {
- content: ', ';
+ content: ', ';
}
.list-comma:first-child::before {
- content: '';
+ content: '';
}
/*
@@ -139,61 +141,62 @@ body {
*/
.term-container-wrapper {
- display: none !important;
+ display: none !important;
}
-.mat-expanded, .ng-animating {
- .term-container-wrapper {
- display: flex !important;
- }
+.mat-expanded,
+.ng-animating {
+ .term-container-wrapper {
+ display: flex !important;
+ }
}
// Menus styles
.course-item-menu,
.mat-menu-content {
- width: 200px !important;
+ width: 200px !important;
}
.favorites-list {
- border-bottom: 1px solid #f1f1f1 !important;
+ border-bottom: 1px solid #f1f1f1 !important;
}
// Dialogs styles
.mat-dialog-container {
- min-width: 700px;
- padding: 0px !important;
- .dialog-with-toolbar {
- padding: 0 45px 25px 45px;
- margin: 0px;
- }
+ min-width: 400px;
+ padding: 0px !important;
+ .dialog-with-toolbar {
+ padding: 0 45px 25px 45px;
+ margin: 0px;
+ }
}
.dialog-toolbar {
- height: 54px !important;
- padding-right: 0px !important;
- .dialog-toolbar-title {
- flex: 1 1 auto;
- font-weight: 400;
- }
- .close-btn {
- min-height: 55px;
- }
+ height: 54px !important;
+ padding-right: 0px !important;
+ .dialog-toolbar-title {
+ flex: 1 1 auto;
+ font-weight: 400;
+ }
+ .close-btn {
+ min-height: 55px;
+ }
}
// Media queries
@media screen and (max-width: 800px) {
- .mat-dialog-container {
- min-width: 100%;
- }
+ .mat-dialog-container {
+ min-width: 100%;
+ }
}
@media screen and (max-width: 957px) {
- .mat-dialog-container {
- .dialog-with-toolbar {
- padding-top: 20px;
- }
+ .mat-dialog-container {
+ .dialog-with-toolbar {
+ padding-top: 20px;
}
-}
\ No newline at end of file
+ }
+}
--
GitLab