Feature: Repsonsive Design

src/app/app.component.scss

@@ -14,4 +14,11 @@ main {
     min-width: 60rem;
     max-width: 80rem;
   }
+
+  @media (max-width: 800px) {
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+    padding: 0.5rem;
+  }
 }

src/app/header/header.component.html

@@ -2,7 +2,8 @@
     <nav>
         <a routerLink="" mat-button>
             <mat-icon>badge</mat-icon>
-            EMS</a>
+            EMS
+        </a>
         @for (route of routes; track route) {
         <a mat-button routerLink="{{ route.path }}" class="{{ route.class }}">{{ route.title }}</a>
         }

src/app/header/header.component.scss

@@ -13,6 +13,13 @@
     box-sizing: border-box;
     list-style: none;
     gap: 0.25rem;
+
+    @media (max-width: 800px) {
+      a:first-of-type {
+        display: none;
+
+      }
+    }
   }
 
   a,
@@ -28,5 +35,11 @@
   &__login {
     min-width: fit-content;
   }
-}
 
+  @media (max-width: 500px) {
+      >a:last-of-type {
+        display: none;
+
+      }
+    }
+}

src/app/info-modal/info-modal.component.html

@@ -1,9 +1,15 @@
 <h2 mat-dialog-title>{{ data.firstName }} {{ data.lastName }}</h2>
-<mat-dialog-content>
+<mat-dialog-content class="info-modal">
     <p>Street: {{data.street}}</p>
     <p>Location: {{data.postcode}} {{data.city}}</p>
     <p>Phone: <a href="tel:{{data.phone}}">{{data.phone}}</a></p>
+    <p class="info-modal__skills-label">Skills:</p>
+    <ul class="info-modal__skills">
+        @for (skill of data.skillSet; track skill){
+        <li>{{skill.skill}}</li>
+        }
+    </ul>
 </mat-dialog-content>
-<mat-dialog-actions class="info-modal">
+<mat-dialog-actions>
     <button mat-flat-button [mat-dialog-close]="false">Close</button>
 </mat-dialog-actions>

src/app/info-modal/info-modal.component.scss

@@ -0,0 +1,11 @@
+@media (min-width: 800px) {
+  .info-modal {
+    &__skills-label {
+      display: none;
+    }
+
+    &__skills {
+      display: none;
+    }
+  }
+}

src/app/notification-box/notification-box.component.scss

@@ -12,6 +12,11 @@
   padding: 0.5rem;
   gap: 0.5rem;
 
+  @media (max-width: 20rem) {
+    min-width: calc(100% - 0.5rem);
+    padding: 0.25rem;
+  }
+
   overflow: hidden;
 
   &__card {

src/app/views/dashboard/dashboard.component.scss

@@ -10,6 +10,10 @@
     :first-child {
       flex-grow: 1;
     }
+
+    @media (max-width: 800px) {
+      gap: 0.25rem;
+    }
   }
 
   &__employees {
@@ -24,7 +28,9 @@
         width: 4rem;
       }
 
-      .mat-column-first-name, .mat-column-last-name, .mat-column-skills {
+      .mat-column-first-name,
+      .mat-column-last-name,
+      .mat-column-skills {
         width: 0;
         flex-grow: 1;
       }
@@ -34,20 +40,38 @@
         padding-left: 1rem;
       }
 
+      $action-count: 3;
+      $fap-size: 40px;
+      $gap-size: 1rem;
+
       th.mat-column-actions {
-        $action-count: 3;
-        $fap-size: 40px;
-        $gap-size: 1rem;
         width: calc($fap-size * $action-count + $gap-size * ($action-count - 1));
       }
 
       td.mat-column-actions {
-        gap: 1rem;
+        gap: $gap-size;
         display: flex;
         padding: 0.25rem 0;
         align-items: start;
       }
 
+      @media (max-width: 800px) {
+        $gap-size: 0.25rem;
+
+        .mat-column-id,
+        .mat-column-skills {
+          display: none;
+        }
+
+        th.mat-column-actions {
+          width: calc($fap-size * $action-count + $gap-size * ($action-count - 1));
+        }
+
+        td.mat-column-actions {
+          gap: $gap-size;
+        }
+      }
+
     }
   }
 }

src/app/views/employee-detail/employee-detail.component.scss

@@ -5,6 +5,10 @@
   flex-direction: column;
   gap: 4rem;
 
+  @media (max-width: 800px) {
+    gap: 1rem;
+  }
+
   // Calculate Height and Spacing based on the Form Fields
   $inner-form-height: 56px;
   $form-height: 75.5px;
@@ -16,6 +20,11 @@
     display: flex;
     gap: 4rem;
 
+    @media (max-width: 800px) {
+      flex-direction: column;
+      gap: 1rem;
+    }
+
     >* {
       min-width: 0;
       flex-basis: 0;

src/app/views/qualifications/qualifications.component.scss

@@ -19,10 +19,13 @@
       }
 
       .mat-column-skill{
+        display: flex;
         flex-grow: 1;
 
         form{
           display: none;
+          width: 0;
+          flex-grow: 1;
           padding-top: 0.25rem;
         }
 
@@ -32,7 +35,7 @@
          }
 
           form{
-            display: block;
+            display: inline-grid;
           }
         }
       }