From 26c6ee80d0fecfce595e8970f15717560b4f4ceb Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 1 Dec 2017 13:08:46 +0100 Subject: Implement header design --- client/config/webpack.common.js | 3 +- client/config/webpack.video-embed.js | 3 +- client/src/app/app.component.html | 19 ++-- client/src/app/app.component.scss | 101 ++++++--------------- client/src/app/menu/menu.component.html | 2 +- client/src/app/menu/menu.component.scss | 5 +- client/src/app/shared/search/search.component.html | 10 +- client/src/app/shared/search/search.component.scss | 55 +++++++++++ client/src/assets/header/menu.svg | 14 +++ client/src/assets/header/search.svg | 12 +++ client/src/assets/header/upload.svg | 16 ++++ client/src/sass/_mixins.scss | 6 ++ client/src/sass/_variables.scss | 8 +- 13 files changed, 158 insertions(+), 96 deletions(-) create mode 100644 client/src/assets/header/menu.svg create mode 100644 client/src/assets/header/search.svg create mode 100644 client/src/assets/header/upload.svg create mode 100644 client/src/sass/_mixins.scss diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js index 583f4ba07..acf22dab1 100644 --- 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 fe40194cf..2b70b6681 100644 --- 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 f4672c7ec..640524e23 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -1,14 +1,13 @@ -
-
+
+
-
- -
+ -
- -
+ + + PeerTube +
@@ -16,7 +15,7 @@
-
+
@@ -25,7 +24,7 @@
-
+
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index 28e86097c..f245d0563 100644 --- 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 bb0caaef5..fb31c0734 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -19,7 +19,7 @@
- +
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 8a4910605..2c2106733 100644 --- 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 0e3de150c..9bc9bafe4 100644 --- a/client/src/app/shared/search/search.component.html +++ b/client/src/app/shared/search/search.component.html @@ -1,6 +1,10 @@ + -Upload + + + Upload + diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss index e69de29bb..ffd891904 100644 --- 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 index 000000000..7101bf73b --- /dev/null +++ b/client/src/assets/header/menu.svg @@ -0,0 +1,14 @@ + + + + menu + Created with Sketch. + + + + + + + + + \ 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 index 000000000..489b59e9b --- /dev/null +++ b/client/src/assets/header/search.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/client/src/assets/header/upload.svg b/client/src/assets/header/upload.svg new file mode 100644 index 000000000..2b07caf76 --- /dev/null +++ b/client/src/assets/header/upload.svg @@ -0,0 +1,16 @@ + + + + cloud-upload + Created with Sketch. + + + + + + + + + + + diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss new file mode 100644 index 000000000..681657d90 --- /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 640746722..e32b37462 100644 --- 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; -- cgit v1.2.3