aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2018-09-03 15:01:52 +0200
committerRigel Kent <sendmemail@rigelk.eu>2018-09-03 15:10:55 +0200
commit2303a803aa19c2857efac9f2af2223ccae5757e2 (patch)
treefd00a3c766d78f698c89df4ff60d145bc776e061
parentf2e05ffea78255dd431dbddfffff89ac9ff69bdc (diff)
downloadPeerTube-2303a803aa19c2857efac9f2af2223ccae5757e2.tar.gz
PeerTube-2303a803aa19c2857efac9f2af2223ccae5757e2.tar.zst
PeerTube-2303a803aa19c2857efac9f2af2223ccae5757e2.zip
fix likes bar, grid adjustment and menu width
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html6
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss16
-rw-r--r--client/src/sass/application.scss21
-rw-r--r--client/src/sass/include/_bootstrap.scss20
4 files changed, 46 insertions, 17 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 0f2f3cf11..937f25eb6 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -26,9 +26,9 @@
26 </div> 26 </div>
27 27
28 <!-- Video information --> 28 <!-- Video information -->
29 <div *ngIf="video" class="container-fluid video-bottom"> 29 <div *ngIf="video" class="margin-content video-bottom">
30 <div class="row fullWidth"> 30 <div class="row fullWidth">
31 <div class="col-12 col-md-9 video-info"> 31 <div class="col-12 col-lg-9 video-info">
32 <div class="video-info-first-row"> 32 <div class="video-info-first-row">
33 <div> 33 <div>
34 <div class="d-block d-sm-none"> <!-- only shown on small devices, has its conterpart for larger viewports below --> 34 <div class="d-block d-sm-none"> <!-- only shown on small devices, has its conterpart for larger viewports below -->
@@ -199,7 +199,7 @@
199 199
200 <my-video-comments [video]="video" [user]="user"></my-video-comments> 200 <my-video-comments [video]="video" [user]="user"></my-video-comments>
201 </div> 201 </div>
202 <my-recommended-videos class="ml-3 ml-sm-0 col-12 col-md-3" 202 <my-recommended-videos class="col-12 col-lg-3"
203 [inputVideo]="video" [user]="user"></my-recommended-videos> 203 [inputVideo]="video" [user]="user"></my-recommended-videos>
204 </div> 204 </div>
205 </div> 205 </div>
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 912016f8c..633b16c05 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -163,9 +163,9 @@
163 } 163 }
164 164
165 .video-actions-rates { 165 .video-actions-rates {
166 display: flex; 166 margin-top: 20px;
167 flex-direction: column; 167 margin-bottom: 10px;
168 align-items: flex-end; 168 align-items: start;
169 169
170 .video-actions { 170 .video-actions {
171 height: 40px; // Align with the title 171 height: 40px; // Align with the title
@@ -442,12 +442,6 @@
442 .video-info-first-row { 442 .video-info-first-row {
443 flex-direction: column; 443 flex-direction: column;
444 margin-bottom: 20px; 444 margin-bottom: 20px;
445
446 .video-actions-rates {
447 margin-top: 20px;
448 margin-bottom: 10px;
449 align-items: start;
450 }
451 } 445 }
452 446
453 .video-info-date-views { 447 .video-info-date-views {
@@ -471,7 +465,7 @@
471 flex-direction: column; 465 flex-direction: column;
472 } 466 }
473 467
474 .other-videos { 468 /deep/ .other-videos {
475 padding-left: 0 !important; 469 padding-left: 0 !important;
476 } 470 }
477 471
@@ -501,7 +495,7 @@
501 } 495 }
502 } 496 }
503 497
504 .other-videos { 498 /deep/ .other-videos {
505 /deep/ .video-miniature { 499 /deep/ .video-miniature {
506 flex-direction: column; 500 flex-direction: column;
507 } 501 }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 38b7ea8d4..8e663d32f 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -302,12 +302,23 @@ table {
302 font-weight: $font-semibold; 302 font-weight: $font-semibold;
303} 303}
304 304
305@media screen and (max-width: 1000px) {
306 .main-col {
307 &.expanded {
308 .margin-content {
309 margin-left: $expanded-horizontal-margins/2;
310 margin-right: $expanded-horizontal-margins/2;
311 }
312 }
313 }
314}
315
305@media screen and (max-width: 900px) { 316@media screen and (max-width: 900px) {
306 .main-col { 317 .main-col {
307 &, &.expanded { 318 &.expanded {
308 .margin-content { 319 .margin-content {
309 margin-left: 50px; 320 margin-left: $expanded-horizontal-margins/3;
310 margin-right: 50px; 321 margin-right: $expanded-horizontal-margins/3;
311 } 322 }
312 323
313 .sub-menu { 324 .sub-menu {
@@ -327,6 +338,10 @@ table {
327 z-index: 10000; 338 z-index: 10000;
328 } 339 }
329 340
341 menu {
342 width: $menu-width;
343 }
344
330 .main-col { 345 .main-col {
331 margin-left: 0; 346 margin-left: 0;
332 347
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index a8777af71..4abc887ad 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -4,6 +4,26 @@ $zindex-modal: 10005;
4$modal-footer-border-width: 0; 4$modal-footer-border-width: 0;
5$modal-md: 600px; 5$modal-md: 600px;
6 6
7$grid-breakpoints: (
8 // Extra small screen / phone
9 xs: 0,
10 // Small screen / phone
11 sm: 576px,
12 // Medium screen / tablet
13 md: 768px,
14 // Large screen / desktop
15 lg: 900px,
16 // Extra large screen / wide desktop
17 xl: 1200px
18);
19
20$container-max-widths: (
21 sm: 420px,
22 md: 720px,
23 lg: 900px,
24 xl: 1140px
25);
26
7$input-btn-focus-width: 0; 27$input-btn-focus-width: 0;
8$input-btn-focus-color: inherit; 28$input-btn-focus-color: inherit;
9$input-focus-border-color: #ced4da; 29$input-focus-border-color: #ced4da;