aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
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/shared
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/shared')
-rw-r--r--client/src/app/shared/video/abstract-video-list.scss39
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss3
2 files changed, 30 insertions, 12 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;