fix(demo): various responsive fixes

angular-extensions · Jul 23, 2019 · 53fa0a4 · 53fa0a4
1 parent 934063f
commit 53fa0a4
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 112 deletions.
diff --git a/projects/elements-demo/src/app/app.component.html b/projects/elements-demo/src/app/app.component.html
@@ -6,7 +6,11 @@
   [hasBackdrop]="isSmallOrSmaller | async"
   (backdropClick)="onBackdropClick()"
 >
-  <mat-sidenav mode="side" [opened]="navOpened | async" disableClose>
+  <mat-sidenav
+    [mode]="sidenavMode | async"
+    [opened]="navOpened | async"
+    disableClose
+  >
     <demo-navigation></demo-navigation>
   </mat-sidenav>
   <mat-sidenav-content>

diff --git a/projects/elements-demo/src/app/app.component.scss b/projects/elements-demo/src/app/app.component.scss
@@ -4,7 +4,29 @@
   display: flex;
   flex-direction: column;
 
+  demo-toolbar {
+    z-index: 100;
+    position: fixed;
+    width: 100%;
+    box-shadow: 0px -10px 10px 10px rgba(0, 0, 0, 0.5);
+  }
+
   mat-sidenav-container {
+    padding-top: 64px;
     flex: 1 0 auto;
   }
+
+  mat-sidenav {
+    padding-top: 64px;
+  }
+}
+
+:host-context(.responsive) {
+  mat-sidenav-container {
+    padding-top: 56px;
+  }
+
+  mat-sidenav {
+    padding-top: 56px;
+  }
 }
diff --git a/projects/elements-demo/src/app/app.component.ts b/projects/elements-demo/src/app/app.component.ts
@@ -19,6 +19,7 @@ export class AppComponent implements OnInit {
   navOpened: Observable<boolean>;
   navToggled = new BehaviorSubject(false);
   isSmallOrSmaller: Observable<boolean>;
+  sidenavMode: Observable<string>;
 
   constructor(private responsiveLayoutService: ResponsiveLayoutService) {}
 
@@ -46,6 +47,10 @@ export class AppComponent implements OnInit {
     ]).pipe(
       map(([isSmallScreen, navToggled]) => (!isSmallScreen ? true : navToggled))
     );
+
+    this.sidenavMode = this.isSmallOrSmaller.pipe(
+      map(isSmallOrSmaller => (isSmallOrSmaller ? 'push' : 'side'))
+    );
   }
 
   onNavToggle() {

diff --git a/projects/elements-demo/src/app/features/docs/faq/faq.component.html b/projects/elements-demo/src/app/features/docs/faq/faq.component.html
@@ -4,7 +4,9 @@ <h1>Frequently asked questions</h1>
   <mat-accordion>
     <mat-expansion-panel *ngFor="let item of faq">
       <mat-expansion-panel-header>
-        <mat-panel-title [innerHTML]="item.question"></mat-panel-title>
+        <mat-panel-title>
+          <span [innerHTML]="item.question"></span>
+        </mat-panel-title>
       </mat-expansion-panel-header>
       <p [innerHTML]="item.answer"></p>
     </mat-expansion-panel>

diff --git a/projects/elements-demo/src/app/features/docs/faq/faq.component.scss b/projects/elements-demo/src/app/features/docs/faq/faq.component.scss
@@ -3,9 +3,9 @@ h2 {
   font-weight: bold;
 }
 
-:host-context(.responsive-large) {
-  .wrapper {
-    width: 70%;
+mat-panel-title {
+  span {
+    display: inline-block;
   }
 }
 
@@ -14,3 +14,9 @@ h2 {
     margin-top: 25px;
   }
 }
+
+:host-context(.responsive-large) {
+  .wrapper {
+    width: 70%;
+  }
+}
diff --git a/projects/elements-demo/src/app/features/home/home/home.component.scss b/projects/elements-demo/src/app/features/home/home/home.component.scss
@@ -1,106 +1,110 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 40px;
-
-  .intro {
-    text-align: center;
-
-    &:before {
-      font-family: Lato;
-      z-index: -1;
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 500px;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23e53531' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23cf2525' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23d7313e' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23a91d28' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23c92541' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23b1203a' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23c6214e' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23981638' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23a01547' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%23a0113d' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23b70e4f' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23890c46' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");
-      background-position: top center;
-      background-repeat: no-repeat;
-      background-size: 1600px 500px;
-      transform: rotate(180deg);
-      overflow: hidden;
-    }
-
-    h1 {
-      font-size: 3em;
-      line-height: 1.1em;
-      font-weight: bold;
-    }
-
-    h3 {
-      font-size: 1.8em;
-      line-height: 1.3em;
-      opacity: 0.5;
-      margin: 0;
-    }
-
-    mat-icon {
-      height: 170px;
-      margin: 0 0 50px 0;
-    }
-  }
-
-  .cta {
-    margin: 40px 0 0 0;
-
-    button {
-      margin: 5px;
-      padding: 5px 35px;
-    }
-  }
-
-  h2 {
-    font-size: 2.5em;
-    text-transform: uppercase;
-    margin: 50px 0 15px 0;
-  }
-
-  pre {
-    margin: 20px 0 0 0;
-    line-height: 1.3em;
-  }
-
-  mat-grid-list {
-    width: 100%;
-
-    mat-grid-tile {
-      mat-card {
-        width: calc(100% - 50px);
-        height: calc(100% - 50px);
-
-        mat-card-title {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        mat-card-subtitle {
-          height: 80px;
-          width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        mat-icon {
-          font-size: 3em;
-        }
-      }
-    }
-  }
-}
-
-:host-context(.responsive) {
-  .cta {
-    button {
-      width: 100%;
-    }
-  }
-
-  code {
-    white-space: normal;
-    padding: 0 8px 1px 8px;
-  }
-}
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40px;
+
+  .intro {
+    text-align: center;
+
+    &:before {
+      font-family: Lato;
+      z-index: -1;
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 500px;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23e53531' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23cf2525' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23d7313e' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23a91d28' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23c92541' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23b1203a' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23c6214e' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23981638' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23a01547' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%23a0113d' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23b70e4f' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23890c46' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");
+      background-position: top center;
+      background-repeat: no-repeat;
+      background-size: 1600px 500px;
+      transform: rotate(180deg);
+      overflow: hidden;
+    }
+
+    h1 {
+      font-size: 3em;
+      line-height: 1.1em;
+      font-weight: bold;
+    }
+
+    h3 {
+      font-size: 1.8em;
+      line-height: 1.3em;
+      opacity: 0.5;
+      margin: 0;
+    }
+
+    mat-icon {
+      height: 170px;
+      margin: 0 0 50px 0;
+    }
+  }
+
+  .cta {
+    margin: 40px 0 0 0;
+
+    button {
+      margin: 5px;
+      padding: 5px 35px;
+    }
+  }
+
+  h2 {
+    font-size: 2.5em;
+    text-transform: uppercase;
+    margin: 50px 0 15px 0;
+  }
+
+  pre {
+    margin: 20px 0 0 0;
+    line-height: 1.3em;
+  }
+
+  ol {
+    max-width: 100%;
+  }
+
+  mat-grid-list {
+    width: 100%;
+
+    mat-grid-tile {
+      mat-card {
+        width: calc(100% - 50px);
+        height: calc(100% - 50px);
+
+        mat-card-title {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        mat-card-subtitle {
+          height: 80px;
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        mat-icon {
+          font-size: 3em;
+        }
+      }
+    }
+  }
+}
+
+:host-context(.responsive) {
+  .cta {
+    button {
+      width: 100%;
+    }
+  }
+
+  code {
+    white-space: normal;
+    padding: 0 8px 1px 8px;
+  }
+}
diff --git a/projects/elements-demo/src/styles-reset.scss b/projects/elements-demo/src/styles-reset.scss
@@ -47,6 +47,15 @@ blockquote {
     border: 0;
     font-size: 2em;
     line-height: 1.6em;
-    padding: 10px 60px;
+    padding: 10px 80px;
+  }
+}
+
+.responsive {
+  blockquote {
+    &.large {
+      font-size: 1.6em;
+      padding: 10px 20px;
+    }
   }
 }