aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
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
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')
-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
-rw-r--r--client/src/sass/include/_miniature.scss4
-rw-r--r--client/src/sass/include/_variables.scss1
5 files changed, 36 insertions, 16 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;
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 95b759225..2ea4aa105 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -121,6 +121,7 @@ $play-overlay-width: 18px;
121 121
122 .video-miniature-information { 122 .video-miniature-information {
123 width: 100% !important; 123 width: 100% !important;
124 text-align: left;
124 125
125 span { 126 span {
126 width: 100%; 127 width: 100%;
@@ -128,8 +129,9 @@ $play-overlay-width: 18px;
128 } 129 }
129 130
130 .video-thumbnail { 131 .video-thumbnail {
131 width: 100%; 132 width: calc(100% + 30px);
132 height: auto; 133 height: auto;
134 margin: 0 -15px;
133 135
134 img { 136 img {
135 width: 100%; 137 width: 100%;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index b8eb06f2c..0e71a1867 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -46,6 +46,7 @@ $footer-border-color: $header-border-color;
46 46
47$separator-border-color: rgba(0, 0, 0, 0.10); 47$separator-border-color: rgba(0, 0, 0, 0.10);
48 48
49$video-miniature-width: 238px;
49$video-thumbnail-height: 122px; 50$video-thumbnail-height: 122px;
50$video-thumbnail-width: 223px; 51$video-thumbnail-width: 223px;
51 52