diff options
author | kimsible <kimsible@users.noreply.github.com> | 2020-04-24 18:59:10 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2020-05-11 11:11:06 +0200 |
commit | bedf0e60733533afe1504d188d9c7afba80f26bd (patch) | |
tree | 042fdca55b8820d13984ad2a9f23dbd81ad1e2b9 /client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss | |
parent | 610d0be13b3d01f653ef269271dd667a57c85ef2 (diff) | |
download | PeerTube-bedf0e60733533afe1504d188d9c7afba80f26bd.tar.gz PeerTube-bedf0e60733533afe1504d188d9c7afba80f26bd.tar.zst PeerTube-bedf0e60733533afe1504d188d9c7afba80f26bd.zip |
Add edit button to scroll watch playlist on touchscreens
Diffstat (limited to 'client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss')
-rw-r--r-- | client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss | 88 |
1 files changed, 86 insertions, 2 deletions
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss index 4d9d249d9..4fba2344b 100644 --- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss +++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss | |||
@@ -88,12 +88,15 @@ my-video-thumbnail, | |||
88 | @include ellipsis; | 88 | @include ellipsis; |
89 | } | 89 | } |
90 | 90 | ||
91 | .more { | 91 | .more, my-edit-button { |
92 | justify-self: flex-end; | 92 | justify-self: flex-end; |
93 | margin-left: auto; | 93 | margin-left: auto; |
94 | cursor: pointer; | 94 | cursor: pointer; |
95 | opacity: 0; | ||
96 | min-width: 24px; | 95 | min-width: 24px; |
96 | } | ||
97 | |||
98 | .more { | ||
99 | opacity: 0; | ||
97 | 100 | ||
98 | &.show { | 101 | &.show { |
99 | opacity: 1; | 102 | opacity: 1; |
@@ -132,3 +135,84 @@ my-video-thumbnail, | |||
132 | } | 135 | } |
133 | } | 136 | } |
134 | } | 137 | } |
138 | |||
139 | @mixin more-dropdown-control { | ||
140 | .video { | ||
141 | my-edit-button { | ||
142 | display: none; | ||
143 | |||
144 | + .more { | ||
145 | display: inline-flex; | ||
146 | } | ||
147 | } | ||
148 | } | ||
149 | } | ||
150 | |||
151 | @mixin edit-button-control { | ||
152 | .video { | ||
153 | my-edit-button { | ||
154 | display: none; | ||
155 | } | ||
156 | |||
157 | &.playing { | ||
158 | my-edit-button { | ||
159 | display: inline-flex; | ||
160 | height: max-content; | ||
161 | } | ||
162 | } | ||
163 | |||
164 | my-edit-button + .more { | ||
165 | display: none; | ||
166 | } | ||
167 | } | ||
168 | } | ||
169 | |||
170 | @mixin edit-button-in-mobile-view { | ||
171 | .video { | ||
172 | my-edit-button { | ||
173 | ::ng-deep .action-button-edit { | ||
174 | padding: 0 13px; | ||
175 | |||
176 | .button-label { | ||
177 | display: none; | ||
178 | } | ||
179 | } | ||
180 | } | ||
181 | } | ||
182 | } | ||
183 | |||
184 | @media screen and (min-width: $small-view) { | ||
185 | :host-context(.expanded) { | ||
186 | @include more-dropdown-control(); | ||
187 | } | ||
188 | } | ||
189 | |||
190 | @media screen and (max-width: $small-view) { | ||
191 | :host-context(.expanded) { | ||
192 | @include edit-button-control(); | ||
193 | } | ||
194 | } | ||
195 | |||
196 | @media screen and (max-width: $mobile-view) { | ||
197 | :host-context(.expanded) { | ||
198 | @include edit-button-in-mobile-view(); | ||
199 | } | ||
200 | } | ||
201 | |||
202 | @media screen and (min-width: #{$small-view + $menu-width}) { | ||
203 | :host-context(.main-col:not(.expanded)) { | ||
204 | @include more-dropdown-control(); | ||
205 | } | ||
206 | } | ||
207 | |||
208 | @media screen and (max-width: #{$small-view + $menu-width}) { | ||
209 | :host-context(.main-col:not(.expanded)) { | ||
210 | @include edit-button-control(); | ||
211 | } | ||
212 | } | ||
213 | |||
214 | @media screen and (max-width: #{$mobile-view + $menu-width}) { | ||
215 | :host-context(.main-col:not(.expanded)) { | ||
216 | @include edit-button-in-mobile-view(); | ||
217 | } | ||
218 | } | ||