Merge branch 'layout' into 'development'

Layout

See merge request Works.Al-Mokhtar/shared/dotnet-validator-docs!1

Author: FawzyMokhtar

angular.json

@@ -51,9 +51,11 @@
             "aot": false,
             "assets": [
               "src/favicon.ico",
+              "src/favicon.svg",
               "src/assets"
             ],
             "styles": [
+              "node_modules/font-awesome/scss/font-awesome.scss",
               "src/styles/styles.scss"
             ],
             "scripts": []
@@ -116,9 +118,11 @@
             "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
+              "src/favicon.svg",
               "src/assets"
             ],
             "styles": [
+              "node_modules/font-awesome/scss/font-awesome.scss",
               "src/styles/styles.scss"
             ],
             "scripts": []
@@ -153,4 +157,4 @@
     }
   },
   "defaultProject": "documentation-website"
-}
+}

e2e/src/app.e2e-spec.ts

@@ -1,16 +1,16 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
+import { AppPage } from "./app.po";
+import { browser, logging } from "protractor";
 
-describe('workspace-project App', () => {
+describe("workspace-project App", () => {
   let page: AppPage;
 
   beforeEach(() => {
     page = new AppPage();
   });
 
-  it('should display welcome message', () => {
+  it("should display welcome message", () => {
     page.navigateTo();
-    expect(page.getTitleText()).toEqual('Welcome to documentation-website!');
+    expect(page.getTitleText()).toEqual("Welcome to documentation-website!");
   });
 
   afterEach(async () => {

e2e/src/app.po.ts

@@ -1,11 +1,11 @@
-import { browser, by, element } from 'protractor';
+import { browser, by, element } from "protractor";
 
 export class AppPage {
-  navigateTo() {
+  public navigateTo() {
     return browser.get(browser.baseUrl) as Promise<any>;
   }
 
-  getTitleText() {
-    return element(by.css('app-root h1')).getText() as Promise<string>;
+  public getTitleText() {
+    return element(by.css("app-root h1")).getText() as Promise<string>;
   }
 }

package.json

@@ -20,7 +20,9 @@
     "@angular/forms": "~8.2.0",
     "@angular/platform-browser": "~8.2.0",
     "@angular/platform-browser-dynamic": "~8.2.0",
-    "@angular/router": "~8.2.0",
+    "@angular/router": "^8.2.0",
+    "bootstrap": "^4.3.1",
+    "font-awesome": "^4.7.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"
@@ -30,9 +32,9 @@
     "@angular/cli": "~8.2.0",
     "@angular/compiler-cli": "~8.2.0",
     "@angular/language-service": "~8.2.0",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
@@ -46,4 +48,4 @@
     "tslint": "~5.15.0",
     "typescript": "~3.5.3"
   }
-}
+}

src/app/main/components/footer/footer.component.html

@@ -0,0 +1,34 @@
+<div class="row footer">
+    <div class="col-12 footer-links">
+        <nav class="navbar">
+            <div class="nav-item">
+                <span class="nav-link section-title">Docs</span>
+                <a routerLink="/" class="nav-link">
+                    <i class="fa fa-play-circle-o"></i>
+                    Getting Started
+                </a>
+            </div>
+            <div class="nav-item">
+                <span class="nav-link section-title">Community</span>
+                <a routerLink="/" class="nav-link">
+                    <i class="fa fa-stack-overflow"></i>
+                    Stack Overflow
+                </a>
+            </div>
+            <div class="nav-item">
+                <span class="nav-link section-title">More</span>
+                <a routerLink="/" class="nav-link">
+                    <i class="fa fa-github"></i>
+                    GitHub
+                </a>
+                <a routerLink="/" class="nav-link">
+                    <i class="fa fa-download"></i>
+                    Nuget
+                </a>
+            </div>
+        </nav>
+    </div>
+    <div class="col-12 footer-copy-right">
+        Copyright &copy; {{year}} DotNet Validator
+    </div>
+</div>

src/app/main/components/footer/footer.component.sass

@@ -0,0 +1,11 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-footer",
+  templateUrl: "./footer.component.html",
+  styleUrls: ["./footer.component.sass"]
+})
+export class FooterComponent {
+
+  year: number = new Date().getFullYear();
+}

src/app/main/components/footer/footer.component.ts

@@ -0,0 +1,15 @@
+import { TopNavComponent } from "../components/top-nav/top-nav.component";
+import { SideNavComponent } from "../components/side-nav/side-nav.component";
+import { PostComponent } from "../components/post/post.component";
+import { NavigatorComponent } from "../components/navigator/navigator.component";
+import { SectionNavComponent } from "../components/section-nav/section-nav.component";
+import { FooterComponent } from "../components/footer/footer.component";
+
+export const COMPONENTS: any[] = [
+    TopNavComponent,
+    SideNavComponent,
+    PostComponent,
+    NavigatorComponent,
+    SectionNavComponent,
+    FooterComponent
+];

src/app/main/components/index.ts

@@ -0,0 +1,10 @@
+<div class="doc-prev-next">
+    <a class="doc-prev button" routerLink="/">
+        <span>← </span>
+        <span>Previous</span>
+    </a>
+    <a class="doc-next button" routerLink="/">
+        <span>Next</span>
+        <span> →</span>
+    </a>
+</div>