aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-04-05 17:00:09 +0200
committerChocobozzz <me@florianbigard.com>2019-04-05 17:00:09 +0200
commit0f4905e120e66c5227ca3c57074e3e8554424621 (patch)
treeeb62cf1f23386a66700545d79ef3ee296b407267 /client
parent32157c0892ed000d15ad8fbc89e90fd005a5f4e8 (diff)
downloadPeerTube-0f4905e120e66c5227ca3c57074e3e8554424621.tar.gz
PeerTube-0f4905e120e66c5227ca3c57074e3e8554424621.tar.zst
PeerTube-0f4905e120e66c5227ca3c57074e3e8554424621.zip
2 rows per overview section
Diffstat (limited to 'client')
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss155
-rw-r--r--client/src/app/videos/video-list/video-overview.component.scss9
2 files changed, 90 insertions, 74 deletions
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index fa2739f00..80d6c4fda 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -10,79 +10,84 @@
10 height: 195px; 10 height: 195px;
11 vertical-align: top; 11 vertical-align: top;
12 12
13 .video-miniature-information { 13 .video-bottom {
14 width: 200px; 14 display: flex;
15 line-height: normal;
16 15
17 .video-miniature-name { 16 .video-miniature-information {
18 @include miniature-name; 17 width: 200px;
19 } 18 line-height: normal;
20 19
21 .video-miniature-created-at-views { 20 .video-miniature-name {
22 display: block; 21 @include miniature-name;
23 font-size: 13px; 22 }
24 }
25 23
26 .video-miniature-account, 24 .video-miniature-created-at-views {
27 .video-miniature-channel { 25 display: block;
28 @include disable-default-a-behaviour; 26 font-size: 13px;
29 @include ellipsis; 27 }
30 28
31 display: block; 29 .video-miniature-account,
32 font-size: 13px; 30 .video-miniature-channel {
33 color: $grey-foreground-color; 31 @include disable-default-a-behaviour;
32 @include ellipsis;
34 33
35 &:hover { 34 display: block;
36 color: $grey-foreground-hover-color; 35 font-size: 13px;
36 color: $grey-foreground-color;
37
38 &:hover {
39 color: $grey-foreground-hover-color;
40 }
37 } 41 }
38 }
39 42
40 .video-info-privacy, 43 .video-info-privacy,
41 .video-info-blacklisted .blacklisted-label, 44 .video-info-blacklisted .blacklisted-label,
42 .video-info-nsfw { 45 .video-info-nsfw {
43 font-weight: $font-semibold; 46 font-weight: $font-semibold;
44 } 47 }
45 48
46 .video-info-blacklisted { 49 .video-info-blacklisted {
47 color: red; 50 color: red;
48 51
49 .blacklisted-reason::before { 52 .blacklisted-reason::before {
50 content: ' - '; 53 content: ' - ';
54 }
51 } 55 }
52 }
53 56
54 .video-info-nsfw { 57 .video-info-nsfw {
55 color: red; 58 color: red;
59 }
56 } 60 }
57 }
58
59 .video-bottom {
60 display: flex;
61 61
62 .video-actions { 62 .video-actions {
63 margin-top: 3px; 63 margin-top: 3px;
64 margin-right: 10px; 64 margin-right: 10px;
65 }
66 65
67 /deep/ .dropdown-root:not(.show) { 66 /deep/ .dropdown-root:not(.show) {
68 display: none; 67 display: none;
69 } 68 }
70 69
71 &:hover /deep/ .dropdown-root { 70 /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root {
72 display: block; 71 display: block;
72 }
73 } 73 }
74 74
75 /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root { 75 &:hover .video-actions /deep/ .dropdown-root {
76 display: block; 76 display: block;
77 } 77 }
78 78
79 @media screen and (max-width: $small-view) { 79 @media screen and (max-width: $small-view) {
80 .video-actions { 80 .video-miniature-information .video-miniature-name {
81 margin-right: 0; 81 margin-top: 0;
82 } 82 }
83 83
84 /deep/ .dropdown-root { 84 .video-actions {
85 display: block !important; 85 margin: 0;
86 top: -3px;
87
88 /deep/ .dropdown-root {
89 display: block !important;
90 }
86 } 91 }
87 } 92 }
88 } 93 }
@@ -97,38 +102,40 @@
97 margin-right: 10px; 102 margin-right: 10px;
98 } 103 }
99 104
100 .video-miniature-information { 105 .video-bottom {
101 width: auto; 106 .video-miniature-information {
102 min-width: 500px; 107 width: auto;
103 108 min-width: 500px;
104 .video-miniature-name { 109
105 @include ellipsis-multiline(1.3em, 2); 110 .video-miniature-name {
106 111 @include ellipsis-multiline(1.3em, 2);
107 margin-top: 2px; 112
108 margin-bottom: 5px; 113 margin-top: 2px;
109 } 114 margin-bottom: 5px;
110 115 }
111 .video-miniature-created-at-views, 116
112 .video-miniature-account, 117 .video-miniature-created-at-views,
113 .video-miniature-channel { 118 .video-miniature-account,
114 font-size: 14px; 119 .video-miniature-channel {
115 width: fit-content; 120 font-size: 14px;
116 } 121 width: fit-content;
117 122 }
118 .video-info-privacy { 123
119 margin-top: 5px; 124 .video-info-privacy {
125 margin-top: 5px;
126 }
127
128 .video-info-blacklisted {
129 margin-top: 3px;
130 }
120 } 131 }
121 132
122 .video-info-blacklisted { 133 .video-actions {
123 margin-top: 3px; 134 margin: 0;
135 top: -3px;
124 } 136 }
125 } 137 }
126 138
127 .video-bottom .video-actions {
128 margin: 0;
129 top: -3px;
130 }
131
132 @media screen and (max-width: $small-view) { 139 @media screen and (max-width: $small-view) {
133 flex-direction: column; 140 flex-direction: column;
134 height: auto; 141 height: auto;
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss
index 42b542233..a24766783 100644
--- a/client/src/app/videos/video-list/video-overview.component.scss
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -3,6 +3,8 @@
3@import '_miniature'; 3@import '_miniature';
4 4
5.section { 5.section {
6 max-height: 500px; // 2 rows max
7 overflow: hidden;
6 padding-top: 10px; 8 padding-top: 10px;
7 9
8 &:first-child { 10 &:first-child {
@@ -44,11 +46,18 @@
44} 46}
45 47
46@media screen and (max-width: 500px) { 48@media screen and (max-width: 500px) {
49 .margin-content {
50 margin: 0 !important;
51 }
52
47 .section-title { 53 .section-title {
48 font-size: 17px; 54 font-size: 17px;
49 } 55 }
50 56
51 .section { 57 .section {
58 max-height: initial;
59 overflow: initial;
60
52 @include video-miniature-small-screen; 61 @include video-miniature-small-screen;
53 } 62 }
54} 63}
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-07 04:26:36 +0000