aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-11-06 11:46:11 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-11-06 11:46:11 +0100
commita01f107bc436250706d4bc765f45335ee15b8e80 (patch)
tree51333f833587e6581440ed59837127f03db37204 /client/src/app/videos
parentc3488a484e421783eb6a3d5990174a545e6088c0 (diff)
downloadPeerTube-a01f107bc436250706d4bc765f45335ee15b8e80.tar.gz
PeerTube-a01f107bc436250706d4bc765f45335ee15b8e80.tar.zst
PeerTube-a01f107bc436250706d4bc765f45335ee15b8e80.zip
Improve client mobile version
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html4
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss41
-rw-r--r--client/src/app/videos/video-list/shared/video-miniature.component.scss3
3 files changed, 38 insertions, 10 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 53648a8d8..0bab18d37 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -52,7 +52,7 @@
52 <div class="col-xs-2 col-md-3 video-small-block video-small-block-share"> 52 <div class="col-xs-2 col-md-3 video-small-block video-small-block-share">
53 <a class="option" (click)="showShareModal()" title="Share the video"> 53 <a class="option" (click)="showShareModal()" title="Share the video">
54 <span class="glyphicon glyphicon-share"></span> 54 <span class="glyphicon glyphicon-share"></span>
55 <span class="video-small-block-text">Share</span> 55 <span class="hidden-xs video-small-block-text">Share</span>
56 </a> 56 </a>
57 </div> 57 </div>
58 58
@@ -60,7 +60,7 @@
60 <div class="video-small-block-dropdown" dropdown dropup="true" placement="right"> 60 <div class="video-small-block-dropdown" dropdown dropup="true" placement="right">
61 <a class="option" title="Access to more options" dropdownToggle> 61 <a class="option" title="Access to more options" dropdownToggle>
62 <span class="glyphicon glyphicon-option-horizontal"></span> 62 <span class="glyphicon glyphicon-option-horizontal"></span>
63 <span class="video-small-block-text">More</span> 63 <span class="hidden-xs video-small-block-text">More</span>
64 </a> 64 </a>
65 65
66 <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> 66 <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index ab0539fa3..1a59a1bd3 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -212,12 +212,6 @@
212 } 212 }
213 } 213 }
214 214
215 @media screen and (max-width: 400px) {
216 .video-name-views {
217 font-size: 16px !important;
218 }
219 }
220
221 @media screen and (max-width: 800px) { 215 @media screen and (max-width: 800px) {
222 .video-name-views { 216 .video-name-views {
223 .video-name { 217 .video-name {
@@ -242,6 +236,7 @@
242 236
243 .video-small-block-author { 237 .video-small-block-author {
244 padding-left: 10px; 238 padding-left: 10px;
239 padding-right: 10px;
245 } 240 }
246 } 241 }
247 242
@@ -260,4 +255,38 @@
260 } 255 }
261 } 256 }
262 } 257 }
258
259 @media screen and (max-width: 500px) {
260 .video-name-views {
261 font-size: 16px !important;
262 }
263
264 // Keep the same hierarchy than max-width: 800px
265 .video-small-blocks {
266 a, .video-small-block-text {
267 font-size: 10px !important;
268 }
269
270 .video-small-block-author {
271 padding-left: 5px;
272 padding-right: 5px;
273 }
274 }
275
276 .video-details {
277 .video-details-date-description {
278 margin-bottom: 30px;
279 width: 100%;
280
281 .video-details-date {
282 margin-bottom: 15px;
283 }
284 }
285
286 .video-details-attributes {
287 padding-left: 10px;
288 padding-right: 10px;
289 }
290 }
291 }
263} 292}
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss
index 066792d10..e2602d3b6 100644
--- a/client/src/app/videos/video-list/shared/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss
@@ -1,9 +1,8 @@
1.video-miniature { 1.video-miniature {
2 margin-top: 30px; 2 margin: 15px 10px;
3 display: inline-block; 3 display: inline-block;
4 position: relative; 4 position: relative;
5 height: 190px; 5 height: 190px;
6 width: 220px;
7 vertical-align: top; 6 vertical-align: top;
8 7
9 .video-miniature-thumbnail { 8 .video-miniature-thumbnail {