fix(demo): responsive-layout

Author: tomastrajan

projects/elements-demo/src/app/app.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, HostBinding } from '@angular/core';
 import { MatSidenav } from '@angular/material';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { delay, map, tap } from 'rxjs/operators';
 
 import { ResponsiveLayoutService } from './core/layout/responsive-layout.service';
 
@@ -11,6 +11,9 @@ import { ResponsiveLayoutService } from './core/layout/responsive-layout.service
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
+  @HostBinding('class')
+  demoRootCssClass = '';
+
   @ViewChild('sidenav', { static: false }) sidenav: MatSidenav;
 
   navOpened: Observable<boolean>;
@@ -20,7 +23,10 @@ export class AppComponent implements OnInit {
   constructor(private responsiveLayoutService: ResponsiveLayoutService) {}
 
   ngOnInit() {
-    this.isResponsiveLayout = this.responsiveLayoutService.isResponsiveLayout;
+    this.isResponsiveLayout = this.responsiveLayoutService.isResponsiveLayout.pipe(
+      delay(1),
+      tap(value => (this.demoRootCssClass = value ? 'responsive' : ''))
+    );
 
     this.navOpened = combineLatest([
       this.isResponsiveLayout,

projects/elements-demo/src/app/core/layout/responsive-layout.service.ts

@@ -18,6 +18,9 @@ export class ResponsiveLayoutService {
   columnCount: Observable<number>;
   isResponsiveLayout: Observable<boolean>;
 
+  // sync
+  isResponsiveLayoutSync: boolean;
+
   constructor(private breakpointObserver: BreakpointObserver) {
     this.isXSmallScreen = this.breakpointObserver
       .observe([Breakpoints.XSmall])

projects/elements-demo/src/app/core/layout/toolbar/toolbar.component.html

@@ -10,6 +10,8 @@
     }}</mat-icon>
   </button>
 
+  <span class="spacer-responsive"></span>
+
   <a mat-icon-button routerLink="home">
     <mat-icon
       inline
@@ -18,7 +20,11 @@
       aria-label="@angular-extensions/elements"
     ></mat-icon>
   </a>
-  <span class="project-name">@angular-extensions/elements</span>
+  <span class="project-name"
+    >{{
+      (isResponsiveLayout | async) ? '' : '@angular-extensions/'
+    }}elements</span
+  >
 
   <span class="spacer"></span>
   <ng-container *ngIf="(isResponsiveLayout | async) === false">

projects/elements-demo/src/app/core/layout/toolbar/toolbar.component.scss

@@ -13,3 +13,9 @@ button {
 .menu {
   margin: 0 10px 0 0;
 }
+
+:host-context(.responsive) {
+  .spacer-responsive {
+    flex: 1 0 auto;
+  }
+}

projects/elements-demo/src/app/features/home/home/home.component.html

@@ -51,7 +51,7 @@ <h2>Features</h2>
           <mat-icon color="primary">{{ feature.icon }}</mat-icon>
         </div>
         <mat-card-title>{{ feature.title }}</mat-card-title>
-        <mat-card-subtitle>{{ feature.subtitle }}</mat-card-subtitle>
+        <mat-card-subtitle [innerHTML]="feature.subtitle"></mat-card-subtitle>
       </mat-card-header>
     </mat-card>
   </mat-grid-tile>

projects/elements-demo/src/app/features/home/home/home.component.scss

@@ -66,8 +66,14 @@
         width: calc(100% - 50px);
         height: calc(100% - 50px);
 
+        mat-card-title {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
         mat-card-subtitle {
-          height: 60px;
+          height: 80px;
           width: 100%;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -80,3 +86,16 @@
     }
   }
 }
+
+:host-context(.responsive) {
+  .cta {
+    button {
+      width: 100%;
+    }
+  }
+
+  code {
+    white-space: normal;
+    padding: 0 8px 1px 8px;
+  }
+}

projects/elements-demo/src/app/features/home/home/home.component.ts

@@ -13,7 +13,7 @@ const FEATURES = [
   {
     title: 'Simple API',
     subtitle:
-      'Just grab *axLazyElement directive set the element bundle url and you are ready to go!',
+      'Just grab <code>*axLazyElement</code> directive set the element bundle url and you are ready to go!',
     icon: 'sentiment_satisfied_alt'
   },
   {