forks
/
peertube
1
0
Fork 0
Code Releases Activity

Move search bar at the middle of the header

This commit is contained in:
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">
<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 '_mixins' as *;
my-search-typeahead {
@include margin-right(80px);
@media screen and (max-width: $small-view) {
@include margin-right(15px);
}
}
.publish-button {
@include peertube-button-link;
@include orange-button;

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

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