OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Move search bar at the middle of the header

pull/5200/head
Chocobozzz 2022-08-12 10:36:28 +02:00
parent 0582b4f972
commit 9a3f72508c
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/header/header.component.html
View File

@ -1,4 +1,4 @@
<my-search-typeahead class="w-100 d-flex justify-content-end"></my-search-typeahead> <my-search-typeahead class="w-100 d-flex justify-content-center"></my-search-typeahead>
<a class="publish-button" routerLink="/videos/upload"> <a class="publish-button" routerLink="/videos/upload">
<my-global-icon iconName="upload" aria-hidden="true"></my-global-icon> <my-global-icon iconName="upload" aria-hidden="true"></my-global-icon>

8
client/src/app/header/header.component.scss
View File

@ -1,14 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
my-search-typeahead {
@include margin-right(80px);
@media screen and (max-width: $small-view) {
@include margin-right(15px);
}
}
.publish-button { .publish-button {
@include peertube-button-link; @include peertube-button-link;
@include orange-button; @include orange-button;

13
client/src/app/header/search-typeahead.component.scss
View File

@ -75,6 +75,7 @@ li.suggestion {
#typeahead-container { #typeahead-container {
font-size: 14px; font-size: 14px;
margin: 0 10px;
input { input {
border: 1px solid pvar(--mainBackgroundColor) !important; border: 1px solid pvar(--mainBackgroundColor) !important;
@ -83,15 +84,15 @@ li.suggestion {
transition: box-shadow .3s ease, width .2s ease; transition: box-shadow .3s ease, width .2s ease;
} }
@media screen and (min-width: $mobile-view) { @media screen and (max-width: $small-view) {
@include margin-left(10px); input {
width: 200px;
}
} }
@media screen and (max-width: $small-view) { @media screen and (max-width: $mobile-view) {
flex: 1;
input { input {
width: 70px; width: 150px;
} }
} }