From e66883b37ae0796256b3aba550670a2d76cfc98a Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Tue, 9 Jun 2020 09:33:28 +0200 Subject: `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 --- .../followers-list/followers-list.component.scss | 4 ++-- .../following-list/following-list.component.scss | 4 ++-- .../video-redundancies-list.component.scss | 4 ++-- .../instance-server-blocklist.component.scss | 4 ++-- .../app/+admin/moderation/moderation.component.scss | 20 +++++--------------- .../+admin/plugins/shared/plugin-list.component.scss | 6 +++--- .../+admin/plugins/shared/toggle-plugin-type.scss | 8 ++++---- .../src/app/+admin/system/logs/logs.component.scss | 2 +- 8 files changed, 21 insertions(+), 31 deletions(-) (limited to 'client/src/app/+admin') 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 { display: inline-block; &, &:hover { - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } span { font-size: 80%; - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } } 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 { display: inline-block; &, &:hover { - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } span { font-size: 80%; - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } } 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 { display: inline-block; &, &:hover { - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } span { font-size: 80%; - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } } 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 { display: inline-block; &, &:hover { - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } span { font-size: 80%; - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } } 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 @@ } .screenratio { - position: relative; - width: 100%; - height: 0; - padding-bottom: 56%; - div { @include miniature-thumbnail; - position: absolute; - height: 100%; - width: 100%; display: inline-flex; justify-content: center; align-items: center; - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } - ::ng-deep iframe { - position: absolute; + @include large-screen-ratio($selector: 'div, ::ng-deep iframe') { width: 100% !important; height: 100% !important; left: 0; - top: 0; - } + }; } .chip { @@ -115,7 +105,7 @@ my-action-dropdown.show { } span { - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } .video-table-video-image-label { @@ -135,7 +125,7 @@ my-action-dropdown.show { flex-direction: column; justify-content: center; font-size: 90%; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); line-height: 1rem; 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 @@ .plugin { margin: 15px 0; - background-color: var(--submenuColor); + background-color: pvar(--submenuColor); } .first-row { @@ -25,10 +25,10 @@ margin-left: 10px; my-global-icon { - @include apply-svg-color(var(--greyForegroundColor)); + @include apply-svg-color(pvar(--greyForegroundColor)); &[iconName="npm"] { - @include fill-svg-color(var(--greyForegroundColor)); + @include fill-svg-color(pvar(--greyForegroundColor)); } } } 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 @@ } .ui-button.ui-state-active { - background-color: var(--mainColor); - border-color: var(--mainColor); + background-color: pvar(--mainColor); + border-color: pvar(--mainColor); &:hover { - background-color: var(--mainHoverColor); - border-color: var(--mainHoverColor); + background-color: pvar(--mainHoverColor); + border-color: pvar(--mainHoverColor); } } 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 @@ } .warn { - color: var(--mainColor); + color: pvar(--mainColor); } .error { -- cgit v1.2.3