Unverified Commit e66883b3 authored by Rigel Kent's avatar Rigel Kent Committed by GitHub
Browse files

`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
parent 6ad971d5
......@@ -27,7 +27,7 @@
margin-right: 5px;
&.category {
background-color: var(--mainColor);
background-color: pvar(--mainColor);
}
}
}
......
......@@ -19,6 +19,7 @@
<div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div>
<my-video-miniature
class="pr-2"
*ngFor="let video of getVideosOf(videoChannel)"
[video]="video" [user]="user" [displayVideoActions]="true"
></my-video-miniature>
......
......@@ -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);
}
}
......
......@@ -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);
}
}
......
......@@ -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);
}
}
......
......@@ -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);
}
}
......
......@@ -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 {
......
......@@ -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));
}
}
}
......
......@@ -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);
}
}
......
......@@ -28,7 +28,7 @@
}
.warn {
color: var(--mainColor);
color: pvar(--mainColor);
}
.error {
......
......@@ -19,7 +19,7 @@
width: fit-content;
display: flex;
align-items: baseline;
color: var(--mainForegroundColor);
color: pvar(--mainForegroundColor);
.video-channel-display-name {
font-weight: $font-semibold;
......
......@@ -30,7 +30,7 @@
width: fit-content;
display: flex;
align-items: baseline;
color: var(--mainForegroundColor);
color: pvar(--mainForegroundColor);
.video-channel-display-name {
font-weight: $font-semibold;
......
......@@ -3,7 +3,7 @@
@import '_miniature';
.playlist-info {
background-color: var(--submenuColor);
background-color: pvar(--submenuColor);
margin-left: -15px;
margin-top: -$sub-menu-margin-bottom;
......@@ -14,7 +14,7 @@
/* fix ellipsis dots background color */
::ng-deep .miniature-name::after {
background-color: var(--submenuColor) !important;
background-color: pvar(--submenuColor) !important;
}
}
......
......@@ -84,7 +84,7 @@ my-edit-button {
.video-bottom,
.video-bottom .video-miniature-information {
/* same width than a.video-thumbnail */
max-width: 223px !important;
max-width: $video-thumbnail-width !important;
}
}
}
......@@ -110,7 +110,7 @@ my-edit-button {
::ng-deep {
.action-button {
/* same width than a.video-thumbnail */
width: 223px;
width: $video-thumbnail-width;
}
}
}
......@@ -124,7 +124,7 @@ my-edit-button {
flex-direction: column;
.video-miniature-name {
max-width: 223px;
max-width: $video-thumbnail-width;
}
}
}
......
......@@ -28,7 +28,7 @@ header {
margin-bottom: 10px;
my-global-icon {
@include apply-svg-color(var(--mainBackgroundColor));
@include apply-svg-color(pvar(--mainBackgroundColor));
width: 22px;
height: 22px;
......@@ -42,13 +42,13 @@ header {
&.active,
&.completed {
.step-index {
border-color: var(--mainColor);
background-color: var(--mainColor);
color: var(--mainBackgroundColor);
border-color: pvar(--mainColor);
background-color: pvar(--mainColor);
color: pvar(--mainBackgroundColor);
}
.step-label {
color: var(--mainColor);
color: pvar(--mainColor);
}
}
......
......@@ -39,7 +39,7 @@
ngb-accordion ::ng-deep {
.btn {
font-weight: $font-semibold !important;
color: var(--mainForegroundColor) !important;
color: pvar(--mainForegroundColor) !important;
}
}
}
......@@ -94,7 +94,7 @@ button {
margin-bottom: 20px;
::ng-deep .loader div {
border-color: var(--mainColor) transparent transparent transparent;
border-color: pvar(--mainColor) transparent transparent transparent;
}
& + div {
......
......@@ -47,6 +47,10 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
super()
this.titlePage = this.i18n('Published videos')
this.displayOptions = {
...this.displayOptions,
avatar: false
}
}
ngOnInit () {
......
......@@ -13,7 +13,7 @@
.sub-header-container {
margin-top: $header-height;
background-color: var(--mainBackgroundColor);
background-color: pvar(--mainBackgroundColor);
width: 100%;
}
......@@ -22,7 +22,7 @@
position: fixed;
top: 0;
width: 100%;
background-color: var(--mainBackgroundColor);
background-color: pvar(--mainBackgroundColor);
z-index: z(header);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
display: flex;
......@@ -38,7 +38,7 @@
@include icon(24px);
&.icon-menu {
background-color: var(--mainForegroundColor);
background-color: pvar(--mainForegroundColor);
mask-image: url('../assets/images/header/menu.svg');
margin: 0 18px 0 20px;
}
......@@ -65,6 +65,7 @@
background: url('../assets/images/logo.svg') no-repeat;
width: 23px;
height: 24px;
margin-right: .5rem;
}
}
......
......@@ -10,7 +10,7 @@
font-size: 14px;
&::placeholder {
color: var(--inputPlaceholderColor);
color: pvar(--inputPlaceholderColor);
}
}
......@@ -18,7 +18,7 @@
@include icon(25px);
height: 21px;
background-color: var(--mainForegroundColor);
background-color: pvar(--mainForegroundColor);
mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
// yolo
......@@ -37,10 +37,10 @@
#typeahead-help,
#typeahead-instructions,
my-suggestions ::ng-deep ul {
border: 1px solid var(--mainBackgroundColor);
border: 1px solid pvar(--mainBackgroundColor);
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background: var(--mainBackgroundColor);
background: pvar(--mainBackgroundColor);
transition: .3s ease;
transition-property: box-shadow;
}
......@@ -67,7 +67,7 @@ my-suggestions ::ng-deep ul {
#typeahead-container {
input {
border: 1px solid var(--mainBackgroundColor) !important;
border: 1px solid pvar(--mainBackgroundColor) !important;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
flex-grow: 1;
transition: box-shadow .3s ease, width .2s ease;
......
......@@ -5,21 +5,21 @@ a {
width: 100%;
&, &:hover {
color: var(--mainForegroundColor);
color: pvar(--mainForegroundColor);
&.focus-visible {
background-color: var(--mainHoverColor);
color: var(--mainBackgroundColor);
background-color: pvar(--mainHoverColor);
color: pvar(--mainBackgroundColor);
}
}
}
.bg-gray {
background-color: var(--mainBackgroundColor);
background-color: pvar(--mainBackgroundColor);
}
.text-gray-light {
color: var(--mainForegroundColor);
color: pvar(--mainForegroundColor);
}
my-global-icon {
......@@ -28,5 +28,5 @@ my-global-icon {
top: -2px;
margin: 5px;
@include apply-svg-color(var(--mainForegroundColor));
@include apply-svg-color(pvar(--mainForegroundColor));
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment