aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authoraschaap <8865084+aschaap@users.noreply.github.com>2021-04-08 05:07:18 -0400
committerGitHub <noreply@github.com>2021-04-08 11:07:18 +0200
commit97c116edf9b02ed9c85b2cf0fc33a4e7f7266d78 (patch)
treee84fbe72ab7201776c7008e75fef8231e8411ca4 /client
parent9a8c02c9da7b538b3d726016c59a527fa3811ab0 (diff)
downloadPeerTube-97c116edf9b02ed9c85b2cf0fc33a4e7f7266d78.tar.gz
PeerTube-97c116edf9b02ed9c85b2cf0fc33a4e7f7266d78.tar.zst
PeerTube-97c116edf9b02ed9c85b2cf0fc33a4e7f7266d78.zip
Fixing disappearing hamburger menu for narrow screens (#3929)
* 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.
Diffstat (limited to 'client')
-rw-r--r--client/src/app/app.component.scss9
-rw-r--r--client/src/app/header/search-typeahead.component.scss2
2 files changed, 5 insertions, 6 deletions
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index e8447719a..42293e412 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -43,6 +43,10 @@ $assets-path: '../assets';
43 background-color: pvar(--mainForegroundColor); 43 background-color: pvar(--mainForegroundColor);
44 mask-image: url('#{$assets-path}/images/misc/menu.svg'); 44 mask-image: url('#{$assets-path}/images/misc/menu.svg');
45 margin: 0 18px 0 20px; 45 margin: 0 18px 0 20px;
46
47 @media screen and (max-width: $mobile-view) {
48 margin: 0 10px;
49 }
46 } 50 }
47 } 51 }
48 52
@@ -71,16 +75,11 @@ $assets-path: '../assets';
71 } 75 }
72 76
73 @media screen and (max-width: $mobile-view) { 77 @media screen and (max-width: $mobile-view) {
74 width: 70px;
75 78
76 .peertube-title { 79 .peertube-title {
77 display: none; 80 display: none;
78 } 81 }
79 } 82 }
80
81 @media screen and (max-width: 350px) {
82 flex: auto;
83 }
84 } 83 }
85 84
86 .header-right { 85 .header-right {
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index f8d68e986..a60aa38d6 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -86,7 +86,7 @@ li.suggestion {
86 flex: 1; 86 flex: 1;
87 87
88 input { 88 input {
89 width: unset; 89 width: 70px;
90 } 90 }
91 } 91 }
92 92