Verified Commit 0f7407d9 authored by Chocobozzz's avatar Chocobozzz

Refactor video miniature

Less dirty code, better responsive
Prepare for some regressions
Increase default miniature size
parent 33253c1a
......@@ -39,6 +39,7 @@
<my-video-miniature
*ngFor="let video of getVideosOf(videoChannel)"
[video]="video" [user]="userMiniature" [displayVideoActions]="true" [displayOptions]="miniatureDisplayOptions"
thumbnailSize="medium"
></my-video-miniature>
<div *ngIf="getTotalVideosOf(videoChannel)" class="miniature-show-channel">
......
......@@ -3,7 +3,7 @@
@import '_miniature';
.margin-content {
@include fluid-videos-miniature-margins;
@include grid-videos-miniature-margins;
}
.channel {
......@@ -93,6 +93,8 @@ my-subscribe-button {
my-video-miniature {
margin-right: 15px;
min-width: $video-thumbnail-medium-width;
max-width: $video-thumbnail-medium-width;
}
.no-results {
......@@ -105,7 +107,7 @@ my-subscribe-button {
position: absolute;
right: 0;
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;
a {
......
......@@ -15,7 +15,7 @@
}
.links {
@include fluid-videos-miniature-margins;
@include grid-videos-miniature-margins;
display: flex;
justify-content: space-between;
......@@ -44,7 +44,7 @@ my-user-moderation-dropdown,
}
.account-info {
@include fluid-videos-miniature-margins(false, 15px);
@include grid-videos-miniature-margins(false, 15px);
display: grid;
grid-template-columns: 1fr min-content;
......
......@@ -4,7 +4,7 @@
</h1>
<div class="top-buttons">
<div>
<div class="search-wrapper">
<div class="input-group has-feedback has-clear">
<input
type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history"
......@@ -15,7 +15,7 @@
</div>
</div>
<div class="history-switch ml-auto mr-3">
<div class="history-switch">
<my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch>
<label i18n>Track watch history</label>
</div>
......
......@@ -11,16 +11,24 @@
.top-buttons {
margin-bottom: 30px;
display: flex;
display: grid;
grid-template-columns: 250px 1fr auto auto;
align-items: center;
flex-wrap: wrap;
#history-search {
@include peertube-input-text(250px);
.search-wrapper {
grid-column: 1;
input {
@include peertube-input-text(250px);
}
}
.history-switch {
grid-column: 3;
display: flex;
margin-left: auto;
margin-right: 15px;
label {
margin: 0 0 0 5px;
......@@ -31,6 +39,8 @@
}
.delete-history {
grid-column: 4;
@include peertube-button;
@include grey-button;
@include button-with-icon;
......@@ -40,26 +50,27 @@
}
.video {
@include row-blocks;
.my-video-miniature {
flex-grow: 1;
}
@include row-blocks($column-responsive: false);
}
@media screen and (max-width: $mobile-view) {
@media screen and (max-width: $small-view) {
.top-buttons {
.history-switch label, .delete-history {
@include ellipsis;
}
grid-template-columns: auto 1fr auto;
row-gap: 20px;
.history-switch label {
width: 60%;
.history-switch {
grid-row: 1;
grid-column: 1;
margin: 0;
}
.delete-history {
margin-left: auto;
max-width: 32%;
grid-row: 1;
grid-column: 3;
}
.search-wrapper {
grid-column: 1 / 4;
}
}
}
......@@ -6,7 +6,7 @@
</span>
</h1>
<div class="video-subscriptions-header d-flex justify-content-between">
<div class="video-subscriptions-header">
<div class="has-feedback has-clear">
<input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
(ngModelChange)="onSubscriptionsSearchChanged()" />
......
......@@ -13,36 +13,36 @@ input[type=text] {
margin-right: 10px;
}
}
.video-channel-info {
flex-grow: 1;
a.video-channel-names {
@include disable-default-a-behaviour;
width: fit-content;
display: flex;
align-items: baseline;
color: pvar(--mainForegroundColor);
.video-channel-display-name {
font-weight: $font-semibold;
font-size: 18px;
}
.video-channel-name {
font-size: 14px;
color: $grey-actor-name;
margin-left: 5px;
}
.video-channel-info {
flex-grow: 1;
a.video-channel-names {
@include disable-default-a-behaviour;
width: fit-content;
display: flex;
align-items: baseline;
color: pvar(--mainForegroundColor);
.video-channel-display-name {
font-weight: $font-semibold;
font-size: 18px;
}
.video-channel-name {
font-size: 14px;
color: $grey-actor-name;
margin-left: 5px;
}
}
}
.actor-owner {
@include actor-owner;
.actor-owner {
@include actor-owner;
margin-top: 0;
}
margin-top: 0;
}
.video-subscriptions-header {
......@@ -50,32 +50,22 @@ input[type=text] {
}
@media screen and (max-width: $small-view) {
.video-channel {
.video-channel-info {
padding-bottom: 10px;
text-align: center;
.video-channel-names {
flex-direction: column;
align-items: center !important;
margin: auto;
}
}
img {
margin-right: 0;
}
.video-subscriptions-header input[type=text] {
width: 100% !important;
}
}
@media screen and (max-width: $mobile-view) {
.video-subscriptions-header {
flex-direction: column;
.video-channel-info {
padding-bottom: 10px;
text-align: center;
input[type=text] {
width: 100% !important;
.video-channel-names {
flex-direction: column;
align-items: center !important;
margin: auto;
}
}
}
img {
margin-right: 0;
}
}
<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
*ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true"
[displayDescription]="true" [displayPrivacy]="true"
......@@ -20,7 +20,7 @@
</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 i18n>No videos in this playlist.</div>
......
......@@ -2,17 +2,21 @@
@import '_mixins';
@import '_miniature';
.root {
display: grid;
grid-template-columns: auto 1fr;
}
.playlist-info {
grid-column: 1;
background-color: pvar(--submenuBackgroundColor);
margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
margin-top: -$sub-menu-margin-bottom;
padding: 10px;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
/* fix ellipsis dots background color */
::ng-deep .miniature-name::after {
......@@ -59,15 +63,35 @@
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 {
width: 100vw;
width: calc(100% + (2 * var(--horizontalMarginContent)));
padding-top: 20px;
margin-bottom: 10px;
}
.playlist-elements {
padding: 0 !important;
my-video-playlist-miniature,
.playlist-buttons {
margin-left: auto;
margin-right: auto;
}
::ng-deep my-video-playlist-element-miniature {
......
<h1>
<span>
<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>
</span>
<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>
</h1>
<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 *ngFor="let playlist of videoPlaylists" class="video-playlist">
<div class="miniature-wrapper">
<my-video-playlist-miniature [playlist]="playlist" [toManage]="true" [displayChannel]="true" [displayDescription]="true" [displayPrivacy]="true"
></my-video-playlist-miniature>
</div>
<my-video-playlist-miniature
[playlist]="playlist" [toManage]="true" [displayChannel]="true"
[displayDescription]="true" [displayPrivacy]="true" [displayAsRow]="true"
></my-video-playlist-miniature>
<div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons">
<my-delete-button label (click)="deleteVideoPlaylist(playlist)"></my-delete-button>
......
@import '_variables';
@import '_mixins';
h1 {
display: flex;
}
.create-button {
@include create-button;
}
......@@ -9,64 +13,45 @@ input[type=text] {
@include peertube-input-text(300px);
}
::ng-deep .action-button {
&.action-button-delete {
margin-right: 10px;
}
}
.video-playlist {
@include row-blocks;
.miniature-wrapper {
flex-grow: 1;
::ng-deep .miniature {
display: flex;
.miniature-info {
margin-left: 10px;
width: auto;
}
}
}
@include row-blocks($column-responsive: false);
}
.video-playlist-buttons {
min-width: 190px;
height: max-content;
}
.video-playlist-buttons {
display: flex;
margin-left: 10px;
align-self: flex-end;
}
.video-playlists-header {
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 {
text-align: center;
}
.video-playlist {
.video-playlist-buttons {
margin-top: 10px;
}
flex-wrap: wrap;
}
my-video-playlist-miniature ::ng-deep .miniature {
flex-direction: column;
.miniature-info {
margin-left: 0 !important;
}
.miniature-name {
max-width: $video-thumbnail-width;
}
.video-playlist-buttons {
margin-top: 10px;
margin-left: auto;
}
}
@media screen and (max-width: $mobile-view) {
@include on-mobile-main-col {
.video-playlists-header {
flex-direction: column;
......@@ -75,4 +60,8 @@ input[type=text] {
margin-bottom: 12px;
}
}
.action-button {
margin-left: 0;
}
}
......@@ -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 {
display: flex;
margin-left: 55px;
margin-top: 10px;
margin-left: 10px;
align-self: flex-end;
}
......@@ -69,7 +42,7 @@ my-edit-button {
margin-right: 10px;
}
@media screen and (max-width: $small-view) {
@include on-small-main-col {
h1 {
flex-direction: column;
......@@ -80,39 +53,12 @@ my-edit-button {
}
.action-button {
flex-direction: column;
align-self: center;
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;
}
}
margin-top: 10px;
margin-left: auto;
}
}
@media screen and (max-width: $mobile-view) {
@include on-mobile-main-col {
.videos-header {
flex-direction: column;
......@@ -120,4 +66,8 @@ my-edit-button {
width: 100% !important;
}
}
.action-button {
margin-left: 0;
}
}
<div class="margin-content">
<div i18n class="title-page title-page-single">
<div i18n class="title-page title-page-single" *ngIf="pagination.totalItems">