aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/header
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-08-12 10:36:28 +0200
committerChocobozzz <me@florianbigard.com>2022-08-12 10:37:22 +0200
commit9a3f72508cfac5264230bcb42492b10e714a1f2c (patch)
tree5364b87d06d544987160e6715000ba0fe1df47d3 /client/src/app/header
parent0582b4f972a72c2297676faf1e574f817a5712f9 (diff)
downloadPeerTube-9a3f72508cfac5264230bcb42492b10e714a1f2c.tar.gz
PeerTube-9a3f72508cfac5264230bcb42492b10e714a1f2c.tar.zst
PeerTube-9a3f72508cfac5264230bcb42492b10e714a1f2c.zip
Move search bar at the middle of the header
Diffstat (limited to 'client/src/app/header')
-rw-r--r--client/src/app/header/header.component.html2
-rw-r--r--client/src/app/header/header.component.scss8
-rw-r--r--client/src/app/header/search-typeahead.component.scss13
3 files changed, 8 insertions, 15 deletions
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index f49f471c6..b5e9e3dd8 100644
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -1,4 +1,4 @@
1<my-search-typeahead class="w-100 d-flex justify-content-end"></my-search-typeahead> 1<my-search-typeahead class="w-100 d-flex justify-content-center"></my-search-typeahead>
2 2
3<a class="publish-button" routerLink="/videos/upload"> 3<a class="publish-button" routerLink="/videos/upload">
4 <my-global-icon iconName="upload" aria-hidden="true"></my-global-icon> 4 <my-global-icon iconName="upload" aria-hidden="true"></my-global-icon>
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 8a4111c5a..cf6e96d07 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -1,14 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4my-search-typeahead {
5 @include margin-right(80px);
6
7 @media screen and (max-width: $small-view) {
8 @include margin-right(15px);
9 }
10}
11
12.publish-button { 4.publish-button {
13 @include peertube-button-link; 5 @include peertube-button-link;
14 @include orange-button; 6 @include orange-button;
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 299efba2c..ae0f1547e 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -75,6 +75,7 @@ li.suggestion {
75 75
76#typeahead-container { 76#typeahead-container {
77 font-size: 14px; 77 font-size: 14px;
78 margin: 0 10px;
78 79
79 input { 80 input {
80 border: 1px solid pvar(--mainBackgroundColor) !important; 81 border: 1px solid pvar(--mainBackgroundColor) !important;
@@ -83,15 +84,15 @@ li.suggestion {
83 transition: box-shadow .3s ease, width .2s ease; 84 transition: box-shadow .3s ease, width .2s ease;
84 } 85 }
85 86
86 @media screen and (min-width: $mobile-view) {
87 @include margin-left(10px);
88 }
89
90 @media screen and (max-width: $small-view) { 87 @media screen and (max-width: $small-view) {
91 flex: 1; 88 input {
89 width: 200px;
90 }
91 }
92 92
93 @media screen and (max-width: $mobile-view) {
93 input { 94 input {
94 width: 70px; 95 width: 150px;
95 } 96 }
96 } 97 }
97 98