aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-01 13:08:46 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-01 13:15:53 +0100
commit26c6ee80d0fecfce595e8970f15717560b4f4ceb (patch)
treea193cb9836d654c05b7b96585513b99922245eaa
parentb33f657c304b77938c1f68164d8e754787f5aae5 (diff)
downloadPeerTube-26c6ee80d0fecfce595e8970f15717560b4f4ceb.tar.gz
PeerTube-26c6ee80d0fecfce595e8970f15717560b4f4ceb.tar.zst
PeerTube-26c6ee80d0fecfce595e8970f15717560b4f4ceb.zip
Implement header design
Diffstat
-rw-r--r--client/config/webpack.common.js3
-rw-r--r--client/config/webpack.video-embed.js3
-rw-r--r--client/src/app/app.component.html19
-rw-r--r--client/src/app/app.component.scss101
-rw-r--r--client/src/app/menu/menu.component.html2
-rw-r--r--client/src/app/menu/menu.component.scss5
-rw-r--r--client/src/app/shared/search/search.component.html10
-rw-r--r--client/src/app/shared/search/search.component.scss55
-rw-r--r--client/src/assets/header/menu.svg14
-rw-r--r--client/src/assets/header/search.svg12
-rw-r--r--client/src/assets/header/upload.svg16
-rw-r--r--client/src/sass/_mixins.scss6
-rw-r--r--client/src/sass/_variables.scss8
13 files changed, 158 insertions, 96 deletions
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) {
146 loader: 'sass-resources-loader', 146 loader: 'sass-resources-loader',
147 options: { 147 options: {
148 resources: [ 148 resources: [
149 helpers.root('src/sass/_variables.scss') 149 helpers.root('src/sass/_variables.scss'),
150 helpers.root('src/sass/_mixins.scss')
150 ] 151 ]
151 } 152 }
152 } 153 }
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) {
74 loader: 'sass-resources-loader', 74 loader: 'sass-resources-loader',
75 options: { 75 options: {
76 resources: [ 76 resources: [
77 helpers.root('src/sass/_variables.scss') 77 helpers.root('src/sass/_variables.scss'),
78 helpers.root('src/sass/_mixins.scss')
78 ] 79 ]
79 } 80 }
80 } 81 }
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 @@
1<div class="container-fluid"> 1<div>
2 <div class="row header"> 2 <div class="header">
3 3
4 <div class="top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }"> 4 <div class="top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
5 <div class="hamburger-block" (click)="toggleMenu()"> 5 <span class="icon icon-menu" (click)="toggleMenu()"></span>
6 <span class="glyphicon glyphicon-menu-hamburger"></span>
7 </div>
8 6
9 <div id="peertube-title"> 7 <a id="peertube-title" [routerLink]="['/videos/list']" title="Homepage">
10 <a [routerLink]="['/videos/list']" title="Homepage"></a> 8 <span class="icon icon-logo"></span>
11 </div> 9 PeerTube
10 </a>
12 </div> 11 </div>
13 12
14 <div class="header-right"> 13 <div class="header-right">
@@ -16,7 +15,7 @@
16 </div> 15 </div>
17 </div> 16 </div>
18 17
19 <div class="row sub-header-container"> 18 <div class="sub-header-container">
20 <div class="title-menu-left"> 19 <div class="title-menu-left">
21 20
22 <div class="title-menu-left-block menu"> 21 <div class="title-menu-left-block menu">
@@ -25,7 +24,7 @@
25 </div> 24 </div>
26 </div> 25 </div>
27 26
28 <div class="main-col" [ngClass]="getMainColClasses()"> 27 <div class="main-col container-fluid" [ngClass]="getMainColClasses()">
29 28
30 <div class="main-row"> 29 <div class="main-row">
31 <router-outlet></router-outlet> 30 <router-outlet></router-outlet>
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 @@
28.header { 28.header {
29 height: $header-height; 29 height: $header-height;
30 position: fixed; 30 position: fixed;
31 top: 0;
31 width: 100%; 32 width: 100%;
32 background-color: #fff; 33 background-color: #fff;
34 z-index: 1000;
33 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); 35 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
34 display: flex; 36 display: flex;
35 37
@@ -37,33 +39,36 @@
37 width: $menu-width; 39 width: $menu-width;
38 z-index: 1001; 40 z-index: 1001;
39 height: $header-height; 41 height: $header-height;
40 line-height: $header-height;
41 margin-top: 0;
42 margin-bottom: 0;
43 display: flex; 42 display: flex;
44 padding: 0; 43 align-items: center;
45 44
46 .hamburger-block { 45 .icon {
47 margin-right: 10px; 46 cursor: pointer;
48 margin-left: 25px; 47 width: 22px;
49 48 height: 22px;
50 .glyphicon { 49 display: inline-block;
51 cursor: pointer; 50 background-size: contain;
51
52 &.icon-menu {
53 background-image: url('../assets/header/menu.svg');
54 margin: 0 18px 0 24px;
52 } 55 }
53 } 56 }
54 57
55 #peertube-title { 58 #peertube-title {
56 a { 59 font-size: 20px;
57 color: inherit !important; 60 font-weight: $font-bold;
58 display: block; 61 color: inherit !important;
62 display: flex;
63 align-items: center;
64
65 @include disable-default-a-behaviour;
66
67 .icon.icon-logo {
68 display: inline-block;
59 background: url('../assets/logo.svg') no-repeat; 69 background: url('../assets/logo.svg') no-repeat;
60 width: 24px; 70 width: 20px;
61 height: 24px; 71 height: 24px;
62
63 &:hover {
64 color: inherit !important;
65 text-decoration: none !important;
66 }
67 } 72 }
68 } 73 }
69 74
@@ -71,65 +76,15 @@
71 #peertube-title { 76 #peertube-title {
72 display: none; 77 display: none;
73 } 78 }
74
75 .hamburger-block {
76 width: 100%;
77 text-align: center;
78 }
79 }
80
81 @media screen and (min-width: 500px) and (max-width: 600px) {
82 #peertube-title a {
83 width: 80px;
84 }
85 }
86
87 @media screen and (min-width: 600px) and (max-width: 700px) {
88 #peertube-title a {
89 width: 100px;
90 }
91 }
92
93 @media screen and (min-width: 1000px) {
94 #peertube-title a {
95 width: 120px;
96 }
97 }
98
99 @media screen and (min-width: 1000px) {
100 #peertube-title a {
101 width: 120px;
102 }
103 }
104
105 @media screen and (min-width: 1200px) {
106 padding-left: 15px;
107
108 .hamburger-block {
109 margin-right: 15px;
110 }
111
112 #peertube-title a {
113 width: 135px;
114 }
115 }
116
117 @media screen and (min-width: 1600px) {
118 .hamburger-block {
119 margin-right: 20px;
120 }
121
122 #peertube-title a {
123 width: 180px;
124 }
125 } 79 }
126 } 80 }
127 81
128 .header-right { 82 .header-right {
129 text-align: right;
130 height: $header-height; 83 height: $header-height;
131 margin-left: $menu-width; 84 display: flex;
85 align-items: center;
132 flex-grow: 1; 86 flex-grow: 1;
87 justify-content: flex-end;
133 } 88 }
134} 89}
135 90
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 @@
19 </div> 19 </div>
20 20
21 <div *ngIf="!isLoggedIn" class="button-block"> 21 <div *ngIf="!isLoggedIn" class="button-block">
22 <a routerLink="/login"class="login-button">Login</a> 22 <a routerLink="/login" class="login-button">Login</a>
23 <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a> 23 <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
24 </div> 24 </div>
25 25
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 {
123 cursor: pointer; 123 cursor: pointer;
124 margin-bottom: 15px; 124 margin-bottom: 15px;
125 125
126 &:hover, &:focus { 126 @include disable-default-a-behaviour;
127 text-decoration: none !important;
128 outline: none !important;
129 }
130 } 127 }
131} 128}
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 @@
1<input 1<input
2 type="text" id="search-video" name="search-video" placeholder="Search" 2 type="text" id="search-video" name="search-video" placeholder="Search..."
3 [(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()" 3 [(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
4> 4>
5<span (click)="doSearch()" class="icon icon-search"></span>
5 6
6<a routerLink="/videos/upload">Upload</a> 7<a class="upload-button" routerLink="/videos/upload">
8 <span class="icon icon-upload"></span>
9 Upload
10</a>
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 @@
1#search-video {
2 display: inline-block;
3 height: $button-height;
4 width: $search-input-width;
5 margin-right: 15px;
6 padding-right: 25px; // For the search icon
7 background: #fff;
8 border: 1px solid #C6C6C6;
9 border-radius: 3px;
10 padding-left: 15px;
11
12 &::placeholder {
13 color: #000;
14 }
15}
16
17.icon.icon-search {
18 display: inline-block;
19 background: url('../../../assets/header/search.svg') no-repeat;
20 background-size: contain;
21 width: 25px;
22 height: 21px;
23 vertical-align: middle;
24 cursor: pointer;
25 // yolo
26 position: absolute;
27 margin-left: -50px;
28 margin-top: 5px;
29}
30
31.upload-button {
32 display: inline-block;
33 color: #fff;
34 font-weight: $font-semibold;
35 font-size: 15px;
36 height: $button-height;
37 line-height: $button-height;
38 border-radius: 3px;
39 text-align: center;
40 margin-right: 25px;
41 background-color: $orange-color;
42 padding: 0 17px 0 13px;
43
44 @include disable-default-a-behaviour;
45
46 .icon.icon-upload {
47 display: inline-block;
48 background: url('../../../assets/header/upload.svg') no-repeat;
49 background-size: contain;
50 width: 22px;
51 height: 24px;
52 vertical-align: middle;
53 margin-right: 6px;
54 }
55}
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 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<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">
3 <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4 <title>menu</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8 <g id="Artboard-4" transform="translate(-180.000000, -203.000000)" stroke="#333333">
9 <g id="44" transform="translate(180.000000, 203.000000)">
10 <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>
11 </g>
12 </g>
13 </g>
14</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
index 000000000..489b59e9b
--- /dev/null
+++ b/client/src/assets/header/search.svg
@@ -0,0 +1,12 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<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">
3 <defs></defs>
4 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5 <g id="Artboard-4" transform="translate(-136.000000, -115.000000)" stroke="#000" stroke-width="2">
6 <g id="3" transform="translate(136.000000, 115.000000)">
7 <circle id="Oval-3" cx="10" cy="10" r="7"></circle>
8 <path d="M15,15 L21,21" id="Path-3" stroke-linecap="round" stroke-linejoin="round"></path>
9 </g>
10 </g>
11 </g>
12</svg>
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 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<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">
3 <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4 <title>cloud-upload</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
8 <g id="Artboard-4" transform="translate(-312.000000, -775.000000)" stroke="#fff" stroke-width="2">
9 <g id="307" transform="translate(312.000000, 775.000000)">
10 <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>
11 <path d="M12,13 L12,21" id="Path-58"></path>
12 <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>
13 </g>
14 </g>
15 </g>
16</svg>
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 @@
1@mixin disable-default-a-behaviour {
2 &:hover, &:focus {
3 text-decoration: none !important;
4 outline: none !important;
5 }
6}
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;
10 10
11$button-height: 30px; 11$button-height: 30px;
12 12
13$menu-color: #fff;
14$menu-width: 240px;
15
16$header-height: 50px; 13$header-height: 50px;
17$header-border-color: #e9eff6; 14$header-border-color: #e9eff6;
18 15
16$search-input-width: 375px;
17
18$menu-color: #fff;
19$menu-width: 240px;
20
19$footer-height: 30px; 21$footer-height: 30px;
20$footer-margin: 30px; 22$footer-margin: 30px;
21 23
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-26 17:59:12 +0000