layout is modified

angular.json

@@ -170,44 +170,6 @@
         }
       }
     },
-    "odds-crawler-frontend-layout": {
-      "root": "projects/odds-crawler-frontend-layout",
-      "sourceRoot": "projects/odds-crawler-frontend-layout/src",
-      "projectType": "library",
-      "prefix": "odds-crawler-layout",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
-          "options": {
-            "tsConfig": "projects/odds-crawler-frontend-layout/tsconfig.lib.json",
-            "project": "projects/odds-crawler-frontend-layout/ng-package.json"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "projects/odds-crawler-frontend-layout/src/test.ts",
-            "tsConfig": "projects/odds-crawler-frontend-layout/tsconfig.spec.json",
-            "karmaConfig": "projects/odds-crawler-frontend-layout/karma.conf.js"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/odds-crawler-frontend-layout/tsconfig.lib.json",
-              "projects/odds-crawler-frontend-layout/tsconfig.spec.json"
-            ],
-            "exclude": ["**/node_modules/**"]
-          }
-        }
-      }
-    },
     "odds-crawler-frontend-network": {
       "root": "projects/odds-crawler-frontend-network",
       "sourceRoot": "projects/odds-crawler-frontend-network/src",
@@ -245,6 +207,44 @@
           }
         }
       }
+    },
+    "odds-crawler-frontend-page": {
+      "root": "projects/odds-crawler-frontend-page",
+      "sourceRoot": "projects/odds-crawler-frontend-page/src",
+      "projectType": "library",
+      "prefix": "odds-crawler-page",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/odds-crawler-frontend-page/tsconfig.lib.json",
+            "project": "projects/odds-crawler-frontend-page/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/odds-crawler-frontend-page/src/test.ts",
+            "tsConfig": "projects/odds-crawler-frontend-page/tsconfig.spec.json",
+            "karmaConfig": "projects/odds-crawler-frontend-page/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/odds-crawler-frontend-page/tsconfig.lib.json",
+              "projects/odds-crawler-frontend-page/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
     }
   },
   "defaultProject": "odds-crawler-frontend-app"

package.json

@@ -7,11 +7,11 @@
     "build": "ng build",
     "build:app:electron": "ng build ---baseHref=./ --outputPath=../dist/odds-crawler-frontend-app",
     "build:library": "ng build odds-crawler-frontend-common && npm-run-all -s build:library:*",
-    "build:library:layout": "ng build odds-crawler-frontend-layout",
     "build:library:network": "ng build odds-crawler-frontend-network",
+    "build:library:page": "ng build odds-crawler-frontend-page",
     "build:watch:library": "npm-run-all -p build:watch:library:*",
-    "build:watch:library:layout": "ng build odds-crawler-frontend-layout --watch",
     "build:watch:library:network": "ng build odds-crawler-frontend-network --watch",
+    "build:watch:library:page": "ng build odds-crawler-frontend-page --watch",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"

projects/odds-crawler-frontend-app/src/app/app.module.ts

@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { OddsCrawlerFrontendCommonModule } from '@odds-crawler/common';
-import { OddsCrawlerFrontendLayoutModule } from '@odds-crawler/layout';
+import { OddsCrawlerFrontendPageModule } from '@odds-crawler/page';
 import { OddsCrawlerFrontendNetworkModule } from '@odds-crawler/network';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -16,7 +16,7 @@ import { AppComponent } from './app.component';
     BrowserModule,
     BrowserAnimationsModule,
     OddsCrawlerFrontendCommonModule.forRoot(),
-    OddsCrawlerFrontendLayoutModule.forRoot(),
+    OddsCrawlerFrontendPageModule.forRoot(),
     OddsCrawlerFrontendNetworkModule.forRoot(),
     AppRoutingModule,
     AppStoreModule

projects/odds-crawler-frontend-app/src/app/page/main/component/main.page.component.html

@@ -1,15 +1,80 @@
-<mat-tab-group
+<div class="page-main">
-  *ngIf="tabs"
+  <div class="page-main-gnb">
-  [selectedIndex]="tabSelectedIndex"
+    <span>
-  (selectedIndexChange)="onTabSelectedIndexChange($event)"
+      <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+      <mat-menu #afterMenu="matMenu" xPosition="after">
+        <button mat-menu-item>Item 1</button>
+        <button mat-menu-item>Item 2</button>
+      </mat-menu>
+      <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+      <mat-menu #afterMenu="matMenu" xPosition="after">
+        <button mat-menu-item>Item 1</button>
+        <button mat-menu-item>Item 2</button>
+      </mat-menu>
+      <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+      <mat-menu #afterMenu="matMenu" xPosition="after">
+        <button mat-menu-item>Item 1</button>
+        <button mat-menu-item>Item 2</button>
+      </mat-menu>
+      <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+      <mat-menu #afterMenu="matMenu" xPosition="after">
+        <button mat-menu-item>Item 1</button>
+        <button mat-menu-item>Item 2</button>
+      </mat-menu>
+      <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+      <mat-menu #afterMenu="matMenu" xPosition="after">
+        <button mat-menu-item>Item 1</button>
+        <button mat-menu-item>Item 2</button>
+      </mat-menu>
+      <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+      <mat-menu #afterMenu="matMenu" xPosition="after">
+        <button mat-menu-item>Item 1</button>
+        <button mat-menu-item>Item 2</button>
+      </mat-menu>
+    </span>
+    <span>
+      <form class="page-main-gnb-form">
+        <mat-form-field class="example-form-field">
+          <input matInput #tabURL type="text" placeholder="Clearable input" />
+          <button mat-button matSuffix mat-icon-button aria-label="Clear">
+            <mat-icon>close</mat-icon>
+          </button>
+        </mat-form-field>
+      </form>
+      <button mat-icon-button (click)="onClickNewTab(tabURL)">
+        <mat-icon>tab</mat-icon>
+      </button>
+    </span>
+  </div>
+  <div class="page-main-body">
+    <mat-sidenav-container class="page-main-lnb-sidenav-container">
+      <mat-sidenav
+        [mode]="'side'"
+        [(opened)]="lnbSideNavOpened"
+        class="page-main-lnb-sidenav"
       >
-  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
+        <div class="page-main-lnb">
-    <mat-tab-group>
+          <odds-crawler-page-preview-list
+            (selectPage)="onSelectPage($event)"
+          ></odds-crawler-page-preview-list>
+        </div>
+      </mat-sidenav>
+
+      <mat-sidenav-content>
+        <div class="page-main-page">
+          <mat-tab-group class="page-main-page-tab-group">
             <mat-tab label="Network">
-        <ng-template matTabContent>
               <odds-crawler-network-main></odds-crawler-network-main>
-        </ng-template>
+            </mat-tab>
-      </mat-tab>
+            <mat-tab label="Diagram">
-    </mat-tab-group>
+              Content 2
+            </mat-tab>
+            <mat-tab label="Data">
+              Content 3
             </mat-tab>
           </mat-tab-group>
+        </div>
+      </mat-sidenav-content>
+    </mat-sidenav-container>
+  </div>
+</div>

projects/odds-crawler-frontend-app/src/app/page/main/component/main.page.component.scss

@@ -0,0 +1,46 @@
+.page-main {
+  // padding: 0;
+  // margin: 0;
+  // width: 100%;
+  // height: 100vh;
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+
+.page-main-gnb {
+  height: 50px;
+}
+
+.page-main-gnb-form {
+  display: inherit;
+  flex-flow: inherit;
+  align-items: center;
+}
+
+.page-main-body {
+  flex-grow: 1;
+}
+
+.page-main-lnb {
+  width: 100%;
+  height: inherit;
+}
+
+.page-main-lnb-sidenav-container {
+  width: 100%;
+  height: 100%;
+}
+
+.page-main-lnb-sidenav {
+  width: 250px;
+  height: 100%;
+}
+
+.page-main-page {
+  height: 100%;
+}
+
+.page-main-page-tab-group {
+  height: 100%;
+}

projects/odds-crawler-frontend-app/src/app/page/main/component/main.page.component.ts

@@ -8,6 +8,7 @@ import { Component } from '@angular/core';
 export class MainPageComponent {
   tabs: string[] = [];
   tabSelectedIndex: 0;
+  lnbSideNavOpened = true;
 
   onClickAddTab($event) {
     this.addTab('new');
@@ -23,4 +24,6 @@ export class MainPageComponent {
     const index = this.tabs.indexOf(title);
     this.tabs.splice(index, 1);
   }
+
+  onSelectPage(page: string) {}
 }

projects/odds-crawler-frontend-app/src/app/page/main/main-routing.page.module.ts

@@ -1,21 +1,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { MainLayoutComponent } from '@odds-crawler/layout';
-
 import { MainPageComponent } from './component/main.page.component';
 
 const routes: Routes = [
-  {
-    path: '',
-    component: MainLayoutComponent,
-    children: [
   {
     path: '',
     component: MainPageComponent
   }
-    ]
-  }
 ];
 
 @NgModule({

projects/odds-crawler-frontend-app/src/app/page/main/main.page.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { OddsCrawlerFrontendCommonModule } from '@odds-crawler/common';
-import { OddsCrawlerFrontendLayoutModule } from '@odds-crawler/layout';
+import { OddsCrawlerFrontendPageModule } from '@odds-crawler/page';
 import { OddsCrawlerFrontendNetworkModule } from '@odds-crawler/network';
 
 import { COMPONENTS } from './component';
@@ -12,7 +12,7 @@ import { MainRoutingPageModule } from './main-routing.page.module';
   imports: [
     CommonModule,
     OddsCrawlerFrontendCommonModule,
-    OddsCrawlerFrontendLayoutModule,
+    OddsCrawlerFrontendPageModule,
     OddsCrawlerFrontendNetworkModule,
     MainRoutingPageModule
   ],

projects/odds-crawler-frontend-app/src/styles.scss

@@ -34,6 +34,8 @@ $odds-crawler-frontend-app-theme: mat-light-theme(
 html,
 body {
   height: 100%;
+  width: 100%;
+  margin: 0;
 }
 body {
   margin: 0;

projects/odds-crawler-frontend-layout/README.md

@@ -1,24 +0,0 @@
-# OddsCrawlerFrontendLayout
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project odds-crawler-frontend-layout` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project odds-crawler-frontend-layout`.
-> Note: Don't forget to add `--project odds-crawler-frontend-layout` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build odds-crawler-frontend-layout` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build odds-crawler-frontend-layout`, go to the dist folder `cd dist/odds-crawler-frontend-layout` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test odds-crawler-frontend-layout` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

projects/odds-crawler-frontend-layout/src/lib/component/default-layout.component.html

@@ -1 +0,0 @@
-<div></div>

projects/odds-crawler-frontend-layout/src/lib/component/default-layout.component.ts

@@ -1,12 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'odds-crawler-layout-default',
-  templateUrl: './default-layout.component.html',
-  styles: ['./default-layout.component.scss']
-})
-export class DefaultLayoutComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}

projects/odds-crawler-frontend-layout/src/lib/component/main-layout.component.html

@@ -1,50 +0,0 @@
-<div class="gnb-menu">
-  <span>
-    <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
-    <mat-menu #afterMenu="matMenu" xPosition="after">
-      <button mat-menu-item>Item 1</button>
-      <button mat-menu-item>Item 2</button>
-    </mat-menu>
-    <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
-    <mat-menu #afterMenu="matMenu" xPosition="after">
-      <button mat-menu-item>Item 1</button>
-      <button mat-menu-item>Item 2</button>
-    </mat-menu>
-    <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
-    <mat-menu #afterMenu="matMenu" xPosition="after">
-      <button mat-menu-item>Item 1</button>
-      <button mat-menu-item>Item 2</button>
-    </mat-menu>
-    <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
-    <mat-menu #afterMenu="matMenu" xPosition="after">
-      <button mat-menu-item>Item 1</button>
-      <button mat-menu-item>Item 2</button>
-    </mat-menu>
-    <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
-    <mat-menu #afterMenu="matMenu" xPosition="after">
-      <button mat-menu-item>Item 1</button>
-      <button mat-menu-item>Item 2</button>
-    </mat-menu>
-    <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
-    <mat-menu #afterMenu="matMenu" xPosition="after">
-      <button mat-menu-item>Item 1</button>
-      <button mat-menu-item>Item 2</button>
-    </mat-menu>
-  </span>
-  <span>
-    <form class="form-inline">
-      <mat-form-field class="example-form-field">
-        <input matInput #tabURL type="text" placeholder="Clearable input" />
-        <button mat-button matSuffix mat-icon-button aria-label="Clear">
-          <mat-icon>close</mat-icon>
-        </button>
-      </mat-form-field>
-    </form>
-    <button mat-icon-button (click)="onClickNewTab(tabURL)">
-      <mat-icon>tab</mat-icon>
-    </button>
-  </span>
-</div>
-<div>
-  <router-outlet></router-outlet>
-</div>

projects/odds-crawler-frontend-layout/src/lib/component/main-layout.component.scss

@@ -1,9 +0,0 @@
-.gnb-menu {
-  height: 50px;
-}
-
-.form-inline {
-  display: inherit;
-  flex-flow: inherit;
-  align-items: center;
-}

projects/odds-crawler-frontend-layout/src/lib/component/main-layout.component.ts

@@ -1,19 +0,0 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'odds-crawler-layout-main',
-  templateUrl: './main-layout.component.html',
-  styleUrls: ['./main-layout.component.scss']
-})
-export class MainLayoutComponent implements OnInit {
-  @Output()
-  openNewTab = new EventEmitter<string>();
-
-  constructor() {}
-
-  ngOnInit() {}
-
-  onClickNewTab(tabURL: HTMLInputElement) {
-    this.openNewTab.emit(tabURL.value);
-  }
-}

projects/odds-crawler-frontend-layout/src/lib/layout.module.ts

@@ -1,36 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { RouterModule } from '@angular/router';
-
-import { OddsCrawlerFrontendCommonModule } from '@odds-crawler/common';
-
-import { DefaultLayoutComponent } from './component/default-layout.component';
-import { MainLayoutComponent } from './component/main-layout.component';
-
-import { LayoutService } from './service/layout.service';
-
-export const COMPONENTS = [DefaultLayoutComponent, MainLayoutComponent];
-export const SERVICES = [LayoutService];
-
-@NgModule({
-  declarations: [...COMPONENTS],
-  imports: [CommonModule, RouterModule, OddsCrawlerFrontendCommonModule],
-  exports: [...COMPONENTS]
-})
-export class OddsCrawlerFrontendLayoutModule {
-  public static forRoot(): ModuleWithProviders<
-    OddsCrawlerFrontendLayoutRootModule
-  > {
-    return {
-      ngModule: OddsCrawlerFrontendLayoutRootModule,
-      providers: [LayoutService]
-    };
-  }
-}
-
-@NgModule({
-  imports: [],
-  exports: []
-})
-export class OddsCrawlerFrontendLayoutRootModule {}

projects/odds-crawler-frontend-layout/src/public-api.ts

@@ -1,8 +0,0 @@
-/*
- * Public API Surface of odds-crawler-frontend-layout
- */
-
-export * from './lib/service/layout.service';
-export * from './lib/component/default-layout.component';
-export * from './lib/component/main-layout.component';
-export * from './lib/layout.module';

projects/odds-crawler-frontend-page/README.md

@@ -0,0 +1,24 @@
+# OddsCrawlerFrontendPage
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project odds-crawler-frontend-page` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project odds-crawler-frontend-page`.
+> Note: Don't forget to add `--project odds-crawler-frontend-page` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build odds-crawler-frontend-page` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build odds-crawler-frontend-page`, go to the dist folder `cd dist/odds-crawler-frontend-page` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test odds-crawler-frontend-page` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

projects/odds-crawler-frontend-page/karma.conf.js

@@ -16,7 +16,7 @@ module.exports = function (config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../../coverage/odds-crawler-frontend-layout'),
+      dir: require('path').join(__dirname, '../../coverage/odds-crawler-frontend-page'),
       reports: ['html', 'lcovonly'],
       fixWebpackSourcePaths: true
     },

projects/odds-crawler-frontend-page/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/odds-crawler-frontend-layout",
+  "dest": "../../dist/odds-crawler-frontend-page",
   "lib": {
     "entryFile": "src/public-api.ts"
   }

projects/odds-crawler-frontend-page/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@odds-crawler/layout",
+  "name": "@odds-crawler/page",
   "version": "0.0.1",
   "peerDependencies": {
     "@angular/common": "^7.2.0",

projects/odds-crawler-frontend-page/src/lib/component/preview-list.component.html

@@ -0,0 +1,23 @@
+<div class="page-preview-list">
+  <mat-list role="list">
+    <mat-list-item
+      role="listitem"
+      class="page-preview-list-item"
+      (click)="onClickPage($event)"
+    >
+      <odds-crawler-page-preview
+        class="page-preview-list-item"
+      ></odds-crawler-page-preview>
+    </mat-list-item>
+    <mat-list-item role="listitem">
+      <odds-crawler-page-preview
+        class="page-preview-list-item"
+      ></odds-crawler-page-preview>
+    </mat-list-item>
+    <mat-list-item role="listitem">
+      <odds-crawler-page-preview
+        class="page-preview-list-item"
+      ></odds-crawler-page-preview>
+    </mat-list-item>
+  </mat-list>
+</div>

projects/odds-crawler-frontend-page/src/lib/component/preview-list.component.scss

@@ -0,0 +1,20 @@
+:host {
+  width: 100%;
+}
+
+.page-preview-list {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.page-preview-list-item {
+  cursor: pointer;
+  height: auto;
+}
+
+.mat-list .mat-list-item {
+  height: auto; /* default is 72px */
+  padding-bottom: 20px;
+}

projects/odds-crawler-frontend-page/src/lib/component/preview-list.component.spec.ts

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { DefaultLayoutComponent } from './default-layout.component';
+import { PreviewListComponent } from './preview-list.component';
 
-describe('DefaultLayoutComponent', () => {
+describe('page.PreviewListComponent', () => {
-  let component: DefaultLayoutComponent;
+  let component: PreviewListComponent;
-  let fixture: ComponentFixture<DefaultLayoutComponent>;
+  let fixture: ComponentFixture<PreviewListComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [DefaultLayoutComponent]
+      declarations: [PreviewListComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DefaultLayoutComponent);
+    fixture = TestBed.createComponent(PreviewListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

projects/odds-crawler-frontend-page/src/lib/component/preview-list.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'odds-crawler-page-preview-list',
+  templateUrl: './preview-list.component.html',
+  styleUrls: ['./preview-list.component.scss']
+})
+export class PreviewListComponent implements OnInit {
+  @Output()
+  selectPage = new EventEmitter<string>();
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  onClickPage(event: MouseEvent) {
+    console.log('ddddd' + event);
+  }
+}

projects/odds-crawler-frontend-page/src/lib/component/preview.component.html

@@ -0,0 +1,10 @@
+<div class="page-preview">
+  <mat-card class="page-preview-card">
+    <img
+      mat-card-image
+      src="https://material.angular.io/assets/img/examples/shiba2.jpg"
+      alt="Photo of a Shiba Inu"
+    />
+    <mat-card-footer>material</mat-card-footer>
+  </mat-card>
+</div>

projects/odds-crawler-frontend-page/src/lib/component/preview.component.scss

@@ -0,0 +1,14 @@
+:host {
+  position: inherit;
+  width: 100%;
+}
+
+.page-preview {
+  position: relative;
+  display: contents;
+  width: 100px;
+}
+
+.page-preview-card {
+  max-width: 400px;
+}

projects/odds-crawler-frontend-page/src/lib/component/preview.component.spec.ts

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MainLayoutComponent } from './main-layout.component';
+import { PreviewComponent } from './preview.component';
 
-describe('layout.MainLayoutComponent', () => {
+describe('page.PreviewComponent', () => {
-  let component: MainLayoutComponent;
+  let component: PreviewComponent;
-  let fixture: ComponentFixture<MainLayoutComponent>;
+  let fixture: ComponentFixture<PreviewComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [MainLayoutComponent]
+      declarations: [PreviewComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(MainLayoutComponent);
+    fixture = TestBed.createComponent(PreviewComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

projects/odds-crawler-frontend-page/src/lib/component/preview.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'odds-crawler-page-preview',
+  templateUrl: './preview.component.html',
+  styleUrls: ['./preview.component.scss']
+})
+export class PreviewComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

projects/odds-crawler-frontend-page/src/lib/page.module.ts

@@ -0,0 +1,37 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { RouterModule } from '@angular/router';
+
+import { OddsCrawlerFrontendCommonModule } from '@odds-crawler/common';
+
+import { PreviewComponent } from './component/preview.component';
+import { PreviewListComponent } from './component/preview-list.component';
+
+import { PageService } from './service/page.service';
+
+export const COMPONENTS = [PreviewComponent, PreviewListComponent];
+
+export const SERVICES = [PageService];
+
+@NgModule({
+  declarations: [...COMPONENTS],
+  imports: [CommonModule, RouterModule, OddsCrawlerFrontendCommonModule],
+  exports: [...COMPONENTS]
+})
+export class OddsCrawlerFrontendPageModule {
+  public static forRoot(): ModuleWithProviders<
+    OddsCrawlerFrontendPageRootModule
+  > {
+    return {
+      ngModule: OddsCrawlerFrontendPageRootModule,
+      providers: [...SERVICES]
+    };
+  }
+}
+
+@NgModule({
+  imports: [],
+  exports: []
+})
+export class OddsCrawlerFrontendPageRootModule {}

projects/odds-crawler-frontend-page/src/lib/service/page.service.spec.ts

@@ -1,12 +1,12 @@
 import { TestBed } from '@angular/core/testing';
 
-import { LayoutService } from './layout.service';
+import { PageService } from './page.service';
 
-describe('LayoutService', () => {
+describe('PageService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
 
   it('should be created', () => {
-    const service: LayoutService = TestBed.get(LayoutService);
+    const service: PageService = TestBed.get(PageService);
     expect(service).toBeTruthy();
   });
 });

projects/odds-crawler-frontend-page/src/lib/service/page.service.ts

@@ -3,6 +3,6 @@ import { Injectable } from '@angular/core';
 @Injectable({
   providedIn: 'root'
 })
-export class LayoutService {
+export class PageService {
   constructor() {}
 }

projects/odds-crawler-frontend-page/src/public-api.ts

@@ -0,0 +1,10 @@
+/*
+ * Public API Surface of odds-crawler-frontend-page
+ */
+
+export * from './lib/page.module';
+
+export * from './lib/component/preview.component';
+export * from './lib/component/preview-list.component';
+
+export * from './lib/service/page.service';

projects/odds-crawler-frontend-page/tslint.json

@@ -4,13 +4,13 @@
     "directive-selector": [
       true,
       "attribute",
-      "oddsCrawlerLayout",
+      "oddsCrawlerPage",
       "camelCase"
     ],
     "component-selector": [
       true,
       "element",
-      "odds-crawler-layout",
+      "odds-crawler-page",
       "kebab-case"
     ]
   }

tsconfig.json

@@ -15,8 +15,8 @@
     "lib": ["es2018", "dom"],
     "paths": {
       "@odds-crawler/common": ["dist/odds-crawler-frontend-common"],
-      "@odds-crawler/layout": ["dist/odds-crawler-frontend-layout"],
+      "@odds-crawler/network": ["dist/odds-crawler-frontend-network"],
-      "@odds-crawler/network": ["dist/odds-crawler-frontend-network"]
+      "@odds-crawler/page": ["dist/odds-crawler-frontend-page"]
     }
   }
 }