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/+admin | |
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/+admin')
8 files changed, 21 insertions, 31 deletions
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss index 14189ff11..f2d752eb5 100644 --- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss | |||
@@ -14,12 +14,12 @@ a { | |||
14 | display: inline-block; | 14 | display: inline-block; |
15 | 15 | ||
16 | &, &:hover { | 16 | &, &:hover { |
17 | color: var(--mainForegroundColor); | 17 | color: pvar(--mainForegroundColor); |
18 | } | 18 | } |
19 | 19 | ||
20 | span { | 20 | span { |
21 | font-size: 80%; | 21 | font-size: 80%; |
22 | color: var(--inputPlaceholderColor); | 22 | color: pvar(--inputPlaceholderColor); |
23 | } | 23 | } |
24 | } | 24 | } |
25 | 25 | ||
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.scss b/client/src/app/+admin/follows/following-list/following-list.component.scss index 563f8d2bc..b108218b8 100644 --- a/client/src/app/+admin/follows/following-list/following-list.component.scss +++ b/client/src/app/+admin/follows/following-list/following-list.component.scss | |||
@@ -6,12 +6,12 @@ a { | |||
6 | display: inline-block; | 6 | display: inline-block; |
7 | 7 | ||
8 | &, &:hover { | 8 | &, &:hover { |
9 | color: var(--mainForegroundColor); | 9 | color: pvar(--mainForegroundColor); |
10 | } | 10 | } |
11 | 11 | ||
12 | span { | 12 | span { |
13 | font-size: 80%; | 13 | font-size: 80%; |
14 | color: var(--inputPlaceholderColor); | 14 | color: pvar(--inputPlaceholderColor); |
15 | } | 15 | } |
16 | } | 16 | } |
17 | 17 | ||
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss index dc43e4007..adcf2037e 100644 --- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss +++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss | |||
@@ -6,12 +6,12 @@ a { | |||
6 | display: inline-block; | 6 | display: inline-block; |
7 | 7 | ||
8 | &, &:hover { | 8 | &, &:hover { |
9 | color: var(--mainForegroundColor); | 9 | color: pvar(--mainForegroundColor); |
10 | } | 10 | } |
11 | 11 | ||
12 | span { | 12 | span { |
13 | font-size: 80%; | 13 | font-size: 80%; |
14 | color: var(--inputPlaceholderColor); | 14 | color: pvar(--inputPlaceholderColor); |
15 | } | 15 | } |
16 | } | 16 | } |
17 | 17 | ||
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss index c6c71587f..c1f66116b 100644 --- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss +++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss | |||
@@ -6,12 +6,12 @@ a { | |||
6 | display: inline-block; | 6 | display: inline-block; |
7 | 7 | ||
8 | &, &:hover { | 8 | &, &:hover { |
9 | color: var(--mainForegroundColor); | 9 | color: pvar(--mainForegroundColor); |
10 | } | 10 | } |
11 | 11 | ||
12 | span { | 12 | span { |
13 | font-size: 80%; | 13 | font-size: 80%; |
14 | color: var(--inputPlaceholderColor); | 14 | color: pvar(--inputPlaceholderColor); |
15 | } | 15 | } |
16 | } | 16 | } |
17 | 17 | ||
diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss index 26c2a30d4..404eb0504 100644 --- a/client/src/app/+admin/moderation/moderation.component.scss +++ b/client/src/app/+admin/moderation/moderation.component.scss | |||
@@ -47,29 +47,19 @@ | |||
47 | } | 47 | } |
48 | 48 | ||
49 | .screenratio { | 49 | .screenratio { |
50 | position: relative; | ||
51 | width: 100%; | ||
52 | height: 0; | ||
53 | padding-bottom: 56%; | ||
54 | |||
55 | div { | 50 | div { |
56 | @include miniature-thumbnail; | 51 | @include miniature-thumbnail; |
57 | position: absolute; | ||
58 | height: 100%; | ||
59 | width: 100%; | ||
60 | display: inline-flex; | 52 | display: inline-flex; |
61 | justify-content: center; | 53 | justify-content: center; |
62 | align-items: center; | 54 | align-items: center; |
63 | color: var(--inputPlaceholderColor); | 55 | color: pvar(--inputPlaceholderColor); |
64 | } | 56 | } |
65 | 57 | ||
66 | ::ng-deep iframe { | 58 | @include large-screen-ratio($selector: 'div, ::ng-deep iframe') { |
67 | position: absolute; | ||
68 | width: 100% !important; | 59 | width: 100% !important; |
69 | height: 100% !important; | 60 | height: 100% !important; |
70 | left: 0; | 61 | left: 0; |
71 | top: 0; | 62 | }; |
72 | } | ||
73 | } | 63 | } |
74 | 64 | ||
75 | .chip { | 65 | .chip { |
@@ -115,7 +105,7 @@ my-action-dropdown.show { | |||
115 | } | 105 | } |
116 | 106 | ||
117 | span { | 107 | span { |
118 | color: var(--inputPlaceholderColor); | 108 | color: pvar(--inputPlaceholderColor); |
119 | } | 109 | } |
120 | 110 | ||
121 | .video-table-video-image-label { | 111 | .video-table-video-image-label { |
@@ -135,7 +125,7 @@ my-action-dropdown.show { | |||
135 | flex-direction: column; | 125 | flex-direction: column; |
136 | justify-content: center; | 126 | justify-content: center; |
137 | font-size: 90%; | 127 | font-size: 90%; |
138 | color: var(--mainForegroundColor); | 128 | color: pvar(--mainForegroundColor); |
139 | line-height: 1rem; | 129 | line-height: 1rem; |
140 | 130 | ||
141 | div .glyphicon { | 131 | div .glyphicon { |
diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss index 1daa7b741..83030b7e0 100644 --- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss +++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss | |||
@@ -3,7 +3,7 @@ | |||
3 | 3 | ||
4 | .plugin { | 4 | .plugin { |
5 | margin: 15px 0; | 5 | margin: 15px 0; |
6 | background-color: var(--submenuColor); | 6 | background-color: pvar(--submenuColor); |
7 | } | 7 | } |
8 | 8 | ||
9 | .first-row { | 9 | .first-row { |
@@ -25,10 +25,10 @@ | |||
25 | margin-left: 10px; | 25 | margin-left: 10px; |
26 | 26 | ||
27 | my-global-icon { | 27 | my-global-icon { |
28 | @include apply-svg-color(var(--greyForegroundColor)); | 28 | @include apply-svg-color(pvar(--greyForegroundColor)); |
29 | 29 | ||
30 | &[iconName="npm"] { | 30 | &[iconName="npm"] { |
31 | @include fill-svg-color(var(--greyForegroundColor)); | 31 | @include fill-svg-color(pvar(--greyForegroundColor)); |
32 | } | 32 | } |
33 | } | 33 | } |
34 | } | 34 | } |
diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss index 56ea91d0b..b653abfaa 100644 --- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss +++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss | |||
@@ -19,12 +19,12 @@ | |||
19 | } | 19 | } |
20 | 20 | ||
21 | .ui-button.ui-state-active { | 21 | .ui-button.ui-state-active { |
22 | background-color: var(--mainColor); | 22 | background-color: pvar(--mainColor); |
23 | border-color: var(--mainColor); | 23 | border-color: pvar(--mainColor); |
24 | 24 | ||
25 | &:hover { | 25 | &:hover { |
26 | background-color: var(--mainHoverColor); | 26 | background-color: pvar(--mainHoverColor); |
27 | border-color: var(--mainHoverColor); | 27 | border-color: pvar(--mainHoverColor); |
28 | } | 28 | } |
29 | } | 29 | } |
30 | 30 | ||
diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss index 087155254..6b92f4d0b 100644 --- a/client/src/app/+admin/system/logs/logs.component.scss +++ b/client/src/app/+admin/system/logs/logs.component.scss | |||
@@ -28,7 +28,7 @@ | |||
28 | } | 28 | } |
29 | 29 | ||
30 | .warn { | 30 | .warn { |
31 | color: var(--mainColor); | 31 | color: pvar(--mainColor); |
32 | } | 32 | } |
33 | 33 | ||
34 | .error { | 34 | .error { |