IntenseWebs/PeerTube
3
0
Fork 0
mirror of https://github.com/Chocobozzz/PeerTube.git synced 2024-11-24 09:40:28 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixing disappearing hamburger menu for narrow screens (#3929)

Browse Source 
* Made top search bar more scalable for (physically) narrow screens

Removing `flex: auto` on `.top-left-block` for screens narrower than
`350px`allows the search bar to resize to fill up the remaining space.
Setting `width: 70px` on `#typeahead-container input` for mobile widths
prevents the hamburger button from being squished at certain widths.
Given that the padding adds up to `50px`, setting what amounts to the
minimum width of the search field to `70px` seems reasonable.

Fixes #3199.

* Making hamburger button margin and spacing narrower for mobile

The clickable area is restricted to the icon anyway, and the extra space
benefits the search field width on narrow screens.
This commit is contained in:
aschaap 2021-04-08 05:07:18 -04:00 committed by GitHub
parent 9a8c02c9da
commit 97c116edf9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/app/app.component.scss
View File

@ -43,6 +43,10 @@ $assets-path: '../assets';
background-color: pvar(--mainForegroundColor);
mask-image: url('#{$assets-path}/images/misc/menu.svg');
margin: 0 18px 0 20px;
@media screen and (max-width: $mobile-view) {
margin: 0 10px;
}
}
}
@ -71,16 +75,11 @@ $assets-path: '../assets';
}
@media screen and (max-width: $mobile-view) {
width: 70px;
.peertube-title {
display: none;
}
}
@media screen and (max-width: 350px) {
flex: auto;
}
}
.header-right {

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

@ -86,7 +86,7 @@ li.suggestion {
flex: 1;
input {
width: unset;
width: 70px;
}
}