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

ROENROLL-1250

parent 014ff3bf
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 391 additions and 270 deletions
src/app/degree-planner/degree-planner.component.html
+ 6
− 2
View file @ 2a82f66e
...@@ -32,8 +32,12 @@ ...@@ -32,8 +32,12 @@
<mat-icon>settings</mat-icon> <mat-icon>settings</mat-icon>
</button> </button>
<mat-menu #degreePlanMenu="matMenu"> <mat-menu #degreePlanMenu="matMenu">
<button mat-menu-item (click)="onRenamePlanClick()">Rename plan</button> <button mat-menu-item (click)="onCreatePlanClick()">Create new plan</button>
<button mat-menu-item (click)="onPrintPlanClick()">Print 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> <button mat-menu-item (click)="onSharePlanClick()">Share plan</button>
</mat-menu> </mat-menu>
</div> </div>
......
src/app/degree-planner/degree-planner.component.ts
+ 25
− 0
View file @ 2a82f66e
...@@ -4,6 +4,7 @@ import { Observable } from 'rxjs'; ...@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
import { select } from '@ngrx/store'; import { select } from '@ngrx/store';
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { MatSelectChange } from '@angular/material'; import { MatSelectChange } from '@angular/material';
import { MatDialog } from '@angular/material';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { MediaMatcher } from '@angular/cdk/layout'; import { MediaMatcher } from '@angular/cdk/layout';
...@@ -24,6 +25,8 @@ import { ...@@ -24,6 +25,8 @@ import {
// Actions // Actions
import { ChangeVisiblePlanRequest } from '@app/degree-planner/store/actions/plan.actions'; import { ChangeVisiblePlanRequest } from '@app/degree-planner/store/actions/plan.actions';
import { ModifyPlanDialogComponent } from './dialogs/modify-plan-dialog/modify-plan-dialog.component';
@Component({ @Component({
selector: 'cse-degree-planner', selector: 'cse-degree-planner',
templateUrl: './degree-planner.component.html', templateUrl: './degree-planner.component.html',
...@@ -43,6 +46,7 @@ export class DegreePlannerComponent implements OnInit { ...@@ -43,6 +46,7 @@ export class DegreePlannerComponent implements OnInit {
constructor( constructor(
private store: Store<GlobalState>, private store: Store<GlobalState>,
public mediaMatcher: MediaMatcher, public mediaMatcher: MediaMatcher,
public dialog: MatDialog,
) { ) {
this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)'); this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
} }
...@@ -63,9 +67,30 @@ export class DegreePlannerComponent implements OnInit { ...@@ -63,9 +67,30 @@ export class DegreePlannerComponent implements OnInit {
} }
} }
public onCreatePlanClick() {
// TODO
console.log('onCreatePlanClick');
const data = {};
this.dialog.open(ModifyPlanDialogComponent, { data });
}
public onRenamePlanClick() { public onRenamePlanClick() {
// TODO // TODO
console.log('onRenamePlanClick'); 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() { public onPrintPlanClick() {
......
src/app/degree-planner/degree-planner.module.ts
+ 18
− 17
View file @ 2a82f66e
...@@ -7,27 +7,28 @@ import { TermContainerComponent } from './term-container/term-container.componen ...@@ -7,27 +7,28 @@ import { TermContainerComponent } from './term-container/term-container.componen
import { SidenavMenuItemComponent } from './sidenav-menu-item/sidenav-menu-item.component'; import { SidenavMenuItemComponent } from './sidenav-menu-item/sidenav-menu-item.component';
import { SavedForLaterContainerComponent } from './favorites-container/favorites-container.component'; import { SavedForLaterContainerComponent } from './favorites-container/favorites-container.component';
import { CourseItemComponent } from './shared/course-item/course-item.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 { NotesDialogComponent } from './dialogs/notes-dialog/notes-dialog.component';
import { DragDropModule } from '@angular/cdk/drag-drop'; import { DragDropModule } from '@angular/cdk/drag-drop';
import { RemoveCourseConfirmDialogComponent } from './dialogs/remove-course-confirm-dialog/remove-course-confirm-dialog.component'; 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({ @NgModule({
imports: [SharedModule, DragDropModule, DegreePlannerRoutingModule], imports: [SharedModule, DragDropModule, DegreePlannerRoutingModule],
exports: [DragDropModule], exports: [DragDropModule],
declarations: [ declarations: [
DegreePlannerComponent, DegreePlannerComponent,
TermContainerComponent, TermContainerComponent,
CourseItemComponent, CourseItemComponent,
SidenavMenuItemComponent, SidenavMenuItemComponent,
SavedForLaterContainerComponent, SavedForLaterContainerComponent,
NotesDialogComponent, NotesDialogComponent,
RemoveCourseConfirmDialogComponent RemoveCourseConfirmDialogComponent,
], ModifyPlanDialogComponent,
entryComponents: [ ],
CourseDetailsDialogComponent, entryComponents: [
NotesDialogComponent, NotesDialogComponent,
RemoveCourseConfirmDialogComponent RemoveCourseConfirmDialogComponent,
] ModifyPlanDialogComponent,
],
}) })
export class DegreePlannerModule {} export class DegreePlannerModule {}
src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html 0 → 100644
+ 53
− 0
View file @ 2a82f66e
<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
src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.ts 0 → 100644
+ 29
− 0
View file @ 2a82f66e
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> }');
}
}
src/app/degree-planner/term-container/term-container.component.html
+ 1
− 1
View file @ 2a82f66e
...@@ -58,6 +58,6 @@ ...@@ -58,6 +58,6 @@
</div> </div>
</div> </div>
<div class="add-new-wrapper" *ngIf="isActiveTerm$ | async"> <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> </div>
</mat-card> </mat-card>
\ No newline at end of file
src/app/degree-planner/term-container/term-container.component.scss
+ 83
− 79
View file @ 2a82f66e
@import 'assets/material-theme.scss'; @import 'assets/material-theme.scss';
.term-container { .term-container {
background-color: #EEF1F3; background-color: #eef1f3;
padding: 0; padding: 0;
}
.add-course-button {
text-transform: uppercase;
} }
.term-inner { .term-inner {
padding: 4px 8px 4px 8px; padding: 4px 8px 4px 8px;
} }
.term-header { .term-header {
margin: 0; margin: 0;
h2 { h2 {
margin: 0; margin: 0;
} }
.mat-icon-button { .mat-icon-button {
line-height: 20px; line-height: 20px;
margin-left: 5px; margin-left: 5px;
color: #2879A8; color: #2879a8;
} }
} }
.term-container h2 { .term-container h2 {
color: #494949; color: #494949;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
} }
.credits { .credits {
display: flex; display: flex;
// justify-content: flex-end; // justify-content: flex-end;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
} }
.cdk-drop-list-dragging { .cdk-drop-list-dragging {
position: relative; position: relative;
&:after { &:after {
content: 'Add course to term'; content: 'Add course to term';
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: #EEF1F3; background-color: #eef1f3;
border: dashed 2px #2879A8; border: dashed 2px #2879a8;
color: #2879A8; color: #2879a8;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }
.add-new-wrapper { .add-new-wrapper {
border-top: solid #E0E4E7 1px; border-top: solid #e0e4e7 1px;
padding: 8px; padding: 8px;
button { button {
width: 100%; width: 100%;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
color: #2879A8; color: #2879a8;
} }
} }
.add-note-icon { .add-note-icon {
color: map-get($uw-primary, 500); color: map-get($uw-primary, 500);
} }
.note-item { .note-item {
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
border: solid 1px white; border: solid 1px white;
background-color: white; background-color: white;
border-radius: 5px; border-radius: 5px;
font-family: "Helvetica Neue", Georgia, Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Georgia, Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
margin-bottom: 10px; margin-bottom: 10px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
border-color: #0679A8; border-color: #0679a8;
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, .25) box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.25);
} }
p { p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.note-excerpt { .note-excerpt {
height: 32px; height: 32px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.no-courses { .no-courses {
text-align: center; text-align: center;
padding: 25px 0; padding: 25px 0;
font-weight: bold; font-weight: bold;
} }
\ No newline at end of file
src/assets/material-theme.scss
+ 96
− 94
View file @ 2a82f66e
@import '~@angular/material/theming'; @import '~@angular/material/theming';
$uw-accent: ( $uw-accent: (
50 : #f8e1e2, 50: #f8e1e2,
100 : #eeb4b6, 100: #eeb4b6,
200 : #e28286, 200: #e28286,
300 : #d65055, 300: #d65055,
400 : #ce2b30, 400: #ce2b30,
500 : #c5050c, 500: #c5050c,
600 : #bf040a, 600: #bf040a,
700 : #b80408, 700: #b80408,
800 : #b00306, 800: #b00306,
900 : #a30103, 900: #a30103,
A100 : #ffcece, A100: #ffcece,
A200 : #ff9b9b, A200: #ff9b9b,
A400 : #ff6868, A400: #ff6868,
A700 : #ff4e4e, A700: #ff4e4e,
contrast: ( contrast: (
50 : #000000, 50: #000000,
100 : #000000, 100: #000000,
200 : #000000, 200: #000000,
300 : #ffffff, 300: #ffffff,
400 : #ffffff, 400: #ffffff,
500 : #ffffff, 500: #ffffff,
600 : #ffffff, 600: #ffffff,
700 : #ffffff, 700: #ffffff,
800 : #ffffff, 800: #ffffff,
900 : #ffffff, 900: #ffffff,
A100 : #000000, A100: #000000,
A200 : #000000, A200: #000000,
A400 : #000000, A400: #000000,
A700 : #000000, A700: #000000,
) ),
); );
$uw-primary: ( $uw-primary: (
50 : #e1eff5, 50: #e1eff5,
100 : #b4d7e5, 100: #b4d7e5,
200 : #82bcd4, 200: #82bcd4,
300 : #4fa1c2, 300: #4fa1c2,
400 : #2a8db5, 400: #2a8db5,
500 : #0479a8, 500: #0479a8,
600 : #0371a0, 600: #0371a0,
700 : #036697, 700: #036697,
800 : #025c8d, 800: #025c8d,
900 : #01497d, 900: #01497d,
A100 : #aad6ff, A100: #aad6ff,
A200 : #77bdff, A200: #77bdff,
A400 : #44a5ff, A400: #44a5ff,
A700 : #2a99ff, A700: #2a99ff,
contrast: ( contrast: (
50 : #000000, 50: #000000,
100 : #000000, 100: #000000,
200 : #000000, 200: #000000,
300 : #000000, 300: #000000,
400 : #ffffff, 400: #ffffff,
500 : #ffffff, 500: #ffffff,
600 : #ffffff, 600: #ffffff,
700 : #ffffff, 700: #ffffff,
800 : #ffffff, 800: #ffffff,
900 : #ffffff, 900: #ffffff,
A100 : #000000, A100: #000000,
A200 : #000000, A200: #000000,
A400 : #000000, A400: #000000,
A700 : #000000, A700: #000000,
) ),
); );
$uw-warn: ( $uw-warn: (
50 : #fff0e0, 50: #fff0e0,
100 : #ffd9b3, 100: #ffd9b3,
200 : #ffc080, 200: #ffc080,
300 : #ffa64d, 300: #ffa64d,
400 : #ff9326, 400: #ff9326,
500 : #ff8000, 500: #ff8000,
600 : #ff7800, 600: #ff7800,
700 : #ff6d00, 700: #ff6d00,
800 : #ff6300, 800: #ff6300,
900 : #ff5000, 900: #ff5000,
A100 : #ffffff, A100: #ffffff,
A200 : #fff5f2, A200: #fff5f2,
A400 : #ffcfbf, A400: #ffcfbf,
A700 : #ffbca6, A700: #ffbca6,
contrast: ( contrast: (
50 : #000000, 50: #000000,
100 : #000000, 100: #000000,
200 : #000000, 200: #000000,
300 : #000000, 300: #000000,
400 : #000000, 400: #000000,
500 : #000000, 500: #000000,
600 : #000000, 600: #000000,
700 : #000000, 700: #000000,
800 : #000000, 800: #000000,
900 : #ffffff, 900: #ffffff,
A100 : #000000, A100: #000000,
A200 : #000000, A200: #000000,
A400 : #000000, A400: #000000,
A700 : #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); @include mat-core($custom-typography);
$my-app-primary: mat-palette($uw-primary); $my-app-primary: mat-palette($uw-primary);
$my-app-accent: mat-palette($uw-accent); $my-app-accent: mat-palette($uw-accent);
$my-app-warn: mat-palette($uw-warn); $my-app-warn: mat-palette($uw-warn);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme); @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. // Since we're not using uw-style for buttons we need to add a few styles to mirror its appearance.
button { button {
text-transform: uppercase; // text-transform: uppercase;
} }
src/assets/sass/general.scss
+ 80
− 77
View file @ 2a82f66e
@import 'assets/material-theme.scss'; @import 'assets/material-theme.scss';
body { body {
background-color: #ccc; background-color: #ccc;
margin: 0px; margin: 0px;
} }
.text-right { .text-right {
text-align: right; text-align: right;
} }
.text-left { .text-left {
text-align: left; text-align: left;
} }
.text-center { .text-center {
text-align: center; text-align: center;
} }
.semi-bold { .semi-bold {
font-weight: 700; font-weight: 700;
} }
.btn-primary[disabled] { .btn-primary[disabled] {
color: rgba(0,0,0,.26) !important; color: rgba(0, 0, 0, 0.26) !important;
background-color: rgba(0,0,0,.12) !important; background-color: rgba(0, 0, 0, 0.12) !important;
} }
.btn-primary, .btn-secondary, .btn-delete { .btn-primary,
min-width: 100px !important; .btn-secondary,
font-weight: 400 !important; .btn-delete {
letter-spacing: 1px; min-width: 100px !important;
font-size: 14px; font-weight: 400 !important;
letter-spacing: 1px;
font-size: 14px;
} }
.btn-primary { .btn-primary {
background-color: #0479a8 !important; background-color: #0479a8 !important;
color: white !important; color: white !important;
} }
.btn-secondary { .btn-secondary {
color: map-get($uw-primary, 500) !important; color: map-get($uw-primary, 500) !important;
border: 1px solid #b7b7b7 !important; border: 1px solid #b7b7b7 !important;
border-radius: 4px !important; border-radius: 4px !important;
} }
.btn-link { .btn-link {
color: map-get($uw-primary, 500) !important; color: map-get($uw-primary, 500) !important;
} }
.btn-delete { .btn-delete {
background-color: #b5261e; background-color: #b5261e;
color: white; color: white;
} }
.complete-icon { .complete-icon {
color: #457A3B; color: #457a3b;
} }
.in-progress-icon { .in-progress-icon {
color: #9CBA99; color: #9cba99;
} }
.problem-icon { .problem-icon {
color: #F7C376; color: #f7c376;
} }
.error-icon { .error-icon {
color: map-get($uw-accent, 600); color: map-get($uw-accent, 600);
} }
.help-icon { .help-icon {
color: map-get($uw-primary, 500); color: map-get($uw-primary, 500);
} }
.complete-icon, .complete-icon,
...@@ -79,49 +81,49 @@ body { ...@@ -79,49 +81,49 @@ body {
.error-icon, .error-icon,
.help-icon, .help-icon,
.not-offered { .not-offered {
font-size: 16px !important; font-size: 16px !important;
margin-left: 5px; margin-left: 5px;
padding-top: 5px; padding-top: 5px;
} }
#favoriteCourse-dropZone { #favoriteCourse-dropZone {
.course-favorite { .course-favorite {
.course-item { .course-item {
border: 1px solid #b7b7b7; border: 1px solid #b7b7b7;
border-radius: 4px; border-radius: 4px;
padding: 5px 10px; padding: 5px 10px;
}
} }
}
} }
.cdk-drag-placeholder { .cdk-drag-placeholder {
position: relative; position: relative;
opacity: 0; opacity: 0;
height: 0; height: 0;
} }
.course-wrapper:not(.cdk-drag-preview) { .course-wrapper:not(.cdk-drag-preview) {
transform: translate(0) !important; transform: translate(0) !important;
} }
.cdk-drag-preview { .cdk-drag-preview {
.course-wrapper-inner { .course-wrapper-inner {
transform: rotate(-3deg); transform: rotate(-3deg);
border-radius: 5px; border-radius: 5px;
box-shadow: -3px 3px 3px 2px rgba(0, 0, 0, 0.26); box-shadow: -3px 3px 3px 2px rgba(0, 0, 0, 0.26);
} }
} }
.no-courses { .no-courses {
padding: 20px 10px; padding: 20px 10px;
} }
.list-comma::before { .list-comma::before {
content: ', '; content: ', ';
} }
.list-comma:first-child::before { .list-comma:first-child::before {
content: ''; content: '';
} }
/* /*
...@@ -139,61 +141,62 @@ body { ...@@ -139,61 +141,62 @@ body {
*/ */
.term-container-wrapper { .term-container-wrapper {
display: none !important; display: none !important;
} }
.mat-expanded, .ng-animating { .mat-expanded,
.term-container-wrapper { .ng-animating {
display: flex !important; .term-container-wrapper {
} display: flex !important;
}
} }
// Menus styles // Menus styles
.course-item-menu, .course-item-menu,
.mat-menu-content { .mat-menu-content {
width: 200px !important; width: 200px !important;
} }
.favorites-list { .favorites-list {
border-bottom: 1px solid #f1f1f1 !important; border-bottom: 1px solid #f1f1f1 !important;
} }
// Dialogs styles // Dialogs styles
.mat-dialog-container { .mat-dialog-container {
min-width: 700px; min-width: 400px;
padding: 0px !important; padding: 0px !important;
.dialog-with-toolbar { .dialog-with-toolbar {
padding: 0 45px 25px 45px; padding: 0 45px 25px 45px;
margin: 0px; margin: 0px;
} }
} }
.dialog-toolbar { .dialog-toolbar {
height: 54px !important; height: 54px !important;
padding-right: 0px !important; padding-right: 0px !important;
.dialog-toolbar-title { .dialog-toolbar-title {
flex: 1 1 auto; flex: 1 1 auto;
font-weight: 400; font-weight: 400;
} }
.close-btn { .close-btn {
min-height: 55px; min-height: 55px;
} }
} }
// Media queries // Media queries
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.mat-dialog-container { .mat-dialog-container {
min-width: 100%; min-width: 100%;
} }
} }
@media screen and (max-width: 957px) { @media screen and (max-width: 957px) {
.mat-dialog-container { .mat-dialog-container {
.dialog-with-toolbar { .dialog-with-toolbar {
padding-top: 20px; padding-top: 20px;
}
} }
} }
\ 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