#6 added mark richards demo

docs/trendy-client-layout.md

@@ -7,3 +7,17 @@ nx generate @nrwl/angular:component containers/trendy-layout --project=trendy-la
 nx generate @nrwl/angular:lib pictures --routing --parent-module=apps/trendy/src/app/app.module.ts
 
 nx g @nrwl/angular:component  containers/pictures --project=pictures
+
+## Mike Richards example
+
+nx g @nrwl/angular:component  containers/pictures/trends/MikeRichards --project=pictures
+
+nx g @nrwl/angular:component  containers/pictures/trends/mike-richards/toonify/ToonifyMikeRichards --project=pictures
+
+nx g @nrwl/angular:component  containers/pictures/trends/mike-richards/transitioncat/TransitioncatMikeRichards --project=pictures
+
+Using this layout immediately creates a problem.  We need only one card, and the container should pass down properties into one picture card.
+
+First, I will create a layout.
+
+https://zoaibkhan.com/blog/create-a-responsive-card-grid-in-angular-using-flex-layout-part-1/

libs/pictures/src/lib/containers/pictures/trends/mike-richards/mike-richards.component.html

@@ -0,0 +1,10 @@
+<div class="content">
+  <div fxLayout="row wrap" fxLayoutGap="16px grid">
+    <div fxFlex="50%" fxFlex.xs="100%" fxFlex.sm="50%">
+      <demo-app-toonify-mike-richards></demo-app-toonify-mike-richards>
+    </div>
+    <div fxFlex="50%" fxFlex.xs="100%" fxFlex.sm="50%">
+      <demo-app-transitioncat-mike-richards></demo-app-transitioncat-mike-richards>
+    </div>
+  </div>
+</div>

libs/pictures/src/lib/containers/pictures/trends/mike-richards/mike-richards.component.scss

@@ -0,0 +1,3 @@
+.content {
+    padding: 16px;
+}

libs/pictures/src/lib/containers/pictures/trends/mike-richards/mike-richards.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MikeRichardsComponent } from './mike-richards.component';
+
+describe('MikeRichardsComponent', () => {
+  let component: MikeRichardsComponent;
+  let fixture: ComponentFixture<MikeRichardsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MikeRichardsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MikeRichardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/pictures/src/lib/containers/pictures/trends/mike-richards/mike-richards.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-app-mike-richards',
+  templateUrl: './mike-richards.component.html',
+  styleUrls: ['./mike-richards.component.scss']
+})
+export class MikeRichardsComponent {
+
+  cardData = [
+{
+title: "Title 1",
+imageUrl: "assets/images/image1.png"
+},
+{
+title: "Title 2",
+imageUrl: "assets/images/image2.png"
+},
+]
+
+}

libs/pictures/src/lib/containers/pictures/trends/mike-richards/toonify/toonify-mike-richards/toonify-mike-richards.component.html

@@ -0,0 +1,16 @@
+<mat-card class="mat-elevation-z4">
+    <mat-card-header>
+      <mat-card-title>Toonify Himalayan Peaks</mat-card-title>
+    </mat-card-header>
+    <img mat-card-image 
+    src="./../assets/pictures/mike-richards/toonify-mike-richards.jpg">
+    <mat-card-content>
+      <p>
+        Mike Richards is the shows search on the Pyramid from buzzer and children. 
+      </p>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-button>LIKE</button>
+      <button mat-button>SHARE</button>
+    </mat-card-actions>
+  </mat-card>

libs/pictures/src/lib/containers/pictures/trends/mike-richards/toonify/toonify-mike-richards/toonify-mike-richards.component.scss

@@ -0,0 +1,3 @@
+mat-card {
+    width: 90%;
+}

libs/pictures/src/lib/containers/pictures/trends/mike-richards/toonify/toonify-mike-richards/toonify-mike-richards.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToonifyMikeRichardsComponent } from './toonify-mike-richards.component';
+
+describe('ToonifyMikeRichardsComponent', () => {
+  let component: ToonifyMikeRichardsComponent;
+  let fixture: ComponentFixture<ToonifyMikeRichardsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ToonifyMikeRichardsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToonifyMikeRichardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/pictures/src/lib/containers/pictures/trends/mike-richards/toonify/toonify-mike-richards/toonify-mike-richards.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'demo-app-toonify-mike-richards',
+  templateUrl: './toonify-mike-richards.component.html',
+  styleUrls: ['./toonify-mike-richards.component.scss']
+})
+export class ToonifyMikeRichardsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

libs/pictures/src/lib/containers/pictures/trends/mike-richards/transitioncat/transitioncat-mike-richards/transitioncat-mike-richards.component.html

@@ -0,0 +1,15 @@
+<mat-card class="mat-elevation-z4">
+    <mat-card-header>
+      <mat-card-title>Transition Cat Himalayan Peaks</mat-card-title>
+    </mat-card-header>
+    <img mat-card-image src="./../assets/pictures/mike-richards/transitioncat-mike-richards-452.jpg">
+    <mat-card-content>
+      <p>
+        Everyone is a potential milk duck these days.
+      </p>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-button>LIKE</button>
+      <button mat-button>SHARE</button>
+    </mat-card-actions>
+  </mat-card>

libs/pictures/src/lib/containers/pictures/trends/mike-richards/transitioncat/transitioncat-mike-richards/transitioncat-mike-richards.component.scss

@@ -0,0 +1,3 @@
+mat-card {
+    width: 90%;
+}

libs/pictures/src/lib/containers/pictures/trends/mike-richards/transitioncat/transitioncat-mike-richards/transitioncat-mike-richards.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TransitioncatMikeRichardsComponent } from './transitioncat-mike-richards.component';
+
+describe('TransitioncatMikeRichardsComponent', () => {
+  let component: TransitioncatMikeRichardsComponent;
+  let fixture: ComponentFixture<TransitioncatMikeRichardsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TransitioncatMikeRichardsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TransitioncatMikeRichardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/pictures/src/lib/containers/pictures/trends/mike-richards/transitioncat/transitioncat-mike-richards/transitioncat-mike-richards.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-app-transitioncat-mike-richards',
+  templateUrl: './transitioncat-mike-richards.component.html',
+  styleUrls: ['./transitioncat-mike-richards.component.scss']
+})
+export class TransitioncatMikeRichardsComponent {
+
+}

libs/pictures/src/lib/pictures.module.ts

@@ -1,15 +1,23 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule, Route } from '@angular/router';
+import { MaterialModule } from '@demo-app/material';
 import { PicturesComponent } from './containers/pictures/pictures.component';
+import { MikeRichardsComponent } from './containers/pictures/trends/mike-richards/mike-richards.component';
+import { ToonifyMikeRichardsComponent } from './containers/pictures/trends/mike-richards/toonify/toonify-mike-richards/toonify-mike-richards.component';
+import { TransitioncatMikeRichardsComponent } from './containers/pictures/trends/mike-richards/transitioncat/transitioncat-mike-richards/transitioncat-mike-richards.component';
 
 export const picturesRoutes: Route[] = [];
 
 @NgModule({
   imports: [
     CommonModule,
-    RouterModule.forChild([{ path: '', component: PicturesComponent }]),
+    MaterialModule,
+    RouterModule.forChild([
+      { path: '', component: PicturesComponent },
+      { path: 'Mike Richards', component: MikeRichardsComponent },
+    ]),
   ],
-  declarations: [PicturesComponent],
+  declarations: [PicturesComponent, MikeRichardsComponent, ToonifyMikeRichardsComponent, TransitioncatMikeRichardsComponent],
 })
 export class PicturesModule {}