Merge pull request #14 from js2me/develop

Style changes, add title and description for every page
js2me · Jan 30, 2018 · d30a21d · d30a21d
2 parents 1dfec37 + bb0d12e
commit d30a21d
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 31 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,10 +1,35 @@
-import { Component } from '@angular/core';
+import {Component, Input, NgZone, OnInit} from '@angular/core';
+import {ActivatedRoute, ActivatedRouteSnapshot, ActivationEnd, NavigationEnd, Router} from '@angular/router';
+import {Meta, Title} from '@angular/platform-browser';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-  title = 'app';
+export class AppComponent implements OnInit {
+
+  constructor(private title: Title,
+              private meta: Meta,
+              private router: Router,
+              private ngZone: NgZone,
+              private activatedRoute: ActivatedRoute) {
+  }
+
+  ngOnInit(): void {
+    this.ngZone.runOutsideAngular(() => {
+      this.router.events.subscribe((event: any) => {
+        if (event instanceof ActivationEnd) {
+            this.ngZone.run(()=>{
+              this.title.setTitle(event.snapshot.data.title);
+              this.meta.updateTag({
+                name: 'description',
+                content: event.snapshot.data.description
+              });
+            });
+        }
+      })
+    });
+  }
+
 }
diff --git a/src/app/app.router.ts b/src/app/app.router.ts
@@ -6,22 +6,27 @@ import {environment} from '../environments/environment';
 export const AppRouter: ModuleWithProviders = RouterModule.forRoot([
   {
     path: '',
-    loadChildren: 'app/home/home.module#HomeModule'
+    loadChildren: 'app/home/home.module#HomeModule',
+    data: { title: 'Angular Example App', description: 'List of articles' }
   },
   {
     path: 'about',
-    loadChildren: 'app/about/about.module#AboutModule'
+    loadChildren: 'app/about/about.module#AboutModule',
+    data: { title: 'About page', description: 'How to use application and for whom has been created.' }
   },
   {
     path: 'login',
-    loadChildren: 'app/login/login.module#LoginModule'
+    loadChildren: 'app/login/login.module#LoginModule',
+    data: { title: 'Sign in', description: 'Sign in to application' }
   },
   {
     path: 'registration',
-    loadChildren: 'app/registration/registration.module#RegistrationModule'
+    loadChildren: 'app/registration/registration.module#RegistrationModule',
+    data: { title: 'Sign up', description: 'Sign up to application' }
   },
   {
     path: 'account',
-    loadChildren: 'app/account/account.module#AccountModule'
+    loadChildren: 'app/account/account.module#AccountModule',
+    data: { title: 'Account', description: 'Your account data' }
   }
 ]);
diff --git a/src/app/shared/layout/footer.component.ts b/src/app/shared/layout/footer.component.ts
@@ -10,7 +10,6 @@ export class FooterComponent {
   @HostBinding('class.show') showHideFooter: boolean = this.checkRouterUrlForShowFooter(this.router.url);
 
   constructor(private router: Router, private ngZone: NgZone) {
-    console.log(this.router);
     this.ngZone.runOutsideAngular(() => {
       this.router.events.subscribe((routerEvent: any) => {
         if (routerEvent instanceof NavigationEnd) {

diff --git a/src/app/shared/layout/header.component.html b/src/app/shared/layout/header.component.html
@@ -1,15 +1,18 @@
 <div class="layout-header-wrapper">
   <ngx-loading-bar id="ngx-loading-bar"></ngx-loading-bar>
-  <label class="app-name">My Angular App
+  <label class="app-name">
+    <span class="app-title" routerLink="/">
+      My Angular App
+    </span>
     <span class="user-fullname" *ngIf="isAuth">
     <span class="separator"></span>
-    <span routerLink="/account" class="user-short-info">
+    <span class="user-short-info">
       <user-photo [imageUrl]="user.image" [height]="'24px'" [width]="'24px'"></user-photo>
       {{user.username}}
     </span>
   </span>
   </label>
-  <div class="menu-button" id='menu-button'>
+  <div class="menu-button" id='menu-button' [class.red]="">
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 357 357" style="enable-background:new 0 0 357 357;" xml:space="preserve">
     <g>
       <g>

diff --git a/src/app/shared/layout/header.component.scss b/src/app/shared/layout/header.component.scss
@@ -45,6 +45,13 @@
     &:before{
         filter:grayscale(0%) contrast(142%);
     }
+    .menu{
+      a{
+        &.active{
+            background:$second-color;
+        }
+      }
+    }
   }
   .app-name {
     max-height: $header-height;
@@ -66,6 +73,7 @@
       color: $second-font-color;
       padding: 5px;
       cursor: pointer;
+      transition: all 250ms linear;
       &.logout {
         color: $menu-logout-link-color;
       }
@@ -78,8 +86,9 @@
     }
 
   }
-  .user-short-info{
+  .app-title{
     outline: none;
+    cursor: pointer;
   }
 
 

diff --git a/src/index.html b/src/index.html
@@ -4,12 +4,12 @@
   <meta charset="utf-8">
   <title>My Angular App</title>
   <base href="/">
+  <meta name="description" content="Angular application for learning TS, Jasmine, Angular">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <a href="https://github.com/js2me/ng-example-app" class="fork-me-on-github"></a>
   <app-root></app-root>
 </body>
 </html>
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
@@ -1,5 +1,5 @@
-$main-color: #6773b0;
-$second-color: #59659e;
+$main-color: rgb(59, 71, 99);
+$second-color: rgb(43, 55, 82);
 $third-color: rgb(44, 53, 101);
 
 $common-color1: rgba(227, 227, 227, 1); //second color of gradient layout-header and layout-footer elements

diff --git a/src/sass/forms.scss b/src/sass/forms.scss
@@ -2,7 +2,8 @@
 @import "~sass/mixins";
 
 .form{
-  width: 346px;
+  width: auto;
+  max-width: 346px;
   margin: auto;
   display: flex;
   flex-direction: column;

diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -9,19 +9,6 @@ body, html {
 }
 
 
-
-.fork-me-on-github{
-  position: fixed;
-  top: 0;
-  left: 0;
-  border: 0;
-  width: 149px;
-  height: 149px;
-  background-size: cover;
-  background-image: url(../assets/fork-me-github.png);
-}
-
-
 body {
   font-family: $default-font-family;
   color: $font-color;
@@ -75,7 +62,9 @@ button.close {
       margin-bottom: 24px;
       span {
         font-size: 26px;
-        background: $main-color;
+        background: url(../assets/background-header.jpg);
+        background-position-y: top;
+        background-position-x: left;
         color: $second-font-color;
         padding: 2px 5px;
         text-shadow: 0 0px 2px, 0 2px 6px rgba(0, 0, 0, 0.41);;