aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
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/shared
parentb33f657c304b77938c1f68164d8e754787f5aae5 (diff)
downloadPeerTube-26c6ee80d0fecfce595e8970f15717560b4f4ceb.tar.gz
PeerTube-26c6ee80d0fecfce595e8970f15717560b4f4ceb.tar.zst
PeerTube-26c6ee80d0fecfce595e8970f15717560b4f4ceb.zip
Implement header design
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/search/search.component.html10
-rw-r--r--client/src/app/shared/search/search.component.scss55
2 files changed, 62 insertions, 3 deletions
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}