feat(home): Separate recipes and home modules (#97)

contentacms · Nov 12, 2017 · 7d5046c · 7d5046c
1 parent 901a539
commit 7d5046c
Show file tree

Hide file tree

Showing 70 changed files with 850 additions and 227 deletions.
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,6 +1,6 @@
 @import "./../styles/settings/breakpoints.scss";
 @import "./../styles/settings/layout.scss";
-
+@import "./../styles/settings/colors.scss";
 .main-content {
     padding: {
         top: 0;

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -1,9 +1,9 @@
+import { SharedModule } from './shared/shared.module';
 import { HttpModule } from '@angular/http';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MatButtonModule, MatIconModule, MatIconRegistry, MatListModule, MatSidenavModule, MatToolbarModule } from '@angular/material';
 
 import { AppComponent } from './app.component';
 import { SidenavComponent } from './components/sidenav/sidenav.component';
@@ -25,17 +25,8 @@ describe('AppComponent', () => {
         SidenavComponent
       ],
       imports: [
-        MatToolbarModule,
-        MatButtonModule,
-        MatSidenavModule,
-        MatIconModule,
-        HttpModule,
-        MatListModule,
+        SharedModule.forRoot(),
         RouterTestingModule.withRoutes([])
-      ],
-      providers: [
-        MatIconRegistry,
-        MaterialIconsService
       ]
     }).compileComponents();
   }));

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -12,6 +12,7 @@ export class AppComponent implements OnInit  {
   @ViewChild('sidenav') sidenav: MatSidenav;
   menu: Array<Object> = [
     { name: 'Home', url: '', icon: 'home' },
+    { name: 'Recipes', url: './recipes', icon: 'settings' },
     { name: 'Features', url: './features', icon: 'settings' }
   ];
 

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,24 +1,7 @@
+import { SharedModule } from './shared/shared.module';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
-import { ReactiveFormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
 import { RouterModule } from '@angular/router';
-import {
-  MatButtonModule,
-  MatCardModule,
-  MatCheckboxModule,
-  MatChipsModule,
-  MatIconModule,
-  MatIconRegistry,
-  MatInputModule,
-  MatListModule,
-  MatOptionModule,
-  MatProgressSpinnerModule,
-  MatSelectModule,
-  MatSidenavModule,
-  MatToolbarModule
-} from '@angular/material';
 import 'hammerjs';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -29,80 +12,43 @@ import { StoreRouterConnectingModule } from '@ngrx/router-store';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './components/header/header.component';
 import { SidenavComponent } from './components/sidenav/sidenav.component';
-import { RecipesAndFiltersComponent } from './components/recipes-and-filters/recipes-and-filters.component';
-import { RecipesComponent } from './components/recipes/recipes.component';
-import { RecipeDetailsComponent } from './components/recipe-details/recipe-details.component';
-import { RecipeComponent } from './components/recipe/recipe.component';
-import { FiltersComponent } from './components/filters/filters.component';
-import { CardComponent } from './components/card/card.component';
 import { FeaturesComponent } from './components/features/features.component';
 import { environment } from './../environments/environment';
 
 import { Backend } from './services/backend.service';
-import { MaterialIconsService } from './services/material-icons/material-icons.service';
 import { appReducer } from './store/reducers/reducers';
 import { RecipesEffects } from './store/effects/effects';
 import { initialState } from './models/state.model';
 
 import { BASE_URL, ContentaDatastore, ContentaServiceModule } from 'contenta-angular-service';
-import { TagCloudComponent } from './components/tag-cloud/tag-cloud.component';
-
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 @NgModule({
   declarations: [
     AppComponent,
-    CardComponent,
     FeaturesComponent,
     HeaderComponent,
-    SidenavComponent,
-    RecipesAndFiltersComponent,
-    RecipesComponent,
-    RecipeDetailsComponent,
-    RecipeComponent,
-    FiltersComponent,
-    TagCloudComponent
+    SidenavComponent
   ],
   imports: [
     BrowserModule,
-    ReactiveFormsModule,
-    HttpModule,
-    HttpClientModule,
-    ContentaServiceModule,
     BrowserAnimationsModule,
-    MatInputModule,
-    MatCheckboxModule,
-    MatToolbarModule,
-    MatButtonModule,
-    MatSidenavModule,
-    MatChipsModule,
-    MatIconModule,
-    MatListModule,
-    MatOptionModule,
-    MatSelectModule,
-    MatProgressSpinnerModule,
-    MatCardModule,
-    InfiniteScrollModule,
+    ContentaServiceModule,
+    SharedModule.forRoot(),
     RouterModule.forRoot([
-      { path: '',  pathMatch: 'full', redirectTo: 'recipes' },
+      { path: '', redirectTo: 'home', pathMatch: 'full' },
       { path: 'features', component: FeaturesComponent },
-      { path: 'recipes',  pathMatch: 'full', component: RecipesAndFiltersComponent },
-      { path: 'recipe/:id', component: RecipeDetailsComponent }
+      { path: 'home', loadChildren: './home/home.module#HomeModule' },
+      { path: 'recipes', loadChildren: './recipes/recipes.module#RecipesModule' }
     ]),
-
     StoreModule.forRoot(<any>{ app: appReducer }, { initialState }),
-
     EffectsModule.forRoot([
       RecipesEffects
     ]),
-
     StoreRouterConnectingModule
   ],
   providers: [
     Backend,
     RecipesEffects,
-    MatIconRegistry,
-    MaterialIconsService,
     ContentaDatastore,
     {
       provide: BASE_URL,

diff --git a/src/app/components/card/card.component.scss b/src/app/components/card/card.component.scss
diff --git a/src/app/components/header/_header-custom-theme.scss b/src/app/components/header/_header-custom-theme.scss
@@ -0,0 +1,7 @@
+// Custom mixin for the themed parts of this component.
+@mixin header-custom-theme($theme) {
+    $background: map-get($theme, "background");
+    .header-toolbar {
+        background-color: mat-color($background, "card");
+    }
+}
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar class="mat-elevation-z6" [color]="'primary'">
+<mat-toolbar class="header-toolbar mat-elevation-z6">
   <button class="sidenav-toggle" aria-label="Toggle Sidebar" (click)="toggleSidenav()">
       <mat-icon class="menu-icon" [svgIcon]="'sort'"></mat-icon>
   </button>
@@ -7,6 +7,6 @@
     <a [routerLink]="''" mat-button><mat-icon [svgIcon]="'umami-logo'"></mat-icon><span class="app-title">{{ title }}</span></a>
     <span class="spacer"></span>
     <a *ngFor="let menu_item of menu; let i = index" class="menu-item" mat-button [routerLink]="[menu_item.url]">{{ menu_item.name }}</a>
-    <a href="https://github.com/contentacms/contenta_angular" target="_blank" rel="noopener" mat-button class="github-logo"><img class="logo" src="/assets/github.png" alt="Github" title="Github"/>Github</a>
+    <a href="https://github.com/contentacms/contenta_angular" target="_blank" rel="noopener" mat-button class="menu-item">Github</a>
   </div>
 </mat-toolbar>
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
@@ -10,7 +10,6 @@
 .app-title {
     font-size: 13px;
     text-transform: uppercase;
-    color: white;
     @include breakpoint($narrow-devices) {
         display: none;
     }
@@ -35,9 +34,7 @@
     }
 }
 
-.menu-icon {
-    color: white;
-}
+.menu-icon {}
 
 .github-logo {
     img {

diff --git a/src/app/components/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts
@@ -1,3 +1,4 @@
+import { SharedModule } from './../../shared/shared.module';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
@@ -6,9 +7,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 /**
  * Test dependencies.
  */
-import { HttpModule } from '@angular/http';
-import { MatButtonModule, MatIconModule, MatIconRegistry, MatListModule, MatSidenavModule, MatToolbarModule } from '@angular/material';
-import { MaterialIconsService } from './../../services/material-icons/material-icons.service';
+import { HttpModule } from '@angular/http'; ;
 import { HeaderComponent } from './header.component';
 
 describe('HeaderComponent', () => {
@@ -20,15 +19,9 @@ describe('HeaderComponent', () => {
     TestBed.configureTestingModule({
       declarations: [HeaderComponent],
       imports: [
-        MatToolbarModule,
-        MatButtonModule,
-        MatIconModule,
+        SharedModule.forRoot(),
         HttpModule,
         RouterTestingModule.withRoutes([])
-      ],
-      providers: [
-        MatIconRegistry,
-        MaterialIconsService
       ]
     })
       .compileComponents();
@@ -63,8 +56,8 @@ describe('HeaderComponent', () => {
     expect(component.toggleSidebar.emit).toHaveBeenCalled();
   });
 
-  it('should render as much menu items as passed through input', () => {
+  it('should render as much menu items as passed through input + github link', () => {
     const elm = element.queryAll(By.css('.menu-item'));
-    expect(elm.length).toBe(2);
+    expect(elm.length).toBe(3);
   });
 });
diff --git a/src/app/components/recipe-details/recipe-details.component.html b/src/app/components/recipe-details/recipe-details.component.html
diff --git a/src/app/components/sidenav/sidenav.component.spec.ts b/src/app/components/sidenav/sidenav.component.spec.ts
@@ -1,3 +1,4 @@
+import { SharedModule } from './../../shared/shared.module';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
@@ -7,8 +8,6 @@ import { RouterTestingModule } from '@angular/router/testing';
  * Test dependencies.
  */
 import { HttpModule } from '@angular/http';
-import { MatButtonModule, MatIconModule, MatIconRegistry, MatListModule, MatSidenavModule, MatToolbarModule } from '@angular/material';
-import { MaterialIconsService } from './../../services/material-icons/material-icons.service';
 import { SidenavComponent } from './sidenav.component';
 
 describe('SidenavComponent', () => {
@@ -20,17 +19,9 @@ describe('SidenavComponent', () => {
     TestBed.configureTestingModule({
       declarations: [SidenavComponent],
       imports: [
-        MatToolbarModule,
-        MatButtonModule,
-        MatSidenavModule,
-        MatIconModule,
+        SharedModule.forRoot(),
         HttpModule,
-        MatListModule,
         RouterTestingModule.withRoutes([])
-      ],
-      providers: [
-        MatIconRegistry,
-        MaterialIconsService
       ]
     })
       .compileComponents();

diff --git a/src/app/home/components/home-banner/home-banner.component.html b/src/app/home/components/home-banner/home-banner.component.html
@@ -0,0 +1,40 @@
+<div class="home-banner-section">
+  <div class="home-banner__inner maxed-width">
+    <div class="magazine">
+      <img src="assets/magazine.png" alt="Umami magazine" title="Umami" />
+    </div>
+    <div class="cta-text">
+      <h2>
+        In this months issue
+      </h2>
+      <h3>
+        Lorem Ipsum is simply dummy text of the printing
+        <br/> and typesetting industry.
+      </h3>
+      <div class="home-banner__bullets">
+        <ul>
+          <li>
+            Comforting Winter puddins
+          </li>
+          <li>
+            Introduction to Iceland food
+          </li>
+          <li>
+            15 Healthy Meals under 500 Callories
+          </li>
+          <li>
+            Winter warmers
+          </li>
+          <li>
+            Are all sugards the same?
+          </li>
+          <li>
+            Profile on head chef Jeremy Watson
+          </li>
+        </ul>
+      </div>
+      <br/>
+      <button color="primary" mat-raised-button>More Umami</button>
+    </div>
+  </div>
+</div>