aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-04-03 13:25:52 +0200
committerChocobozzz <me@florianbigard.com>2019-04-03 13:25:52 +0200
commit11dd0c2e4202e7ad68d8b7e6706de846401d29ff (patch)
treee7d8ce1e90e34faee14ab04dff4ab966d83047f4 /client/src/app
parent8137c8b9862689789c023b0f50dcd09ba27db13a (diff)
downloadPeerTube-11dd0c2e4202e7ad68d8b7e6706de846401d29ff.tar.gz
PeerTube-11dd0c2e4202e7ad68d8b7e6706de846401d29ff.tar.zst
PeerTube-11dd0c2e4202e7ad68d8b7e6706de846401d29ff.zip
Improve abstract videos list
Better responsive and align miniatures to the left
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/shared/video/abstract-video-list.scss39
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss3
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss5
3 files changed, 32 insertions, 15 deletions
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 65842af35..a1d9168de 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -1,14 +1,6 @@
1@import '_mixins'; 1@import '_mixins';
2@import '_miniature'; 2@import '_miniature';
3 3
4.videos {
5 text-align: center;
6
7 my-video-miniature {
8 text-align: left;
9 }
10}
11
12.videos-header { 4.videos-header {
13 display: flex; 5 display: flex;
14 height: 80px; 6 height: 80px;
@@ -32,8 +24,33 @@
32 } 24 }
33} 25}
34 26
35@media screen and (max-width: 500px) { 27.margin-content {
36 .videos { 28 width: $video-miniature-width * 6;
37 @include video-miniature-small-screen; 29 margin: auto;
30
31 @media screen and (max-width: 1800px) {
32 width: $video-miniature-width * 5;
33 }
34
35 @media screen and (max-width: 1800px - $video-miniature-width) {
36 width: $video-miniature-width * 4;
37 }
38
39 @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
40 width: $video-miniature-width * 3;
41 }
42
43 @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
44 width: $video-miniature-width * 2;
45 }
46
47 @media screen and (max-width: 500px) {
48 width: auto;
49 margin: 0 !important;
50
51 .videos {
52 @include video-miniature-small-screen;
53 }
38 } 54 }
39} 55}
56
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 7d857a74e..4799e00c2 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -3,8 +3,9 @@
3@import '_miniature'; 3@import '_miniature';
4 4
5.video-miniature { 5.video-miniature {
6 width: $video-miniature-width;
7
6 display: inline-block; 8 display: inline-block;
7 padding-right: 15px;
8 margin-bottom: 30px; 9 margin-bottom: 30px;
9 height: 195px; 10 height: 195px;
10 vertical-align: top; 11 vertical-align: top;
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 11406e887..2874847cd 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -20,8 +20,6 @@ $player-factor: 1.7; // 16/9
20} 20}
21 21
22.root { 22.root {
23 margin: 0 -15px;
24
25 &.theater-enabled #video-wrapper { 23 &.theater-enabled #video-wrapper {
26 flex-direction: column; 24 flex-direction: column;
27 justify-content: center; 25 justify-content: center;
@@ -51,6 +49,7 @@ $player-factor: 1.7; // 16/9
51 background-color: #000; 49 background-color: #000;
52 display: flex; 50 display: flex;
53 justify-content: center; 51 justify-content: center;
52 margin: 0 -15px;
54 53
55 .remote-server-down { 54 .remote-server-down {
56 color: #fff; 55 color: #fff;
@@ -531,7 +530,7 @@ my-video-comments {
531 530
532@media screen and (max-width: 600px) { 531@media screen and (max-width: 600px) {
533 .video-bottom { 532 .video-bottom {
534 margin: 20px 0 0 0; 533 margin: 20px 0 0 0 !important;
535 534
536 .video-info { 535 .video-info {
537 padding: 0; 536 padding: 0;