aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/search
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-05-11 11:16:21 +0200
committerGitHub <noreply@github.com>2020-05-11 11:16:21 +0200
commit8a3183e50dab38ea79b9557840dce546aa1958ca (patch)
tree83c137b82c1190cd4113efacd9cb2010193bc649 /client/src/app/search
parent8544d8f561f6cd630973da041f36e46500fe95b7 (diff)
downloadPeerTube-8a3183e50dab38ea79b9557840dce546aa1958ca.tar.gz
PeerTube-8a3183e50dab38ea79b9557840dce546aa1958ca.tar.zst
PeerTube-8a3183e50dab38ea79b9557840dce546aa1958ca.zip
Fix non-fixed header and menu when overflow-x body on touchscreens (#2711)
* Make my-account-videos responsive on small screens * Make my-account-channels responsive for small screens * Make search result responsive on small screen Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Diffstat (limited to 'client/src/app/search')
-rw-r--r--client/src/app/search/search.component.scss44
1 files changed, 43 insertions, 1 deletions
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index 641647e2e..78749cf20 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -81,6 +81,48 @@
81 } 81 }
82} 82}
83 83
84@media screen and (min-width: $small-view) and (max-width: breakpoint(xl)) {
85 .video-channel-info .video-channel-names {
86 flex-direction: column !important;
87
88 .video-channel-name {
89 @include ellipsis; // Ellipsis and max-width on channel-name to not break screen
90
91 max-width: 250px;
92 margin-left: 0 !important;
93 }
94 }
95
96 :host-context(.main-col:not(.expanded)) {
97 // Override the min-width: 500px to not break screen
98 ::ng-deep .video-miniature-information {
99 min-width: 300px !important;
100 }
101 }
102}
103
104@media screen and (min-width: $small-view) and (max-width: breakpoint(lg)) {
105 :host-context(.main-col:not(.expanded)) {
106 .video-channel-info .video-channel-names {
107 .video-channel-name {
108 max-width: 160px;
109 }
110 }
111
112 // Override the min-width: 500px to not break screen
113 ::ng-deep .video-miniature-information {
114 min-width: 223px !important;
115 }
116 }
117
118 :host-context(.expanded) {
119 // Override the min-width: 500px to not break screen
120 ::ng-deep .video-miniature-information {
121 min-width: 300px !important;
122 }
123 }
124}
125
84@media screen and (max-width: $small-view) { 126@media screen and (max-width: $small-view) {
85 .search-result { 127 .search-result {
86 .entry.video-channel, 128 .entry.video-channel,
@@ -90,7 +132,7 @@
90 justify-content: center; 132 justify-content: center;
91 align-items: center; 133 align-items: center;
92 text-align: center; 134 text-align: center;
93 135
94 img { 136 img {
95 margin: 0; 137 margin: 0;
96 } 138 }