aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+admin
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-06-09 09:33:28 +0200
committerGitHub <noreply@github.com>2020-06-09 09:33:28 +0200
commite66883b37ae0796256b3aba550670a2d76cfc98a (patch)
tree3cce3c78e9f9f327470f0370a1b4065fe7e0009e /client/src/app/+admin
parent6ad971d5f5e9ea2adfc58bd83ba1790efa4a8d12 (diff)
downloadPeerTube-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')
-rw-r--r--client/src/app/+admin/follows/followers-list/followers-list.component.scss4
-rw-r--r--client/src/app/+admin/follows/following-list/following-list.component.scss4
-rw-r--r--client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss4
-rw-r--r--client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss4
-rw-r--r--client/src/app/+admin/moderation/moderation.component.scss20
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-list.component.scss6
-rw-r--r--client/src/app/+admin/plugins/shared/toggle-plugin-type.scss8
-rw-r--r--client/src/app/+admin/system/logs/logs.component.scss2
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 {