Implement header design

diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index 583f4ba07a428187753cbcf2948691f219e878dc..acf22dab195f4adc4e78e0e02c6a2d16b9992457 100644 (file)
--- a/client/config/webpack.common.js
+++ b/client/config/webpack.common.js
@@ -146,7 +146,8 @@ module.exports = function (options) {
               loader: 'sass-resources-loader',
               options: {
                 resources: [
-                  helpers.root('src/sass/_variables.scss')
+                  helpers.root('src/sass/_variables.scss'),
+                  helpers.root('src/sass/_mixins.scss')
                 ]
               }
             }

diff --git a/client/config/webpack.video-embed.js b/client/config/webpack.video-embed.js
index fe40194cf3a010fd5c9b35262e8865ecc1f2f27e..2b70b6681fc16d80b93a3ae07ae685b511d77124 100644 (file)
--- a/client/config/webpack.video-embed.js
+++ b/client/config/webpack.video-embed.js
@@ -74,7 +74,8 @@ module.exports = function (options) {
                 loader: 'sass-resources-loader',
                 options: {
                   resources: [
-                    helpers.root('src/sass/_variables.scss')
+                    helpers.root('src/sass/_variables.scss'),
+                    helpers.root('src/sass/_mixins.scss')
                   ]
                 }
               }

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index f4672c7ec5d3fe9f7f1626bbe38b72bc1d9a0362..640524e23e7bebe2d4f4b2b09189aa292cfefa36 100644 (file)
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,14 +1,13 @@
-<div class="container-fluid">
-  <div class="row header">
+<div>
+  <div class="header">
 
     <div class="top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
-      <div class="hamburger-block" (click)="toggleMenu()">
-        <span class="glyphicon glyphicon-menu-hamburger"></span>
-      </div>
+      <span class="icon icon-menu" (click)="toggleMenu()"></span>
 
-      <div id="peertube-title">
-        <a [routerLink]="['/videos/list']" title="Homepage"></a>
-      </div>
+      <a id="peertube-title" [routerLink]="['/videos/list']" title="Homepage">
+        <span class="icon icon-logo"></span>
+        PeerTube
+      </a>
     </div>
 
     <div class="header-right">
@@ -16,7 +15,7 @@
     </div>
   </div>
 
-  <div class="row sub-header-container">
+  <div class="sub-header-container">
     <div class="title-menu-left">
 
       <div class="title-menu-left-block menu">
@@ -25,7 +24,7 @@
       </div>
     </div>
 
-    <div class="main-col" [ngClass]="getMainColClasses()">
+    <div class="main-col container-fluid" [ngClass]="getMainColClasses()">
 
       <div class="main-row">
         <router-outlet></router-outlet>

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 28e86097cc0e54476ba48598de21344bcc0b5346..f245d05631e6ab81ffd6b69664f9356cfb6f5f08 100644 (file)
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -28,8 +28,10 @@
 .header {
   height: $header-height;
   position: fixed;
+  top: 0;
   width: 100%;
   background-color: #fff;
+  z-index: 1000;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
   display: flex;
 
@@ -37,33 +39,36 @@
     width: $menu-width;
     z-index: 1001;
     height: $header-height;
-    line-height: $header-height;
-    margin-top: 0;
-    margin-bottom: 0;
     display: flex;
-    padding: 0;
-
-    .hamburger-block {
-      margin-right: 10px;
-      margin-left: 25px;
-
-      .glyphicon {
-        cursor: pointer;
+    align-items: center;
+
+    .icon {
+      cursor: pointer;
+      width: 22px;
+      height: 22px;
+      display: inline-block;
+      background-size: contain;
+
+      &.icon-menu {
+        background-image: url('../assets/header/menu.svg');
+        margin: 0 18px 0 24px;
       }
     }
 
     #peertube-title {
-      a {
-        color: inherit !important;
-        display: block;
+      font-size: 20px;
+      font-weight: $font-bold;
+      color: inherit !important;
+      display: flex;
+      align-items: center;
+
+      @include disable-default-a-behaviour;
+
+      .icon.icon-logo {
+        display: inline-block;
         background: url('../assets/logo.svg') no-repeat;
-        width: 24px;
+        width: 20px;
         height: 24px;
-
-        &:hover {
-          color: inherit !important;
-          text-decoration: none !important;
-        }
       }
     }
 
@@ -71,65 +76,15 @@
       #peertube-title {
         display: none;
       }
-
-      .hamburger-block {
-        width: 100%;
-        text-align: center;
-      }
-    }
-
-    @media screen and (min-width: 500px) and (max-width: 600px) {
-      #peertube-title a {
-        width: 80px;
-      }
-    }
-
-    @media screen and (min-width: 600px) and (max-width: 700px) {
-      #peertube-title a {
-        width: 100px;
-      }
-    }
-
-    @media screen and (min-width: 1000px) {
-      #peertube-title a {
-        width: 120px;
-      }
-    }
-
-    @media screen and (min-width: 1000px) {
-      #peertube-title a {
-        width: 120px;
-      }
-    }
-
-    @media screen and (min-width: 1200px) {
-      padding-left: 15px;
-
-      .hamburger-block {
-        margin-right: 15px;
-      }
-
-      #peertube-title a {
-        width: 135px;
-      }
-    }
-
-    @media screen and (min-width: 1600px) {
-      .hamburger-block {
-        margin-right: 20px;
-      }
-
-      #peertube-title a {
-        width: 180px;
-      }
     }
   }
 
   .header-right {
-    text-align: right;
     height: $header-height;
-    margin-left: $menu-width;
+    display: flex;
+    align-items: center;
     flex-grow: 1;
+    justify-content: flex-end;
   }
 }
 

diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index bb0caaef56469c887aff24c61078ee5808fbd707..fb31c073428bc3f7725b5b28dce5b417bfa70a96 100644 (file)
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -19,7 +19,7 @@
   </div>
 
   <div *ngIf="!isLoggedIn" class="button-block">
-    <a routerLink="/login"class="login-button">Login</a>
+    <a routerLink="/login" class="login-button">Login</a>
     <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
   </div>
 

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 8a4910605a88652c1b3892810acd6c60ca88981c..2c21067334ceb67663598dce4349a9d30b40bd15 100644 (file)
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -123,9 +123,6 @@ menu {
     cursor: pointer;
     margin-bottom: 15px;
 
-    &:hover, &:focus {
-      text-decoration: none !important;
-      outline: none !important;
-    }
+    @include disable-default-a-behaviour;
   }
 }

diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html
index 0e3de150cea7a1444765e57a63bf770dc19d75f8..9bc9bafe406912eebb4ab3485874e3a041f78260 100644 (file)
--- a/client/src/app/shared/search/search.component.html
+++ b/client/src/app/shared/search/search.component.html
@@ -1,6 +1,10 @@
 <input
-  type="text" id="search-video" name="search-video" placeholder="Search"
-  [(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
+    type="text" id="search-video" name="search-video" placeholder="Search..."
+    [(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
 >
+<span (click)="doSearch()" class="icon icon-search"></span>
 
-<a routerLink="/videos/upload">Upload</a>
+<a class="upload-button" routerLink="/videos/upload">
+  <span class="icon icon-upload"></span>
+  Upload
+</a>

diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..ffd891904247465429268478d8fd84fb30b81661 100644 (file)
--- a/client/src/app/shared/search/search.component.scss
+++ b/client/src/app/shared/search/search.component.scss
@@ -0,0 +1,55 @@
+#search-video {
+  display: inline-block;
+  height: $button-height;
+  width: $search-input-width;
+  margin-right: 15px;
+  padding-right: 25px; // For the search icon
+  background: #fff;
+  border: 1px solid #C6C6C6;
+  border-radius: 3px;
+  padding-left: 15px;
+
+  &::placeholder {
+    color: #000;
+  }
+}
+
+.icon.icon-search {
+  display: inline-block;
+  background: url('../../../assets/header/search.svg') no-repeat;
+  background-size: contain;
+  width: 25px;
+  height: 21px;
+  vertical-align: middle;
+  cursor: pointer;
+  // yolo
+  position: absolute;
+  margin-left: -50px;
+  margin-top: 5px;
+}
+
+.upload-button {
+  display: inline-block;
+  color: #fff;
+  font-weight: $font-semibold;
+  font-size: 15px;
+  height: $button-height;
+  line-height: $button-height;
+  border-radius: 3px;
+  text-align: center;
+  margin-right: 25px;
+  background-color: $orange-color;
+  padding: 0 17px 0 13px;
+
+  @include disable-default-a-behaviour;
+
+  .icon.icon-upload {
+    display: inline-block;
+    background: url('../../../assets/header/upload.svg') no-repeat;
+    background-size: contain;
+    width: 22px;
+    height: 24px;
+    vertical-align: middle;
+    margin-right: 6px;
+  }
+}

diff --git a/client/src/assets/header/menu.svg b/client/src/assets/header/menu.svg
new file mode 100644 (file)
index 0000000..7101bf7
--- /dev/null
+++ b/client/src/assets/header/menu.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>menu</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-180.000000, -203.000000)" stroke="#333333">
+            <g id="44" transform="translate(180.000000, 203.000000)">
+                <path d="M3.5,7 C3.5,6.72319836 3.72175357,6.5 3.99339768,6.5 L20.0066023,6.5 C20.2799786,6.5 20.5,6.72089465 20.5,7 C20.5,7.27680164 20.2782464,7.5 20.0066023,7.5 L3.99339768,7.5 C3.72002141,7.5 3.5,7.27910535 3.5,7 Z M3.5,12 C3.5,11.7231984 3.72175357,11.5 3.99339768,11.5 L20.0066023,11.5 C20.2799786,11.5 20.5,11.7208946 20.5,12 C20.5,12.2768016 20.2782464,12.5 20.0066023,12.5 L3.99339768,12.5 C3.72002141,12.5 3.5,12.2791054 3.5,12 Z M3.5,17 C3.5,16.7231984 3.72175357,16.5 3.99339768,16.5 L20.0066023,16.5 C20.2799786,16.5 20.5,16.7208946 20.5,17 C20.5,17.2768016 20.2782464,17.5 20.0066023,17.5 L3.99339768,17.5 C3.72002141,17.5 3.5,17.2791054 3.5,17 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

diff --git a/client/src/assets/header/search.svg b/client/src/assets/header/search.svg
new file mode 100644 (file)
index 0000000..489b59e
--- /dev/null
+++ b/client/src/assets/header/search.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-136.000000, -115.000000)" stroke="#000" stroke-width="2">
+            <g id="3" transform="translate(136.000000, 115.000000)">
+                <circle id="Oval-3" cx="10" cy="10" r="7"></circle>
+                <path d="M15,15 L21,21" id="Path-3" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>

diff --git a/client/src/assets/header/upload.svg b/client/src/assets/header/upload.svg
new file mode 100644 (file)
index 0000000..2b07caf
--- /dev/null
+++ b/client/src/assets/header/upload.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>cloud-upload</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-312.000000, -775.000000)" stroke="#fff" stroke-width="2">
+            <g id="307" transform="translate(312.000000, 775.000000)">
+                <path d="M8,18 L5,18 L5,18 C2.790861,18 1,16.209139 1,14 C1,11.790861 2.790861,10 5,10 C5.35840468,10 5.70579988,10.0471371 6.03632437,10.1355501 C6.01233106,9.92702603 6,9.71495305 6,9.5 C6,6.46243388 8.46243388,4 11.5,4 C14.0673313,4 16.2238156,5.7590449 16.8299648,8.1376465 C17.2052921,8.04765874 17.5970804,8 18,8 C20.7614237,8 23,10.2385763 23,13 C23,15.7614237 20.7614237,18 18,18 L16,18" id="Combined-Shape" stroke-linejoin="round"></path>
+                <path d="M12,13 L12,21" id="Path-58"></path>
+                <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 12.500000) scale(1, -1) translate(-12.000000, -12.500000) " points="15 11 12 14 9 11"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>

diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
new file mode 100644 (file)
index 0000000..681657d
--- /dev/null
+++ b/client/src/sass/_mixins.scss
@@ -0,0 +1,6 @@
+@mixin disable-default-a-behaviour {
+  &:hover, &:focus {
+    text-decoration: none !important;
+    outline: none !important;
+  }
+}

diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss
index 640746722f35eb0a0b2e9f91206b855b794470ff..e32b374621eebbf6e15c031a78e4e71c8ae43001 100644 (file)
--- a/client/src/sass/_variables.scss
+++ b/client/src/sass/_variables.scss
@@ -10,12 +10,14 @@ $grey-background: #f6f2f2;
 
 $button-height: 30px;
 
-$menu-color: #fff;
-$menu-width: 240px;
-
 $header-height: 50px;
 $header-border-color: #e9eff6;
 
+$search-input-width: 375px;
+
+$menu-color: #fff;
+$menu-width: 240px;
+
 $footer-height: 30px;
 $footer-margin: 30px;