interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor video miniature 

Less dirty code, better responsive
Prepare for some regressions
Increase default miniature size
This commit is contained in:
Chocobozzz 2021-04-01 11:10:27 +02:00
parent 33253c1aa6
commit 0f7407d926
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
38 changed files with 728 additions and 666 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/app/+accounts/account-video-channels/account-video-channels.component.html
View File

@ -39,6 +39,7 @@
<my-video-miniature <my-video-miniature
*ngFor="let video of getVideosOf(videoChannel)" *ngFor="let video of getVideosOf(videoChannel)"
[video]="video" [user]="userMiniature" [displayVideoActions]="true" [displayOptions]="miniatureDisplayOptions" [video]="video" [user]="userMiniature" [displayVideoActions]="true" [displayOptions]="miniatureDisplayOptions"
thumbnailSize="medium"
></my-video-miniature> ></my-video-miniature>
<div *ngIf="getTotalVideosOf(videoChannel)" class="miniature-show-channel"> <div *ngIf="getTotalVideosOf(videoChannel)" class="miniature-show-channel">

6
client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
View File

@ -3,7 +3,7 @@
@import '_miniature'; @import '_miniature';
.margin-content { .margin-content {
@include fluid-videos-miniature-margins; @include grid-videos-miniature-margins;
} }
.channel { .channel {
@ -93,6 +93,8 @@ my-subscribe-button {
my-video-miniature { my-video-miniature {
margin-right: 15px; margin-right: 15px;
min-width: $video-thumbnail-medium-width;
max-width: $video-thumbnail-medium-width;
} }
.no-results { .no-results {
@ -105,7 +107,7 @@ my-subscribe-button {
position: absolute; position: absolute;
right: 0; right: 0;
background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px); background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
padding: ($video-thumbnail-height / 2 - 10px) 15px 0 60px; padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px;
z-index: z(miniature) + 1; z-index: z(miniature) + 1;
a { a {

4
client/src/app/+accounts/accounts.component.scss
View File

@ -15,7 +15,7 @@
} }
.links { .links {
@include fluid-videos-miniature-margins; @include grid-videos-miniature-margins;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -44,7 +44,7 @@ my-user-moderation-dropdown,
} }
.account-info { .account-info {
@include fluid-videos-miniature-margins(false, 15px); @include grid-videos-miniature-margins(false, 15px);
display: grid; display: grid;
grid-template-columns: 1fr min-content; grid-template-columns: 1fr min-content;

4
client/src/app/+my-library/my-history/my-history.component.html
View File

@ -4,7 +4,7 @@
</h1> </h1>
<div class="top-buttons"> <div class="top-buttons">
<div> <div class="search-wrapper">
<div class="input-group has-feedback has-clear"> <div class="input-group has-feedback has-clear">
<input <input
type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history" type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history"
@ -15,7 +15,7 @@
</div> </div>
</div> </div>
<div class="history-switch ml-auto mr-3"> <div class="history-switch">
<my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch> <my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch>
<label i18n>Track watch history</label> <label i18n>Track watch history</label>
</div> </div>

45
client/src/app/+my-library/my-history/my-history.component.scss
View File

@ -11,16 +11,24 @@
.top-buttons { .top-buttons {
margin-bottom: 30px; margin-bottom: 30px;
display: flex; display: grid;
grid-template-columns: 250px 1fr auto auto;
align-items: center; align-items: center;
flex-wrap: wrap;
#history-search { .search-wrapper {
@include peertube-input-text(250px); grid-column: 1;
input {
@include peertube-input-text(250px);
}
} }
.history-switch { .history-switch {
grid-column: 3;
display: flex; display: flex;
margin-left: auto;
margin-right: 15px;
label { label {
margin: 0 0 0 5px; margin: 0 0 0 5px;
@ -31,6 +39,8 @@
} }
.delete-history { .delete-history {
grid-column: 4;
@include peertube-button; @include peertube-button;
@include grey-button; @include grey-button;
@include button-with-icon; @include button-with-icon;
@ -40,26 +50,27 @@
} }
.video { .video {
@include row-blocks; @include row-blocks($column-responsive: false);
.my-video-miniature {
flex-grow: 1;
}
} }
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $small-view) {
.top-buttons { .top-buttons {
.history-switch label, .delete-history { grid-template-columns: auto 1fr auto;
@include ellipsis; row-gap: 20px;
}
.history-switch label { .history-switch {
width: 60%; grid-row: 1;
grid-column: 1;
margin: 0;
} }
.delete-history { .delete-history {
margin-left: auto; grid-row: 1;
max-width: 32%; grid-column: 3;
}
.search-wrapper {
grid-column: 1 / 4;
} }
} }
} }

2
client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
View File

@ -6,7 +6,7 @@
</span> </span>
</h1> </h1>
<div class="video-subscriptions-header d-flex justify-content-between"> <div class="video-subscriptions-header">
<div class="has-feedback has-clear"> <div class="has-feedback has-clear">
<input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch" <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
(ngModelChange)="onSubscriptionsSearchChanged()" /> (ngModelChange)="onSubscriptionsSearchChanged()" />

76
client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
View File

@ -13,36 +13,36 @@ input[type=text] {
margin-right: 10px; margin-right: 10px;
} }
}
.video-channel-info { .video-channel-info {
flex-grow: 1; flex-grow: 1;
a.video-channel-names { a.video-channel-names {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
width: fit-content; width: fit-content;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
.video-channel-display-name { .video-channel-display-name {
font-weight: $font-semibold; font-weight: $font-semibold;
font-size: 18px; font-size: 18px;
} }
.video-channel-name { .video-channel-name {
font-size: 14px; font-size: 14px;
color: $grey-actor-name; color: $grey-actor-name;
margin-left: 5px; margin-left: 5px;
}
} }
} }
}
.actor-owner { .actor-owner {
@include actor-owner; @include actor-owner;
margin-top: 0; margin-top: 0;
}
} }
.video-subscriptions-header { .video-subscriptions-header {
@ -50,32 +50,22 @@ input[type=text] {
} }
@media screen and (max-width: $small-view) { @media screen and (max-width: $small-view) {
.video-channel { .video-subscriptions-header input[type=text] {
.video-channel-info { width: 100% !important;
padding-bottom: 10px; }
text-align: center;
.video-channel-names { .video-channel-info {
flex-direction: column; padding-bottom: 10px;
align-items: center !important; text-align: center;
margin: auto;
}
}
img { .video-channel-names {
margin-right: 0; flex-direction: column;
align-items: center !important;
margin: auto;
} }
} }
}
@media screen and (max-width: $mobile-view) { img {
.video-subscriptions-header { margin-right: 0;
flex-direction: column;
input[type=text] {
width: 100% !important;
}
} }
} }

6
client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
View File

@ -1,6 +1,6 @@
<div class="row"> <div class="root">
<div class="playlist-info col-xs-12 col-md-5 col-xl-3"> <div class="playlist-info">
<my-video-playlist-miniature <my-video-playlist-miniature
*ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true" *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true"
[displayDescription]="true" [displayPrivacy]="true" [displayDescription]="true" [displayPrivacy]="true"
@ -20,7 +20,7 @@
</div> </div>
<div class="playlist-elements col-xs-12 col-md-7 col-xl-9"> <div class="playlist-elements">
<div class="no-results" *ngIf="pagination.totalItems === 0"> <div class="no-results" *ngIf="pagination.totalItems === 0">
<div i18n>No videos in this playlist.</div> <div i18n>No videos in this playlist.</div>

38
client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
View File

@ -2,17 +2,21 @@
@import '_mixins'; @import '_mixins';
@import '_miniature'; @import '_miniature';
.root {
display: grid;
grid-template-columns: auto 1fr;
}
.playlist-info { .playlist-info {
grid-column: 1;
background-color: pvar(--submenuBackgroundColor); background-color: pvar(--submenuBackgroundColor);
margin-left: calc(#{pvar(--horizontalMarginContent)} * -1); margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
margin-top: -$sub-menu-margin-bottom; margin-top: -$sub-menu-margin-bottom;
padding: 10px; padding: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start;
align-items: center;
/* fix ellipsis dots background color */ /* fix ellipsis dots background color */
::ng-deep .miniature-name::after { ::ng-deep .miniature-name::after {
@ -59,15 +63,35 @@
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
} }
@media screen and (max-width: $small-view) { .playlist-elements {
grid-column: 2;
}
my-video-playlist-miniature {
width: $video-thumbnail-width;
}
@include on-small-main-col {
my-video-playlist-miniature {
width: $video-thumbnail-medium-width;
}
}
@include on-mobile-main-col {
.root {
display: block;
}
.playlist-info { .playlist-info {
width: 100vw; width: calc(100% + (2 * var(--horizontalMarginContent)));
padding-top: 20px; padding-top: 20px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.playlist-elements { my-video-playlist-miniature,
padding: 0 !important; .playlist-buttons {
margin-left: auto;
margin-right: auto;
} }
::ng-deep my-video-playlist-element-miniature { ::ng-deep my-video-playlist-element-miniature {

14
client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
View File

@ -1,8 +1,6 @@
<h1> <h1>
<span> <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
<my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
<ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
</span>
</h1> </h1>
<div class="video-playlists-header d-flex justify-content-between"> <div class="video-playlists-header d-flex justify-content-between">
@ -21,10 +19,10 @@
<div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"> <div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
<div *ngFor="let playlist of videoPlaylists" class="video-playlist"> <div *ngFor="let playlist of videoPlaylists" class="video-playlist">
<div class="miniature-wrapper"> <my-video-playlist-miniature
<my-video-playlist-miniature [playlist]="playlist" [toManage]="true" [displayChannel]="true" [displayDescription]="true" [displayPrivacy]="true" [playlist]="playlist" [toManage]="true" [displayChannel]="true"
></my-video-playlist-miniature> [displayDescription]="true" [displayPrivacy]="true" [displayAsRow]="true"
</div> ></my-video-playlist-miniature>
<div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons"> <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons">
<my-delete-button label (click)="deleteVideoPlaylist(playlist)"></my-delete-button> <my-delete-button label (click)="deleteVideoPlaylist(playlist)"></my-delete-button>

69
client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
View File

@ -1,6 +1,10 @@
@import '_variables'; @import '_variables';
@import '_mixins'; @import '_mixins';
h1 {
display: flex;
}
.create-button { .create-button {
@include create-button; @include create-button;
} }
@ -9,64 +13,45 @@ input[type=text] {
@include peertube-input-text(300px); @include peertube-input-text(300px);
} }
::ng-deep .action-button { .video-playlist {
&.action-button-delete { @include row-blocks($column-responsive: false);
margin-right: 10px;
}
} }
.video-playlist { .video-playlist-buttons {
@include row-blocks; display: flex;
margin-left: 10px;
.miniature-wrapper { align-self: flex-end;
flex-grow: 1;
::ng-deep .miniature {
display: flex;
.miniature-info {
margin-left: 10px;
width: auto;
}
}
}
.video-playlist-buttons {
min-width: 190px;
height: max-content;
}
} }
.video-playlists-header { .video-playlists-header {
margin-bottom: 30px; margin-bottom: 30px;
} }
@media screen and (max-width: $small-view) { my-video-playlist-miniature {
display: block;
flex-grow: 1;
}
my-delete-button {
margin-right: 10px;
}
@include on-small-main-col {
.video-playlists-header { .video-playlists-header {
text-align: center; text-align: center;
} }
.video-playlist { .video-playlist {
flex-wrap: wrap;
.video-playlist-buttons {
margin-top: 10px;
}
} }
my-video-playlist-miniature ::ng-deep .miniature { .video-playlist-buttons {
flex-direction: column; margin-top: 10px;
margin-left: auto;
.miniature-info {
margin-left: 0 !important;
}
.miniature-name {
max-width: $video-thumbnail-width;
}
} }
} }
@media screen and (max-width: $mobile-view) { @include on-mobile-main-col {
.video-playlists-header { .video-playlists-header {
flex-direction: column; flex-direction: column;
@ -75,4 +60,8 @@ input[type=text] {
margin-bottom: 12px; margin-bottom: 12px;
} }
} }
.action-button {
margin-left: 0;
}
} }

68
client/src/app/+my-library/my-videos/my-videos.component.scss
View File

@ -32,36 +32,9 @@ h1 {
} }
} }
::ng-deep {
.video {
flex-wrap: wrap;
}
.action-button span {
white-space: nowrap;
}
.video-miniature {
&.display-as-row {
// width: min-content !important;
width: 100% !important;
.video-bottom .video-miniature-information {
width: max-content !important;
min-width: unset !important;
}
}
.video-bottom {
max-width: 350px;
}
}
}
.action-button { .action-button {
display: flex; display: flex;
margin-left: 55px; margin-left: 10px;
margin-top: 10px;
align-self: flex-end; align-self: flex-end;
} }
@ -69,7 +42,7 @@ my-edit-button {
margin-right: 10px; margin-right: 10px;
} }
@media screen and (max-width: $small-view) { @include on-small-main-col {
h1 { h1 {
flex-direction: column; flex-direction: column;
@ -80,39 +53,12 @@ my-edit-button {
} }
.action-button { .action-button {
flex-direction: column; margin-top: 10px;
align-self: center; margin-left: auto;
align-items: center;
margin-left: 0px;
}
my-edit-button {
margin: 15px 0 5px 0;
width: 100%;
text-align: center;
::ng-deep {
.action-button {
/* same width than a.video-thumbnail */
width: $video-thumbnail-width;
}
}
}
::ng-deep {
.video-miniature {
align-items: center;
.video-bottom,
.video-bottom .video-miniature-information {
/* same width than a.video-thumbnail */
max-width: $video-thumbnail-width !important;
}
}
} }
} }
@media screen and (max-width: $mobile-view) { @include on-mobile-main-col {
.videos-header { .videos-header {
flex-direction: column; flex-direction: column;
@ -120,4 +66,8 @@ my-edit-button {
width: 100% !important; width: 100% !important;
} }
} }
.action-button {
margin-left: 0;
}
} }

8
client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
View File

@ -1,13 +1,13 @@
<div class="margin-content"> <div class="margin-content">
<div i18n class="title-page title-page-single"> <div i18n class="title-page title-page-single" *ngIf="pagination.totalItems">
Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}} Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
</div> </div>
<div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div> <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
<div class="video-playlist" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"> <div class="playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()">
<div *ngFor="let playlist of videoPlaylists" class="playlist-miniature-container"> <div *ngFor="let playlist of videoPlaylists" class="playlist-wrapper">
<my-video-playlist-miniature [playlist]="playlist" [toManage]="false"></my-video-playlist-miniature> <my-video-playlist-miniature [playlist]="playlist" [toManage]="false" [displayAsRow]="displayAsRow()"></my-video-playlist-miniature>
</div> </div>
</div> </div>
</div> </div>

29
client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
View File

@ -1,14 +1,33 @@
.title-page { @import '_variables';
margin-top: 0; @import '_mixins';
} @import '_miniature';
.video-playlist { .playlists {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
.playlist-miniature-container { .playlist-wrapper {
margin-right: 15px; margin-right: 15px;
margin-bottom: 30px; margin-bottom: 30px;
} }
} }
.margin-content {
@include grid-videos-miniature-layout;
}
@media screen and (max-width: $mobile-view) {
.title-page {
display: block;
text-align: center;
}
.playlists {
text-align: left !important;
justify-content: left !important;
margin-left: pvar(--horizontalMarginContent) !important;
margin-right: var(--horizontalMarginContent) !important;
}
}

9
client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
View File

@ -1,6 +1,6 @@
import { Subject, Subscription } from 'rxjs' import { Subject, Subscription } from 'rxjs'
import { Component, OnDestroy, OnInit } from '@angular/core' import { Component, OnDestroy, OnInit } from '@angular/core'
import { ComponentPagination, hasMoreItems } from '@app/core' import { ComponentPagination, hasMoreItems, ScreenService } from '@app/core'
import { VideoChannel, VideoChannelService } from '@app/shared/shared-main' import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
@ -25,7 +25,8 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
constructor ( constructor (
private videoPlaylistService: VideoPlaylistService, private videoPlaylistService: VideoPlaylistService,
private videoChannelService: VideoChannelService private videoChannelService: VideoChannelService,
private screenService: ScreenService
) {} ) {}
ngOnInit () { ngOnInit () {
@ -48,6 +49,10 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
this.loadVideoPlaylists() this.loadVideoPlaylists()
} }
displayAsRow () {
return this.screenService.isInMobileView()
}
private loadVideoPlaylists () { private loadVideoPlaylists () {
this.videoPlaylistService.listChannelPlaylists(this.videoChannel, this.pagination) this.videoPlaylistService.listChannelPlaylists(this.videoChannel, this.pagination)
.subscribe(res => { .subscribe(res => {

4
client/src/app/+video-channels/video-channels.component.scss
View File

@ -16,11 +16,11 @@
} }
.links { .links {
@include fluid-videos-miniature-margins; @include grid-videos-miniature-margins;
} }
.channel-info { .channel-info {
@include fluid-videos-miniature-margins(false, 15px); @include grid-videos-miniature-margins(false, 15px);
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;

4
client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
View File

@ -1,4 +1,4 @@
<div class="other-videos"> <div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
<ng-container *ngIf="hasVideos$ | async"> <ng-container *ngIf="hasVideos$ | async">
<div class="title-page-container"> <div class="title-page-container">
<h2 i18n class="title-page title-page-single"> <h2 i18n class="title-page title-page-single">
@ -14,7 +14,7 @@
<ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count"> <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
<my-video-miniature <my-video-miniature
[displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow"
(videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()"> (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()">
</my-video-miniature> </my-video-miniature>

33
client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
View File

@ -1,3 +1,6 @@
@import '_variables';
@import '_mixins';
.title-page-container { .title-page-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -11,6 +14,10 @@
} }
} }
.title-page {
margin-top: 0;
}
.title-page-autoplay { .title-page-autoplay {
display: flex; display: flex;
width: max-content; width: max-content;
@ -29,3 +36,29 @@
hr { hr {
margin-top: 0; margin-top: 0;
} }
my-video-miniature {
display: block;
}
.other-videos:not(.display-as-row) my-video-miniature {
min-width: $video-thumbnail-medium-width;
max-width: $video-thumbnail-medium-width;
}
.display-as-row {
my-video-miniature {
margin-bottom: 20px;
}
hr {
display: none;
}
@media screen and (max-width: $mobile-view) {
my-video-miniature {
margin-bottom: 10px;
}
}
}

2
client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
View File

@ -16,6 +16,8 @@ import { RecommendedVideosStore } from './recommended-videos.store'
export class RecommendedVideosComponent implements OnInit, OnChanges { export class RecommendedVideosComponent implements OnInit, OnChanges {
@Input() inputRecommendation: RecommendationInfo @Input() inputRecommendation: RecommendationInfo
@Input() playlist: VideoPlaylist @Input() playlist: VideoPlaylist
@Input() displayAsRow: boolean
@Output() gotRecommendations = new EventEmitter<Video[]>() @Output() gotRecommendations = new EventEmitter<Video[]>()
autoPlayNextVideo: boolean autoPlayNextVideo: boolean

1
client/src/app/+videos/+video-watch/video-watch.component.html
View File

@ -289,6 +289,7 @@
</div> </div>
<my-recommended-videos <my-recommended-videos
[displayAsRow]="displayOtherVideosAsRow()"
[inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }"
[playlist]="playlist" [playlist]="playlist"
(gotRecommendations)="onRecommendations($event)" (gotRecommendations)="onRecommendations($event)"

51
client/src/app/+videos/+video-watch/video-watch.component.scss
View File

@ -407,37 +407,12 @@ $video-info-margin-left: 44px;
} }
} }
} }
}
::ng-deep .other-videos { my-recommended-videos {
padding-left: 15px; display: block;
min-width: $video-miniature-width; padding-left: 15px;
min-width: 250px;
@media screen and (min-width: 1800px - (3* $video-miniature-width)) {
width: min-content;
}
.title-page {
margin: 0 !important;
}
.video-miniature {
display: flex;
width: max-content;
height: 100%;
padding-bottom: 20px;
flex-wrap: wrap;
}
.video-bottom {
@media screen and (max-width: 1800px - (3* $video-miniature-width)) {
margin-left: 1rem;
}
@media screen and (max-width: 500px) {
margin-left: 0;
margin-top: .5rem;
}
}
}
} }
my-video-comments { my-video-comments {
@ -531,6 +506,7 @@ my-video-comments {
} }
} }
// Use the same breakpoint than in the typescript component to display the other video miniatures as row
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
#video-wrapper { #video-wrapper {
flex-direction: column; flex-direction: column;
@ -543,15 +519,10 @@ my-video-comments {
.video-bottom { .video-bottom {
flex-direction: column; flex-direction: column;
}
::ng-deep .other-videos { my-recommended-videos {
padding-left: 0 !important; padding-left: 0;
::ng-deep .video-miniature {
flex-direction: row;
width: auto;
}
}
} }
} }
@ -573,10 +544,6 @@ my-video-comments {
} }
} }
::ng-deep .other-videos .video-miniature {
flex-direction: column;
}
.privacy-concerns { .privacy-concerns {
width: 100%; width: 100%;
} }

5
client/src/app/+videos/+video-watch/video-watch.component.ts
View File

@ -398,6 +398,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
this.loadVideo(videoId) this.loadVideo(videoId)
} }
displayOtherVideosAsRow () {
// Use the same value as in the SASS file
return this.screenService.getWindowInnerWidth() <= 1100
}
private loadVideo (videoId: string) { private loadVideo (videoId: string) {
// Video did not change // Video did not change
if (this.video && this.video.uuid === videoId) return if (this.video && this.video.uuid === videoId) return

6
client/src/app/+videos/video-list/overview/video-overview.component.html
View File

@ -14,7 +14,7 @@
</h1> </h1>
<div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
<my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true"> <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
</my-video-miniature> </my-video-miniature>
</div> </div>
</div> </div>
@ -25,7 +25,7 @@
</h2> </h2>
<div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
<my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true"> <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
</my-video-miniature> </my-video-miniature>
</div> </div>
</div> </div>
@ -40,7 +40,7 @@
</div> </div>
<div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
<my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true"> <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
</my-video-miniature> </my-video-miniature>
</div> </div>
</div> </div>

79
client/src/app/+videos/video-list/overview/video-overview.component.scss
View File

@ -8,9 +8,84 @@
} }
.margin-content { .margin-content {
@include fluid-videos-miniature-layout; @include grid-videos-miniature-layout;
} }
.section { .section {
@include miniature-rows; &:first-child {
padding-top: 30px;
.section-title {
border-top: none !important;
}
}
.section-title {
font-size: 24px;
font-weight: $font-semibold;
padding-top: 15px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
&:not(h2) {
border-top: 1px solid $separator-border-color;
}
a {
&:hover, &:focus:not(.focus-visible), &:active {
text-decoration: none;
outline: none;
}
color: pvar(--mainForegroundColor);
}
}
&.channel {
.section-title {
a {
display: flex;
width: fit-content;
align-items: center;
img {
@include channel-avatar(28px);
margin-right: 8px;
}
}
.followers {
color: pvar(--greyForegroundColor);
font-weight: normal;
font-size: 14px;
margin-left: 10px;
position: relative;
top: 2px;
}
}
}
.show-more {
position: relative;
top: -5px;
display: inline-block;
font-size: 16px;
text-transform: uppercase;
color: pvar(--greyForegroundColor);
margin-bottom: 10px;
font-weight: $font-semibold;
text-decoration: none;
}
@media screen and (max-width: $mobile-view) {
max-height: initial;
overflow: initial;
.section-title {
font-size: 17px;
margin-left: 10px;
}
}
} }

9
client/src/app/core/wrappers/screen.service.ts
View File

@ -38,11 +38,10 @@ export class ScreenService {
let numberOfVideos = 1 let numberOfVideos = 1
if (screenWidth > 1850) numberOfVideos = 7 if (screenWidth > 1850) numberOfVideos = 5
else if (screenWidth > 1600) numberOfVideos = 6 else if (screenWidth > 1600) numberOfVideos = 4
else if (screenWidth > 1370) numberOfVideos = 5 else if (screenWidth > 1370) numberOfVideos = 3
else if (screenWidth > 1100) numberOfVideos = 4 else if (screenWidth > 1100) numberOfVideos = 2
else if (screenWidth > 850) numberOfVideos = 3
return numberOfVideos return numberOfVideos
} }

2
client/src/app/shared/shared-video-miniature/abstract-video-list.html
View File

@ -52,7 +52,7 @@
<div class="video-wrapper"> <div class="video-wrapper">
<my-video-miniature <my-video-miniature
[fitWidth]="true" [video]="video" [user]="userMiniature" [video]="video" [user]="userMiniature"
[displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions" [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
(videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)" (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
> >

2
client/src/app/shared/shared-video-miniature/abstract-video-list.scss
View File

@ -69,7 +69,7 @@ $iconSize: 16px;
} }
.margin-content { .margin-content {
@include fluid-videos-miniature-layout; @include grid-videos-miniature-layout;
} }
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {

2
client/src/app/shared/shared-video-miniature/video-miniature.component.html
View File

@ -1,4 +1,4 @@
<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()"> <div class="video-miniature" [ngClass]="getClasses()" (mouseenter)="loadActions()">
<my-video-thumbnail <my-video-thumbnail
[video]="video" [nsfw]="isVideoBlur" [videoRouterLink]="videoRouterLink" [videoHref]="videoHref" [videoTarget]="videoTarget" [video]="video" [nsfw]="isVideoBlur" [videoRouterLink]="videoRouterLink" [videoHref]="videoHref" [videoTarget]="videoTarget"
[displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)" [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"

378
client/src/app/shared/shared-video-miniature/video-miniature.component.scss
View File

@ -3,204 +3,206 @@
@import '_miniature'; @import '_miniature';
$more-button-width: 40px; $more-button-width: 40px;
$more-margin-right: 15px;
.video-miniature { .video-miniature-name {
display: inline-flex; @include miniature-name;
flex-direction: column; }
padding-bottom: $video-miniature-margin-bottom;
vertical-align: top;
.video-bottom { .video-miniature-information {
display: flex; width: calc(100% - #{$more-button-width});
}
.video-miniature-information { .avatar {
width: $video-miniature-width - $more-button-width - $more-margin-right; margin: 10px 10px 0 0;
line-height: normal;
.avatar { img:not(.channel) {
margin: 10px 10px 0 0; @include avatar(40px);
img:not(.channel) {
@include avatar(40px);
}
img.channel {
@include channel-avatar(40px);
}
}
.video-miniature-name {
@include miniature-name;
word-wrap: break-word;
width: calc(100% - #{$more-button-width});
}
.video-miniature-meta {
width: calc(100% + #{$more-button-width});
overflow: hidden;
}
.video-miniature-created-at-views {
display: block;
font-size: 13px;
}
.video-miniature-account,
.video-miniature-channel {
@include disable-default-a-behaviour;
@include ellipsis;
display: block;
font-size: 13px;
color: pvar(--greyForegroundColor);
&:hover {
color: $grey-foreground-hover-color;
}
}
.video-info-privacy,
.video-info-blocked .blocked-label,
.video-info-nsfw {
font-weight: $font-semibold;
}
.video-info-blocked {
color: red;
.blocked-reason::before {
content: ' - ';
}
}
.video-info-nsfw {
color: red;
}
}
.video-actions {
margin-top: 3px;
width: $more-button-width;
height: 30px;
::ng-deep .dropdown-root:not(.show) {
opacity: 0;
}
::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
opacity: 1;
}
::ng-deep .more-icon {
opacity: .6;
&:hover {
opacity: 1;
}
}
}
@media screen and (max-width: $small-view) {
.video-miniature-information {
margin: 0 10px;
}
.video-actions {
margin: 0;
top: -3px;
::ng-deep .dropdown-root {
opacity: 1 !important;
}
}
}
} }
&:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay, img.channel {
&:hover .video-bottom .video-actions ::ng-deep .dropdown-root { @include channel-avatar(40px);
}
}
.video-miniature-created-at-views {
font-size: 13px;
}
.video-miniature-account,
.video-miniature-channel {
@include disable-default-a-behaviour;
@include ellipsis;
display: block;
font-size: 13px;
color: pvar(--greyForegroundColor);
&:hover {
color: $grey-foreground-hover-color;
}
}
.video-info-privacy,
.video-info-blocked .blocked-label,
.video-info-nsfw {
font-weight: $font-semibold;
}
.video-info-blocked {
color: red;
.blocked-reason::before {
content: ' - ';
}
}
.video-info-nsfw {
color: red;
}
.video-actions {
width: $more-button-width;
height: 30px;
::ng-deep .dropdown-root:not(.show) {
opacity: 0;
}
::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
opacity: 1; opacity: 1;
} }
&.fit-width { ::ng-deep .more-icon {
width: 100%; opacity: .6;
.video-bottom { &:hover {
width: 100% !important; opacity: 1;
}
.video-miniature-information { }
width: calc(100% - #{$more-button-width}) !important; }
}
} .video-miniature {
&:hover ::ng-deep .video-thumbnail-actions-overlay,
my-video-thumbnail { &:hover .video-actions ::ng-deep .dropdown-root {
@include large-screen-ratio($selector: '::ng-deep .video-thumbnail'); opacity: 1 !important;
} }
} }
&.display-as-row { // Grid mode
flex-direction: row; // Takes all the width on mobile
padding-bottom: 0; .video-miniature:not(.display-as-row) {
height: auto; display: flex;
display: flex; flex-direction: column;
flex-grow: 1; padding-bottom: $video-miniature-margin-bottom;
width: 100%;
my-video-thumbnail {
margin-right: 10px; my-video-thumbnail {
} @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
}
.video-bottom {
.video-miniature-information { .video-bottom {
@media screen and (min-width: $small-view) { display: flex;
width: auto; width: 100%;
min-width: 500px; }
}
.video-miniature-name { .video-miniature-name {
@include ellipsis-multiline(1.3em, 2); margin-top: 10px;
margin-bottom: 5px;
margin-top: 2px; }
margin-bottom: 5px;
} .video-miniature-created-at-views {
display: block;
.video-miniature-created-at-views, }
.video-miniature-account,
.video-miniature-channel { .video-actions {
font-size: 95%; margin-top: 3px;
width: fit-content; }
}
@media screen and (max-width: $small-view) {
.video-miniature-created-at-views + .video-miniature-channel { width: 100%;
margin-top: 5px; margin-bottom: 25px;
}
.video-miniature-information {
.video-info-privacy { margin: 0 10px;
margin-top: 5px;
} width: 100%;
text-align: left;
.video-info-blocked { }
margin-top: 3px;
} .video-actions {
} margin: 0;
top: -3px;
.video-actions {
margin: 0; ::ng-deep .dropdown-root {
top: -3px; opacity: 1 !important;
} }
} }
@media screen and (max-width: $small-view) { ::ng-deep .video-thumbnail {
flex-direction: column; border-radius: 0;
height: auto; }
}
my-video-thumbnail { }
margin-right: 0;
} .video-miniature.display-as-row {
--rowThumbnailWidth: #{$video-thumbnail-width};
.video-miniature-information { --rowThumbnailHeight: #{$video-thumbnail-height};
min-width: initial;
} display: flex;
flex-direction: row;
.video-bottom {
display: flex;
}
// We don't display avatar in row mode
.avatar {
display: none;
}
my-video-thumbnail {
min-width: var(--rowThumbnailWidth);
max-width: var(--rowThumbnailWidth);
height: var(--rowThumbnailHeight);
margin-right: 10px;
}
.video-miniature-name {
@include ellipsis-multiline(1.3em, 2);
}
.video-miniature-created-at-views,
.video-miniature-account,
.video-miniature-channel {
font-size: 14px;
}
.video-actions {
margin-top: -3px;
}
}
@include on-small-main-col {
.video-miniature.display-as-row {
--rowThumbnailWidth: #{$video-thumbnail-medium-width};
--rowThumbnailHeight: #{$video-thumbnail-medium-height};
}
}
@include on-mobile-main-col {
.video-miniature.display-as-row {
--rowThumbnailWidth: #{$video-thumbnail-small-width};
--rowThumbnailHeight: #{$video-thumbnail-small-height};
.video-miniature-name {
font-size: 14px;
}
.video-miniature-created-at-views,
.video-miniature-account,
.video-miniature-channel {
font-size: 12px;
} }
} }
} }

11
client/src/app/shared/shared-video-miniature/video-miniature.component.ts
View File

@ -16,7 +16,6 @@ import { Video } from '../shared-main'
import { VideoPlaylistService } from '../shared-video-playlist' import { VideoPlaylistService } from '../shared-video-playlist'
import { VideoActionsDisplayType } from './video-actions-dropdown.component' import { VideoActionsDisplayType } from './video-actions-dropdown.component'
export type OwnerDisplayType = 'account' | 'videoChannel'
export type MiniatureDisplayOptions = { export type MiniatureDisplayOptions = {
date?: boolean date?: boolean
views?: boolean views?: boolean
@ -50,9 +49,9 @@ export class VideoMiniatureComponent implements OnInit {
state: false, state: false,
blacklistInfo: false blacklistInfo: false
} }
@Input() displayAsRow = false
@Input() displayVideoActions = true @Input() displayVideoActions = true
@Input() fitWidth = false
@Input() displayAsRow = false
@Input() videoLinkType: VideoLinkType = 'internal' @Input() videoLinkType: VideoLinkType = 'internal'
@ -243,6 +242,12 @@ export class VideoMiniatureComponent implements OnInit {
return this.displayVideoActions && this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined return this.displayVideoActions && this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
} }
getClasses () {
return {
'display-as-row': this.displayAsRow
}
}
private setUpBy () { private setUpBy () {
const accountName = this.video.account.name const accountName = this.video.account.name

42
client/src/app/shared/shared-video-miniature/videos-selection.component.scss
View File

@ -5,24 +5,24 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
flex-grow: 1; flex-grow: 1;
}
.action-selection-mode-child { .action-selection-mode-child {
position: fixed; position: fixed;
.action-button { .action-button {
display: block; display: block;
margin-left: 55px; margin-left: 55px;
}
.action-button-cancel-selection {
@include peertube-button;
@include grey-button;
}
} }
} }
.action-button-cancel-selection {
@include peertube-button;
@include grey-button;
}
.video { .video {
@include row-blocks; @include row-blocks($column-responsive: false);
&:first-child { &:first-child {
margin-top: 47px; margin-top: 47px;
@ -40,18 +40,16 @@
} }
} }
@media screen and (max-width: $small-view) {
@include on-small-main-col {
.video { .video {
flex-direction: column; flex-wrap: wrap;
height: auto; }
}
.checkbox-container { @include on-mobile-main-col {
display: none; .checkbox-container {
} display: none;
my-button {
margin-top: 10px;
}
} }
.action-selection-mode { .action-selection-mode {

2
client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
View File

@ -1,4 +1,4 @@
<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage }"> <div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage, 'display-as-row': displayAsRow }">
<a <a
[routerLink]="getPlaylistUrl()" [attr.title]="playlist.description" [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description"
class="miniature-thumbnail" class="miniature-thumbnail"

139
client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
View File

@ -4,6 +4,7 @@
.miniature { .miniature {
display: inline-block; display: inline-block;
width: 100%;
&.no-videos:not(.to-manage){ &.no-videos:not(.to-manage){
a { a {
@ -17,62 +18,92 @@
display: none; display: none;
} }
} }
}
.miniature-thumbnail { .miniature-thumbnail {
@include miniature-thumbnail; @include miniature-thumbnail;
.miniature-playlist-info-overlay { .miniature-playlist-info-overlay {
@include static-thumbnail-overlay; @include static-thumbnail-overlay;
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
height: $video-thumbnail-height; height: 100%;
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
font-weight: $font-semibold; font-weight: $font-semibold;
} }
} }
.miniature-info { .miniature-info {
width: 200px;
margin-top: 2px; .miniature-name {
line-height: normal; @include miniature-name;
@include ellipsis-multiline(1.3em, 2);
.miniature-name {
@include miniature-name; margin: 0;
}
@include ellipsis-multiline(1.3em, 2);
.by {
margin: 0; @include disable-default-a-behaviour;
}
display: block;
.by { color: pvar(--greyForegroundColor);
@include disable-default-a-behaviour; }
display: block; .privacy-date {
color: pvar(--greyForegroundColor); margin-top: 5px;
}
.video-info-privacy {
.privacy-date { font-size: 14px;
margin-top: 5px; font-weight: $font-semibold;
.video-info-privacy { &::after {
font-size: 14px; content: '-';
font-weight: $font-semibold; margin: 0 3px;
}
&::after { }
content: '-'; }
margin: 0 3px;
} .video-info-description {
} margin-top: 10px;
} color: pvar(--greyForegroundColor);
}
.video-info-description { }
margin-top: 10px;
color: pvar(--greyForegroundColor); .miniature:not(.display-as-row) {
} .miniature-thumbnail {
margin-top: 10px;
margin-bottom: 5px;
}
}
.miniature.display-as-row {
--rowThumbnailWidth: #{$video-thumbnail-width};
--rowThumbnailHeight: #{$video-thumbnail-height};
display: flex;
.miniature-thumbnail {
width: var(--rowThumbnailWidth);
height: var(--rowThumbnailHeight);
margin-right: 10px;
}
}
@include on-small-main-col {
.miniature.display-as-row {
--rowThumbnailWidth: #{$video-thumbnail-medium-width};
--rowThumbnailHeight: #{$video-thumbnail-medium-height};
}
}
@include on-mobile-main-col {
.miniature.display-as-row {
--rowThumbnailWidth: #{$video-thumbnail-small-width};
--rowThumbnailHeight: #{$video-thumbnail-small-height};
} }
} }

1
client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
View File

@ -12,6 +12,7 @@ export class VideoPlaylistMiniatureComponent {
@Input() displayChannel = false @Input() displayChannel = false
@Input() displayDescription = false @Input() displayDescription = false
@Input() displayPrivacy = false @Input() displayPrivacy = false
@Input() displayAsRow = false
getPlaylistUrl () { getPlaylistUrl () {
if (this.toManage) return [ '/my-library/video-playlists', this.playlist.uuid ] if (this.toManage) return [ '/my-library/video-playlists', this.playlist.uuid ]

15
client/src/sass/application.scss
View File

@ -58,6 +58,7 @@ body {
--activatedActionButtonColor: #{$activated-action-button-color}; --activatedActionButtonColor: #{$activated-action-button-color};
--horizontalMarginContent: #{$not-expanded-horizontal-margins}; --horizontalMarginContent: #{$not-expanded-horizontal-margins};
--videosHorizontalMarginContent: 6vw;
--mainColWidth: calc(100vw - #{$menu-width}); --mainColWidth: calc(100vw - #{$menu-width});
font-family: $main-fonts; font-family: $main-fonts;
@ -332,8 +333,16 @@ ngx-loading-bar {
} }
@media screen and (max-width: #{breakpoint(xxl)}) { @media screen and (max-width: #{breakpoint(xxl)}) {
.main-col.expanded { .main-col {
--horizontalMarginContent: #{$expanded-horizontal-margins/2}; & {
--horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
}
&.expanded {
--horizontalMarginContent: #{$expanded-horizontal-margins / 2};
}
--videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
} }
} }
@ -341,7 +350,7 @@ ngx-loading-bar {
/* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */ /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
.main-col, .main-col,
.main-col.expanded { .main-col.expanded {
--horizontalMarginContent: #{$expanded-horizontal-margins/3}; --horizontalMarginContent: #{$expanded-horizontal-margins / 3};
.sub-menu { .sub-menu {
padding-left: 50px; padding-left: 50px;

171
client/src/sass/include/_miniature.scss
View File

@ -5,11 +5,10 @@
@include ellipsis-multiline(1.1em, 2); @include ellipsis-multiline(1.1em, 2);
word-break: break-all; word-break: break-all;
word-wrap: break-word;
transition: color 0.2s; transition: color 0.2s;
font-weight: $font-semibold; font-weight: $font-semibold;
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
margin-top: 10px;
margin-bottom: 5px;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -21,20 +20,20 @@
} }
} }
$play-overlay-transition: 0.2s ease;
$play-overlay-height: 26px;
$play-overlay-width: 18px;
@mixin miniature-thumbnail { @mixin miniature-thumbnail {
@include disable-outline; @include disable-outline;
$play-overlay-transition: 0.2s ease;
$play-overlay-height: 26px;
$play-overlay-width: 18px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
width: 100%;
height: 100%;
overflow: hidden; overflow: hidden;
width: $video-thumbnail-width;
height: $video-thumbnail-height;
background-color: #ececec; background-color: #ececec;
transition: filter $play-overlay-transition; transition: filter $play-overlay-transition;
@ -98,140 +97,36 @@ $play-overlay-width: 18px;
color: #fff; color: #fff;
} }
@mixin miniature-rows {
&:first-child {
padding-top: 30px;
.section-title {
border-top: none !important;
}
}
.section-title {
font-size: 24px;
font-weight: $font-semibold;
padding-top: 15px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
&:not(h2) {
border-top: 1px solid $separator-border-color;
}
a {
&:hover, &:focus:not(.focus-visible), &:active {
text-decoration: none;
outline: none;
}
color: pvar(--mainForegroundColor);
}
}
&.channel {
.section-title {
a {
display: flex;
width: fit-content;
align-items: center;
img {
@include channel-avatar(28px);
margin-right: 8px;
}
}
.followers {
color: pvar(--greyForegroundColor);
font-weight: normal;
font-size: 14px;
margin-left: 10px;
position: relative;
top: 2px;
}
}
}
.show-more {
position: relative;
top: -5px;
display: inline-block;
font-size: 16px;
text-transform: uppercase;
color: pvar(--greyForegroundColor);
margin-bottom: 10px;
font-weight: $font-semibold;
text-decoration: none;
}
@media screen and (max-width: $mobile-view) {
max-height: initial;
overflow: initial;
.section-title {
font-size: 17px;
margin-left: 10px;
}
}
}
// Use margin by default, or padding if $margin is false // Use margin by default, or padding if $margin is false
@mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) { @mixin grid-videos-miniature-margins ($margin: true, $min-margin: 0) {
--fluidVideosMiniatureMargins: #{pvar(--horizontalMarginContent)}; --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
@if $margin { @if $margin {
margin-left: var(--fluidVideosMiniatureMargins) !important; margin-left: var(--gridVideosMiniatureMargins) !important;
margin-right: var(--fluidVideosMiniatureMargins) !important; margin-right: var(--gridVideosMiniatureMargins) !important;
} @else { } @else {
padding-left: var(--fluidVideosMiniatureMargins) !important; padding-left: var(--gridVideosMiniatureMargins) !important;
padding-right: var(--fluidVideosMiniatureMargins) !important; padding-right: var(--gridVideosMiniatureMargins) !important;
} }
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {
--fluidVideosMiniatureMargins: $min-margin; --gridVideosMiniatureMargins: #{$min-margin};
width: auto; width: auto;
} }
} }
@mixin fluid-videos-miniature-layout { @mixin grid-videos-miniature-layout {
@include fluid-videos-miniature-margins; @include grid-videos-miniature-margins;
@media screen and (max-width: $mobile-view) {
.videos {
text-align: center;
::ng-deep .video-miniature {
padding-right: 0;
height: auto;
width: 100%;
margin-bottom: 25px;
.video-miniature-information {
width: 100% !important;
text-align: left;
span {
width: 100%;
}
}
.video-thumbnail {
border-radius: 0;
}
}
}
}
@media screen and (min-width: $mobile-view) { @media screen and (min-width: $mobile-view) {
.videos { .videos,
--miniatureMinWidth: #{$video-thumbnail-width - 15px}; .playlists {
--miniatureMinWidth: #{$video-thumbnail-width - 25px};
--miniatureMaxWidth: #{$video-thumbnail-width}; --miniatureMaxWidth: #{$video-thumbnail-width};
display: grid; display: grid;
column-gap: 5px; column-gap: 30px;
grid-template-columns: repeat( grid-template-columns: repeat(
auto-fill, auto-fill,
minmax( minmax(
@ -240,21 +135,33 @@ $play-overlay-width: 18px;
) )
); );
@media screen and (min-width: #{breakpoint(fhd)}) { .video-wrapper,
column-gap: 1%; .playlist-wrapper {
--miniatureMinWidth: #{$video-thumbnail-width};
}
.video-wrapper {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
my-video-miniature { my-video-miniature,
my-video-playlist-miniature {
display: block; display: block;
min-width: var(--miniatureMinWidth); min-width: var(--miniatureMinWidth);
max-width: var(--miniatureMaxWidth); max-width: var(--miniatureMaxWidth);
} }
} }
@media screen and (min-width: #{breakpoint(xm)}) {
column-gap: 15px;
}
@media screen and (min-width: #{breakpoint(fhd)}) {
column-gap: 2%;
}
}
}
@media screen and (max-width: $mobile-view) {
.videos,
.playlists {
text-align: center;
} }
} }
} }

44
client/src/sass/include/_mixins.scss
View File

@ -620,17 +620,23 @@
@include button-with-icon(20px, 5px, -1px); @include button-with-icon(20px, 5px, -1px);
} }
@mixin row-blocks { @mixin row-blocks ($column-responsive: true) {
display: flex; display: flex;
min-height: 130px; min-height: 130px;
padding-bottom: 20px; padding-bottom: 20px;
margin-bottom: 20px; margin-bottom: 20px;
border-bottom: 1px solid #C6C6C6; border-bottom: 1px solid #C6C6C6;
@media screen and (max-width: 800px) { @media screen and (max-width: $small-view) {
flex-direction: column; @if $column-responsive {
height: auto; flex-direction: column;
align-items: center; height: auto;
align-items: center;
} @else {
min-height: initial;
padding-bottom: 10px;
margin-bottom: 10px;
}
} }
} }
@ -932,3 +938,31 @@
border-left: $width solid rgba(255, 255, 255, 0.95); border-left: $width solid rgba(255, 255, 255, 0.95);
} }
@mixin on-small-main-col () {
:host-context(.main-col:not(.expanded)) {
@media screen and (max-width: $small-view + $menu-width) {
@content;
}
}
:host-context(.main-col.expanded) {
@media screen and (max-width: $small-view) {
@content;
}
}
}
@mixin on-mobile-main-col () {
:host-context(.main-col:not(.expanded)) {
@media screen and (max-width: $mobile-view + $menu-width) {
@content;
}
}
:host-context(.main-col.expanded) {
@media screen and (max-width: $mobile-view) {
@content;
}
}
}

12
client/src/sass/include/_variables.scss
View File

@ -34,7 +34,7 @@ $green: #39CC0B;
$grey-actor-name: #777272; $grey-actor-name: #777272;
$expanded-horizontal-margins: 150px; $expanded-horizontal-margins: 150px;
$not-expanded-horizontal-margins: 60px; $not-expanded-horizontal-margins: 30px;
$button-height: 30px; $button-height: 30px;
@ -59,10 +59,13 @@ $footer-margin: 30px;
$separator-border-color: rgba(0, 0, 0, 0.10); $separator-border-color: rgba(0, 0, 0, 0.10);
$video-miniature-width: 238px;
$video-miniature-margin-bottom: 15px; $video-miniature-margin-bottom: 15px;
$video-thumbnail-height: 122px; $video-thumbnail-height: 153px;
$video-thumbnail-width: 223px; $video-thumbnail-width: 280px;
$video-thumbnail-medium-height: 114px;
$video-thumbnail-medium-width: 201px;
$video-thumbnail-small-height: 71px;
$video-thumbnail-small-width: 125px;
$theater-bottom-space: 115px; $theater-bottom-space: 115px;
@ -125,6 +128,7 @@ $variables: (
--embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor), --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor),
--horizontalMarginContent: var(--horizontalMarginContent), --horizontalMarginContent: var(--horizontalMarginContent),
--videosHorizontalMarginContent: var(--videosHorizontalMarginContent),
--mainColWidth: var(--mainColWidth) --mainColWidth: var(--mainColWidth)
); );