Angular Material In Depth

Author: Your Name

src/app/course-dialog/course-dialog.component.ts

@@ -52,6 +52,8 @@ export function openEditCourseDialog(dialog: MatDialog, course:Course) {
 
     config.disableClose = true;
     config.autoFocus = true;
+    config.panelClass = "modal-panel";
+    config.backdropClass = "backdrop-modal-panel";
 
     config.data = {
         ...course

src/app/courses-card-list/courses-card-list.component.ts

@@ -15,7 +15,7 @@ export class CoursesCardListComponent implements OnInit {
     @Input()
     courses: Course[];
 
-    cols = 3;
+    cols = 1;
 
     rowHeight = '500px';
 
@@ -27,7 +27,7 @@ export class CoursesCardListComponent implements OnInit {
     }
 
     ngOnInit() {
-
+/*
         this.responsive.observe([
             Breakpoints.TabletPortrait,
             Breakpoints.TabletLandscape,
@@ -58,6 +58,8 @@ export class CoursesCardListComponent implements OnInit {
                 }
 
             });
+            */
+
 
     }
 

src/app/home/home.component.scss

@@ -1,7 +1,7 @@
 
 
 .courses-panel {
-    max-width: 1500px;
+    max-width: 460px;
     margin: 0 auto;
 }
 

src/styles.scss

@@ -1,8 +1,13 @@
+
 @use '@angular/material' as mat;
 /* You can add global styles to this file, and also import other style files */
 
 @import "@angular/material/prebuilt-themes/indigo-pink.css";
 
+@import "./mixins";
+
+@include responsive-dialogs();
+
 .highlight-date {
   background: red;
 }