From b2d5da1262b295ee97f9848b3e85bceeaf3b40e6 Mon Sep 17 00:00:00 2001
From: Gabor PEK <gabor.pek@avatao.com>
Date: Mon, 5 Mar 2018 16:25:44 +0100
Subject: [PATCH] Grid logo and title is centered using grid layout

---
 src/app/dashboard/dashboard.component.scss |  20 ++++
 src/app/header/header.component.html       |  19 ++--
 src/app/header/header.component.scss       | 103 +++++++++++++++------
 src/assets/images/favicon.ico              | Bin 5430 -> 1633 bytes
 src/assets/scss/_grid.scss                 |  44 +++++++++
 src/assets/scss/_main.scss                 |   4 +-
 src/assets/scss/_variables.scss            |   2 +-
 7 files changed, 154 insertions(+), 38 deletions(-)
 mode change 100644 => 100755 src/assets/images/favicon.ico
 create mode 100644 src/assets/scss/_grid.scss

diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index 9d68c22..4a5b9de 100644
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -1,5 +1,25 @@
+//
+// Spaces
+//
+
+$space: 24px;
+
+$sxlarge: 9 * $space;
+$xxxlarge: 6 * $space;
+$xxlarge: 4 * $space;
+$xlarge: 2 * $space;
+$large: 1.5 * $space;
+$medium: $space;
+$small: 0.75 * $space;
+$tiny: 0.5 * $space;
+$hair: 0.25 * $space;
+$nano: 0.125 * $space;
+
+$tao-navbar-height: 67px;
+
 .tfw-first-row {
   height: 40vh;
+  margin-top: $tao-navbar-height + $space;
 }
 
 .tfw-second-row {}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index b96b5f7..01e7202 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,8 +1,11 @@
-<div class="jumbotron text-center">
-  <h1>Tutorial framework Demo</h1>
-  <h3>
-    Powered by Angular
-    <img class="logo" width="36" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-  </h3>
-</div>
-
+<nav class="navbar navbar-default navbar-expand-md navbar-light tao-navbar fixed-top">
+  <div class="tao-grid-navbar">
+    <ul class="navbar-nav tao-grid-center-right">
+      <li class="nav-item tao-header-title">an</li>
+    </ul>
+    <img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-center tao-company-logo" alt="">
+    <ul class="navbar-nav tao-grid-center-left">
+      <li class="nav-item tao-header-title">tutorial</li>
+    </ul>
+  </div>
+</nav>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 1920a5b..299f9d4 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,33 +1,80 @@
-@keyframes heartbeat
-{
-  0%
-  {
-    transform: scale( .75 );
-  }
-  20%
-  {
-    transform: scale( 1 );
-  }
-  40%
-  {
-    transform: scale( .75 );
-  }
-  60%
-  {
-    transform: scale( 1 );
-  }
-  80%
-  {
-    transform: scale( .75 );
-  }
-  100%
-  {
-    transform: scale( .75 );
-  }
+// Variables
+
+//
+// Spaces
+//
+$space: 24px;
+
+$sxlarge: 9 * $space;
+$xxxlarge: 6 * $space;
+$xxlarge: 4 * $space;
+$xlarge: 2 * $space;
+$large: 1.5 * $space;
+$medium: $space;
+$small: 0.75 * $space;
+$tiny: 0.5 * $space;
+$hair: 0.25 * $space;
+$nano: 0.125 * $space;
+
+//
+// Misc
+//
+$tao-blue-500: #277EEC;
+$font-size-base: 14px;
+$font-size-h4: floor(($font-size-base * 1.2));
+
+$tao-navbar-height: 67px;
+
+
+//
+// Classes
+//
+.tao-header-title {
+  color: $tao-blue-500;
+  font-size: $font-size-h4;
 }
 
-.logo {
-  animation: heartbeat 1s infinite;
+.tao-navbar {
+  background-color: rgba(255, 255, 255, 0.96);
+  min-height: $tao-navbar-height;
+  box-shadow: 0px 1px 6px 0px #888;
+  margin-bottom: 12px;
+  border: 1px solid #e7e7e7;
+}
+
+.tao-grid-navbar {
+  display: grid;
+  grid-template-columns: 10fr 1fr 10fr;
+  grid-column-gap: 8px;
+  width: 100%;
+}
+
+.tao-company-logo {
+  display: block;
+  width: 130px;
+}
+
+.tao-company-logo-mobile {
+  display: none;
+  width: 130px;
+}
+
+@media (max-width: 767px) {
+  .tao-grid-navbar {
+    grid-template-columns: 1fr;
+  }
+
+  .tao-company-logo {
+    display: none;
+  }
+
+  .tao-company-logo-mobile {
+    display: block;
+  }
+
+  .tao-navbar-links {
+    justify-self: left !important;
+  }
 }
 
 .jumbotron {
diff --git a/src/assets/images/favicon.ico b/src/assets/images/favicon.ico
old mode 100644
new mode 100755
index 8081c7ceaf2be08bf59010158c586170d9d2d517..2971e83b49e7326c28bb7ecfba02cabee3fbd54f
GIT binary patch
literal 1633
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

literal 5430
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

diff --git a/src/assets/scss/_grid.scss b/src/assets/scss/_grid.scss
new file mode 100644
index 0000000..9ec01a4
--- /dev/null
+++ b/src/assets/scss/_grid.scss
@@ -0,0 +1,44 @@
+.tao-grid-center-center {
+  justify-self: center;
+  align-self: center;
+}
+
+.tao-grid-center-right {
+  justify-self: right;
+  align-self: center;
+}
+
+.tao-grid-center-left {
+  justify-self: left;
+  align-self: center;
+}
+
+.tao-grid-start-center {
+  justify-self: center;
+  align-self: start;
+}
+
+.tao-grid-end-center {
+  justify-self: center;
+  align-self: end;
+}
+
+.tao-grid-top-right {
+  justify-self: right;
+  align-self: start;
+}
+
+.tao-grid-top-left {
+  justify-self: left;
+  align-self: start;
+}
+
+.tao-grid-bottom-left {
+  justify-self: left;
+  align-self: end;
+}
+
+.tao-grid-bottom-right {
+  justify-self: right;
+  align-self: end;
+}
diff --git a/src/assets/scss/_main.scss b/src/assets/scss/_main.scss
index c63ec31..abc22dc 100644
--- a/src/assets/scss/_main.scss
+++ b/src/assets/scss/_main.scss
@@ -1,6 +1,8 @@
 
 
-@import 'variables';
+@import
+  'variables',
+  'grid';
 
 @import
   'shared/buttons';
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index b1b9c21..fbf277c 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -155,6 +155,6 @@ $font-size-h3:            floor(($font-size-base * 1.3));
 $font-size-h4:            floor(($font-size-base * 1.2));
 $font-size-h5:            floor(($font-size-base * 1.1));
 
-// Custom sizes
+
 
 $tao-navbar-height: 67px;