diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-06-09 09:33:28 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-06-09 09:33:28 +0200 |
commit | e66883b37ae0796256b3aba550670a2d76cfc98a (patch) | |
tree | 3cce3c78e9f9f327470f0370a1b4065fe7e0009e /client/src/app/shared/video/abstract-video-list.scss | |
parent | 6ad971d5f5e9ea2adfc58bd83ba1790efa4a8d12 (diff) | |
download | PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.gz PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.zst PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.zip |
`fitWidth` for `video-miniature`, fluid grid (#2830)
* Fluid abstract video list
* normalize timestamp display on miniatures
* use grid for abstract-video-list
- refactor scss function var to pvar to avoid overriding css variables
- move fluid-grid margins to adapt-margin-content-width mixin for maintainability
- fix video-miniature-name margin-top on small screen
* move sceenratio function in a mixin
* display no miniature avatar in channel videos view
Diffstat (limited to 'client/src/app/shared/video/abstract-video-list.scss')
-rw-r--r-- | client/src/app/shared/video/abstract-video-list.scss | 25 |
1 files changed, 23 insertions, 2 deletions
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss index 4149c9109..2aab40ea8 100644 --- a/client/src/app/shared/video/abstract-video-list.scss +++ b/client/src/app/shared/video/abstract-video-list.scss | |||
@@ -1,6 +1,24 @@ | |||
1 | @import '_bootstrap-variables'; | ||
2 | @import '_variables'; | ||
1 | @import '_mixins'; | 3 | @import '_mixins'; |
2 | @import '_miniature'; | 4 | @import '_miniature'; |
3 | 5 | ||
6 | .videos { | ||
7 | display: grid; | ||
8 | column-gap: calc(10px + .2%); | ||
9 | grid-template-columns: repeat( | ||
10 | auto-fill, | ||
11 | minmax( | ||
12 | var(--miniature-min-width, #{$video-thumbnail-width}), | ||
13 | 1fr | ||
14 | ) | ||
15 | ); | ||
16 | |||
17 | @media screen and (min-width: #{breakpoint(xxl)}) { | ||
18 | --miniature-min-width: 300px; | ||
19 | } | ||
20 | } | ||
21 | |||
4 | .videos-header { | 22 | .videos-header { |
5 | display: flex; | 23 | display: flex; |
6 | justify-content: space-between; | 24 | justify-content: space-between; |
@@ -45,13 +63,16 @@ | |||
45 | margin-top: -10px; | 63 | margin-top: -10px; |
46 | padding-top: 20px; | 64 | padding-top: 20px; |
47 | 65 | ||
66 | // make the element span a full grid row within .videos grid | ||
67 | grid-column: 1 / -1; | ||
68 | |||
48 | &:not(:first-child) { | 69 | &:not(:first-child) { |
49 | border-top: 1px solid $separator-border-color; | 70 | border-top: 1px solid $separator-border-color; |
50 | } | 71 | } |
51 | } | 72 | } |
52 | 73 | ||
53 | .margin-content { | 74 | :host-context(.main-col:not(.expanded)) .margin-content { |
54 | @include adapt-margin-content-width; | 75 | @include adapt-margin-content-width($fluid: true); |
55 | } | 76 | } |
56 | 77 | ||
57 | @media screen and (max-width: $mobile-view) { | 78 | @media screen and (max-width: $mobile-view) { |