socialnetworknews-web

commit 14f51f2cc31bc2fec1d5ffbc205e6d76fc0b0616
parent e9d81c2679146fa42069b17348f6908367903d3f
Author: MTRNord <mtrnord1@gmail.com>
Date:   Tue, 10 Apr 2018 22:17:30 +0200

Basic css optimize for mobile more TODO

Diffstat:
M
src/app/navbar/navbar.component.html
 | 
3
++-
M
src/app/navbar/navbar.component.scss
 | 
17
++++++++++++++++-

2 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
@@ -1,6 +1,6 @@
 <header>
   <div class="container">
-    <span id="home"><i class="far fa-newspaper"></i></span>
+    <a id="home" routerLink="/"><i class="far fa-newspaper"></i></a>
     <div class="box">
       <ul>
         <li><a routerLink="/">Home</a></li>
@@ -10,5 +10,6 @@
         <li *ngIf="authenticated"><a routerLink="/profile/{{apiService.userUUID}}">Profile</a></li>
       </ul>
     </div>
+    <a class="menuButton">MENU <i class="fas fa-bars"></i></a>
   </div>
 </header>
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
@@ -4,6 +4,7 @@ a {
   color: inherit;
   text-decoration: none;
   font-family: 'Lato', sans-serif;
+  display: block;
 }
 
 a:hover {
@@ -15,6 +16,7 @@ li {
   list-style-type: none;
   margin: 0 auto;
   padding: 0;
+  width: 100%;
 }
 
 ul li {
@@ -24,7 +26,7 @@ ul li {
 header {
   background: #FFF;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
-  height: 60px;
+  height: 180px;
   left: 0;
   position: fixed;
   right: 0;
@@ -49,6 +51,8 @@ header .box {
 
 header .box > ul {
   display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 header .box > ul li {
@@ -75,6 +79,11 @@ header .box > ul li {
   top: 0;
   width: 36px;
 }
+
+.menuButton {
+  display: block;
+}
+
 @media only screen and (min-width: 520px) {
   header .container {
     max-width: 640px
@@ -82,4 +91,10 @@ header .box > ul li {
   header .box {
     display: block;
   }
+  header {
+    height: 60px;
+  }
+  .menuButton {
+    display: none;
+  }
 }