Merge pull request #55 from AnguHashBlog/main

feat(sitewide): initial responsivness mobile media query

Author: esteecodes

angular-primeng-app/angular.json

@@ -60,8 +60,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "4kb",
+                  "maximumError": "6kb"
                 }
               ],
               "outputHashing": "all"

angular-primeng-app/src/app/components/header/header.component.html

@@ -46,7 +46,7 @@ <h1>{{blogName}}</h1>
       </div>
     </div>
 
-    <div class="p-toolbar-group-end">
+    <div class="p-toolbar-group-end third">
       <div class="follow">
         <app-follow-dialog></app-follow-dialog>
       </div>

angular-primeng-app/src/app/components/header/header.component.scss

@@ -79,4 +79,59 @@ p-toolbar {
   }
 }
 
+@media (max-width: 600px) {
+  p-toolbar {
+    padding: 0;
 
+    .toolbar-row {
+      &.first {
+        .p-toolbar-group-start {
+          .logo-image {
+            width: 2rem;
+            height: 2rem;
+          }
+
+          .blog-title {
+            margin: 0;
+            h1 {
+              font-size: 1rem;
+            }
+          }
+        }
+        .p-toolbar-group-end {
+          justify-content: flex-end;
+          width: 40%;
+          .controls {
+            transform: scale(0.8);
+
+            p-inputSwitch {
+              transform: scale(0.7);
+            }
+          }
+        }
+      }
+
+      &.second {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .p-toolbar-group-start {
+          .social {
+            margin: 0 0 1rem;
+          }
+        }
+      }
+
+      &.third {
+        // will have to be adjusted to a dropdown
+        // to handle cases where there are more than 3 series
+        .series {
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}

angular-primeng-app/src/app/components/post-details/post-details.component.scss

@@ -69,3 +69,23 @@
     }
   }
 }
+
+@media (max-width: 600px) {
+  .post-details-page {
+    article {
+      max-width: 90vw;
+
+      .title {
+        font-size: 1.3rem;
+      }
+
+      .content {
+        line-height: 2rem;
+
+        iframe {
+          height: calc(50vw * 0.9);
+        }
+      }
+    }
+  }
+}

angular-primeng-app/src/app/components/posts/posts.component.scss

@@ -21,5 +21,22 @@
   }
 }
 
+@media (max-width: 600px) {
+  .posts-view {
+    width: 90vw;
+    .cards-wrapper {
+      p-card {
+        width: 100%;
+        margin: 0.5rem 0;
+        .card-title {
+          h3 {
+            font-size: 1.1rem;
+          }
+        }
+      }
+    }
+  }
+}
+
 
 

angular-primeng-app/src/app/components/series/series.component.scss

@@ -20,3 +20,20 @@
     margin-bottom: 2rem;
   }
 }
+
+@media (max-width: 600px) {
+  .series-view {
+    width: 90vw;
+    .cards-wrapper {
+      p-card {
+        width: 100%;
+        margin: 0.5rem 0;
+        .card-title {
+          h3 {
+            font-size: 1.1rem;
+          }
+        }
+      }
+    }
+  }
+}

angular-primeng-app/src/app/components/sidenav/sidenav.component.scss

@@ -1,4 +1,3 @@
-
 .sidenav-menu {
   display: flex;
   flex-direction: column;
@@ -31,3 +30,13 @@ p-button {
   margin-right: 1rem;
 }
 
+@media (max-width: 600px) {
+  .sidenav-menu {
+    h3 {
+      font-size: 1.3rem;
+    }
+    a {
+      font-size: 1.2rem;
+    }
+  }
+}

angular-primeng-app/src/app/partials/search-dialog/search-dialog.component.scss

@@ -51,3 +51,14 @@
   cursor: pointer;
   background-color: var(--surface-100);
 }
+
+@media (max-width: 600px) {
+  .search-result {
+    flex-direction: column;
+
+    img {
+      width: 100%;
+      height: 10rem;
+    }
+  }
+}

angular-primeng-app/src/styles.scss

@@ -65,3 +65,57 @@ article {
     }
   }
 }
+
+@media (max-width: 600px) {
+  .p-toolbar {
+    padding: 0.3rem 0 0.3rem 0.5rem;
+  }
+
+  app-sidenav {
+    .p-button {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+
+  .post-details-page {
+    article {
+      .content {
+        p {
+          font-size: 1.1rem;
+          line-height: 1.5rem;;
+        }
+        pre {
+          overflow-y: scroll;
+        }
+      }
+    }
+  }
+
+  // !important statement shall only be used if there are no alternatives, like in this case for overwriting very persistent styles set by PrimeNG
+
+  app-follow-dialog {
+    .p-dialog {
+      width: 85vw !important;
+    }
+  }
+
+  // negative margin shall also only be used if there are no alternatives, like in this case for centering the dialog
+  app-search-dialog {
+    .p-dialog {
+      min-width: 100vw !important;
+      max-height: 1000% !important;
+      margin-top: 30vh !important;
+      margin-left: -14rem;
+    }
+  }
+
+  app-settings-dialog {
+    .p-dialog {
+      min-width: 100vw !important;
+      max-height: 1000% !important;
+      margin-top: 110vh !important;
+      margin-left: -14rem;
+    }
+  }
+}