aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
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 /client/src/app
parentb33f657c304b77938c1f68164d8e754787f5aae5 (diff)
downloadPeerTube-26c6ee80d0fecfce595e8970f15717560b4f4ceb.tar.gz
PeerTube-26c6ee80d0fecfce595e8970f15717560b4f4ceb.tar.zst
PeerTube-26c6ee80d0fecfce595e8970f15717560b4f4ceb.zip
Implement header design
Diffstat (limited to 'client/src/app')
-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
6 files changed, 101 insertions, 91 deletions
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}