diff options
author | Chocobozzz <me@florianbigard.com> | 2021-03-25 13:42:55 +0100 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2021-03-31 09:05:51 +0200 |
commit | 60c35932f6a14cfe83bb0e54407427cce70171ea (patch) | |
tree | 6d15665a5375e14bea8eb6d63acc8f4139372dad /client/src/app/+video-channels/video-channels.component.scss | |
parent | 4097c6d66cb2919c28b5bce44b259e630923fbe0 (diff) | |
download | PeerTube-60c35932f6a14cfe83bb0e54407427cce70171ea.tar.gz PeerTube-60c35932f6a14cfe83bb0e54407427cce70171ea.tar.zst PeerTube-60c35932f6a14cfe83bb0e54407427cce70171ea.zip |
Redesign channel page
Diffstat (limited to 'client/src/app/+video-channels/video-channels.component.scss')
-rw-r--r-- | client/src/app/+video-channels/video-channels.component.scss | 358 |
1 files changed, 307 insertions, 51 deletions
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index 22f21dcc6..16e13c578 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss | |||
@@ -1,89 +1,345 @@ | |||
1 | // Bootstrap grid utilities require functions, variables and mixins | ||
2 | @import 'node_modules/bootstrap/scss/functions'; | ||
3 | @import 'node_modules/bootstrap/scss/variables'; | ||
4 | @import 'node_modules/bootstrap/scss/mixins'; | ||
5 | @import 'node_modules/bootstrap/scss/grid'; | ||
6 | |||
7 | @import '_variables'; | 1 | @import '_variables'; |
8 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | @import '_miniature'; | ||
9 | 4 | ||
10 | .sub-menu { | 5 | .root { |
11 | @include sub-menu-with-actor; | 6 | --myGlobalPadding: 60px; |
7 | --myChannelImgMargin: 30px; | ||
8 | --myFontSize: 16px; | ||
9 | --myGreyChannelFontSize: 16px; | ||
10 | --myGreyOwnerFontSize: 14px; | ||
11 | } | ||
12 | 12 | ||
13 | .actor, .actor-info { | 13 | .section-label { |
14 | width: 100%; | 14 | color: pvar(--mainColor); |
15 | font-size: 12px; | ||
16 | margin-bottom: 15px; | ||
17 | font-weight: $font-bold; | ||
18 | letter-spacing: 2.5px; | ||
19 | } | ||
20 | |||
21 | .links { | ||
22 | @include fluid-videos-miniature-layout; | ||
23 | } | ||
24 | |||
25 | .channel-info { | ||
26 | display: grid; | ||
27 | grid-template-columns: 1fr auto; | ||
28 | grid-template-rows: auto auto; | ||
29 | |||
30 | background-color: pvar(--channelBackgroundColor); | ||
31 | margin-bottom: 45px; | ||
32 | padding: var(--myGlobalPadding) var(--myGlobalPadding) 0 var(--myGlobalPadding); | ||
33 | font-size: var(--myFontSize); | ||
34 | } | ||
35 | |||
36 | .channel-avatar-row { | ||
37 | display: flex; | ||
38 | grid-column: 1; | ||
39 | margin-bottom: 30px; | ||
40 | |||
41 | img { | ||
42 | @include channel-avatar(120px); | ||
43 | } | ||
44 | |||
45 | > div { | ||
46 | margin-left: var(--myChannelImgMargin); | ||
15 | } | 47 | } |
16 | 48 | ||
17 | .actor-info { | 49 | .actor-info { |
18 | display: grid !important; | 50 | display: flex; |
19 | grid-template-columns: 1fr auto; | ||
20 | grid-template-rows: 1fr auto / 1fr auto; | ||
21 | grid-template-areas: "name buttons" "lower buttons"; | ||
22 | 51 | ||
23 | @include media-breakpoint-down(lg) { | 52 | > div:first-child { |
24 | grid-template-areas: "name name" "lower buttons"; | 53 | flex-grow: 1; |
25 | } | 54 | } |
26 | } | 55 | } |
27 | 56 | ||
28 | .actor-names { | 57 | .actor-display-name { |
29 | grid-area: name; | 58 | display: flex; |
59 | flex-wrap: wrap; | ||
30 | } | 60 | } |
31 | 61 | ||
32 | .actor-name { | 62 | h1 { |
33 | flex-grow: 1; | 63 | font-size: 28px; |
64 | font-weight: $font-bold; | ||
65 | margin: 0; | ||
66 | } | ||
34 | 67 | ||
35 | .copy-button { | 68 | .actor-handle, |
36 | border: none; | 69 | .actor-counters { |
37 | padding: 5px; | 70 | color: pvar(--greyForegroundColor); |
38 | margin-top: -2px; | 71 | font-size: var(--myGreyChannelFontSize); |
39 | } | 72 | } |
73 | |||
74 | .actor-counters > *:not(:last-child)::after { | ||
75 | content: '•'; | ||
76 | margin: 0 10px; | ||
77 | color: pvar(--mainColor); | ||
40 | } | 78 | } |
41 | } | 79 | } |
42 | 80 | ||
43 | .margin-content { | 81 | .channel-description { |
44 | // margin-content is required, but child views have their own margins | 82 | grid-column: 1; |
45 | // that match views outside the scope of accounts, so we only align | ||
46 | // them with the margins of .sub-menu when required. | ||
47 | margin: 0; | ||
48 | } | 83 | } |
49 | 84 | ||
50 | .right-buttons { | 85 | .show-more { |
86 | display: none; | ||
87 | color: pvar(--mainColor); | ||
88 | cursor: pointer; | ||
89 | margin: 10px auto 45px auto; | ||
90 | } | ||
91 | |||
92 | |||
93 | .channel-buttons { | ||
51 | display: flex; | 94 | display: flex; |
52 | height: max-content; | 95 | flex-wrap: wrap; |
53 | margin-left: auto; | 96 | |
54 | margin-top: 10px; | 97 | > *:not(:last-child) { |
98 | margin-right: 15px; | ||
99 | } | ||
100 | } | ||
101 | |||
102 | .channel-buttons.right { | ||
103 | margin-left: 45px; | ||
104 | } | ||
105 | |||
106 | // Only used by mobile | ||
107 | .channel-buttons.bottom { | ||
108 | display: none; | ||
109 | } | ||
110 | |||
111 | .created-at { | ||
112 | margin-top: 15px; | ||
113 | color: pvar(--greyForegroundColor); | ||
114 | padding-bottom: 60px; | ||
115 | } | ||
116 | |||
117 | .owner-card { | ||
118 | margin-left: 105px; | ||
119 | grid-column: 2; | ||
120 | // Takes all the column | ||
121 | grid-row: 1 / 3; | ||
122 | place-self: end; | ||
123 | } | ||
124 | |||
125 | // Only used on mobile | ||
126 | .bottom-owner { | ||
127 | display: none; | ||
128 | } | ||
129 | |||
130 | .owner-block { | ||
131 | background-color: pvar(--mainBackgroundColor); | ||
132 | padding: 30px; | ||
133 | width: 300px; | ||
134 | font-size: var(--myFontSize); | ||
135 | |||
136 | .avatar-row { | ||
137 | display: flex; | ||
138 | margin-bottom: 15px; | ||
139 | |||
140 | img { | ||
141 | @include avatar(48px); | ||
142 | } | ||
143 | |||
144 | .actor-info { | ||
145 | margin-left: 15px; | ||
146 | } | ||
147 | |||
148 | h4 { | ||
149 | font-size: 18px; | ||
150 | margin: 0; | ||
151 | } | ||
152 | |||
153 | .actor-handle { | ||
154 | font-size: var(--myGreyOwnerFontSize); | ||
155 | color: pvar(--greyForegroundColor); | ||
156 | } | ||
157 | } | ||
158 | |||
159 | .owner-description { | ||
160 | height: 140px; | ||
161 | |||
162 | @include fade-text(120px, pvar(--mainBackgroundColor)); | ||
163 | } | ||
164 | } | ||
165 | |||
166 | .view-account.short { | ||
167 | @include peertube-button-link; | ||
168 | @include orange-button-inverted; | ||
169 | |||
170 | margin-top: 30px; | ||
171 | } | ||
172 | |||
173 | .view-account.complete { | ||
174 | display: none; | ||
175 | } | ||
176 | |||
177 | .copy-button { | ||
178 | border: none; | ||
179 | } | ||
180 | |||
181 | @media screen and (max-width: 1400px) { | ||
182 | // Takes all the row width | ||
183 | .channel-avatar-row { | ||
184 | grid-column: 1 / 3; | ||
185 | } | ||
186 | |||
187 | .owner-card { | ||
188 | grid-row: 2; | ||
189 | margin-left: 60px; | ||
190 | } | ||
191 | } | ||
192 | |||
193 | @media screen and (max-width: 1100px) { | ||
194 | .root { | ||
195 | --myGlobalPadding: 45px; | ||
196 | --myChannelImgMargin: 15px; | ||
197 | } | ||
198 | |||
199 | .channel-info { | ||
200 | display: flex; | ||
201 | flex-direction: column; | ||
202 | margin-bottom: 0; | ||
203 | } | ||
204 | |||
205 | .channel-description:not(.expanded) { | ||
206 | max-height: 70px; | ||
207 | |||
208 | @include fade-text(30px, pvar(--channelBackgroundColor)); | ||
209 | } | ||
210 | |||
211 | .show-more { | ||
212 | display: inline-block; | ||
213 | } | ||
214 | |||
215 | .channel-buttons.bottom { | ||
216 | display: flex; | ||
217 | justify-content: center; | ||
218 | margin-bottom: 30px; | ||
219 | } | ||
220 | |||
221 | .channel-buttons.right { | ||
222 | display: none; | ||
223 | } | ||
224 | |||
225 | .owner-card { | ||
226 | display: none; | ||
227 | } | ||
55 | 228 | ||
56 | grid-row: buttons-start / span buttons-end; | 229 | .bottom-owner { |
57 | grid-column: buttons-start; | 230 | display: block; |
231 | width: 100%; | ||
232 | border-bottom: 2px solid $separator-border-color; | ||
233 | padding: var(--myGlobalPadding) 45px; | ||
234 | margin-bottom: 60px; | ||
235 | } | ||
58 | 236 | ||
59 | @include media-breakpoint-down(lg) { | 237 | .owner-block { |
60 | flex-flow: column-reverse; | 238 | display: grid; |
239 | width: 100%; | ||
240 | padding: 0; | ||
61 | 241 | ||
62 | a { | 242 | .avatar-row { |
63 | margin-top: 0.25rem; | 243 | grid-column: 1; |
64 | margin-right: 0 !important; | 244 | margin-right: 30px; |
245 | } | ||
246 | |||
247 | .owner-description { | ||
248 | grid-column: 2; | ||
249 | max-height: 70px; | ||
250 | |||
251 | @include fade-text(30px, pvar(--mainBackgroundColor)); | ||
252 | } | ||
253 | |||
254 | .view-account { | ||
255 | grid-column: 2; | ||
65 | } | 256 | } |
66 | } | 257 | } |
67 | 258 | ||
68 | a { | 259 | .view-account.complete { |
69 | @include peertube-button-outline; | 260 | display: inline-block; |
70 | line-height: 1.8; | 261 | margin-top: 10px; |
262 | color: pvar(--mainColor); | ||
71 | } | 263 | } |
72 | 264 | ||
73 | my-subscribe-button { | 265 | .view-account.short { |
74 | height: min-content; | 266 | display: none; |
75 | } | 267 | } |
76 | } | 268 | } |
77 | 269 | ||
78 | @media screen and (max-width: $mobile-view) { | 270 | @media screen and (max-width: $mobile-view) { |
79 | .sub-menu { | 271 | .root { |
80 | .actor { | 272 | --myGlobalPadding: 15px; |
81 | flex-direction: column; | 273 | --myFontSize: 14px; |
274 | --myGreyChannelFontSize: 13px; | ||
275 | --myGreyOwnerFontSize: 13px; | ||
276 | } | ||
277 | |||
278 | .links { | ||
279 | margin: auto !important; | ||
280 | width: min-content; | ||
281 | } | ||
282 | |||
283 | .section-label { | ||
284 | font-size: 10px; | ||
285 | letter-spacing: 2.1px; | ||
286 | margin-bottom: 5px; | ||
287 | } | ||
288 | |||
289 | .channel-avatar-row { | ||
290 | margin-bottom: 15px; | ||
291 | |||
292 | h1 { | ||
293 | font-size: 22px; | ||
294 | } | ||
295 | |||
296 | img { | ||
297 | @include channel-avatar(80px); | ||
298 | } | ||
299 | } | ||
300 | |||
301 | .show-more { | ||
302 | margin-bottom: 30px; | ||
303 | } | ||
82 | 304 | ||
83 | .actor-info .actor-names { | 305 | .bottom-owner { |
306 | padding: 15px; | ||
307 | margin-bottom: 30px; | ||
308 | |||
309 | .section-label { | ||
310 | display: none; | ||
311 | } | ||
312 | } | ||
313 | |||
314 | .owner-block { | ||
315 | display: block; | ||
316 | |||
317 | .avatar-row { | ||
318 | display: flex; | ||
319 | flex-direction: row-reverse; | ||
320 | margin: 0; | ||
321 | |||
322 | h4 { | ||
323 | font-size: 16px; | ||
324 | } | ||
325 | |||
326 | .actor-info { | ||
327 | display: flex; | ||
84 | flex-direction: column; | 328 | flex-direction: column; |
85 | align-items: normal; | 329 | align-items: flex-end; |
330 | justify-content: flex-end; | ||
331 | margin-top: -5px; | ||
332 | } | ||
333 | |||
334 | img { | ||
335 | @include channel-avatar(64px); | ||
336 | |||
337 | margin: -30px 0 0 15px; | ||
86 | } | 338 | } |
87 | } | 339 | } |
340 | |||
341 | .owner-description { | ||
342 | display: none; | ||
343 | } | ||
88 | } | 344 | } |
89 | } | 345 | } |