From 3143ae17a014576ec21b535ba9e8266ca727a152 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 5 Apr 2019 15:23:41 +0200
Subject: [PATCH] Improve playlist element style
---
...unt-video-playlist-elements.component.html | 2 +-
...-playlist-element-miniature.component.scss | 11 +++---
...eo-playlist-element-miniature.component.ts | 2 +-
.../video-playlist-miniature.component.html | 12 +++---
.../video-playlist-miniature.component.scss | 28 +++++++-------
.../+video-watch/video-watch.component.scss | 37 ++++++++++---------
6 files changed, 49 insertions(+), 43 deletions(-)
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
index 95d4519fa7..284694b7fd 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
@@ -7,7 +7,7 @@
></my-video-playlist-miniature>
</div>
- <div class="col-xs-12 col-md-7 col-xl-9">
+ <div class="playlist-elements col-xs-12 col-md-7 col-xl-9">
<div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div>
<div
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
index f57fd2e1ca..f8a068cbc4 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -13,7 +13,7 @@
background-color: rgba(0, 0, 0, 0.05);
.more {
- display: block;
+ opacity: 1;
}
}
@@ -24,11 +24,10 @@
a {
@include disable-default-a-behaviour;
- min-width: 0;
display: flex;
+ min-width: 0;
align-items: center;
cursor: pointer;
- flex-grow: 1;
.position {
font-weight: $font-semibold;
@@ -55,6 +54,7 @@
.video-info {
display: flex;
flex-direction: column;
+ align-self: flex-start;
min-width: 0;
a {
@@ -69,6 +69,7 @@
.video-info-name {
font-size: 18px;
font-weight: $font-semibold;
+ display: inline-block;
@include ellipsis;
}
@@ -83,10 +84,10 @@
justify-self: flex-end;
margin-left: auto;
cursor: pointer;
- display: none;
+ opacity: 0;
&.show {
- display: block;
+ opacity: 1;
}
.icon-more {
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
index 6cc5b87b4a..57990707a3 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'
import { Video } from '@app/shared/video/video.model'
import { VideoPlaylistElementUpdate } from '@shared/models'
import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
index faf906c593..86f6664cbc 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
@@ -19,14 +19,14 @@
{{ playlist.displayName }}
</a>
- <div class="video-info-privacy" *ngIf="displayPrivacy">{{ playlist.privacy.label }}</div>
+ <a i18n [routerLink]="[ '/video-channels', playlist.videoChannelBy ]" class="by" *ngIf="displayChannel && playlist.videoChannelBy">
+ {{ playlist.videoChannelBy }}
+ </a>
- <div class="video-info-by-date">
- <a i18n [routerLink]="[ '/video-channels', playlist.videoChannelBy ]" class="by" *ngIf="displayChannel && playlist.videoChannelBy">
- {{ playlist.videoChannelBy }}
- </a>
+ <div class="privacy-date">
+ <span class="video-info-privacy" *ngIf="displayPrivacy">{{ playlist.privacy.label }}</span>
- <div i18n class="updated-at">Updated {{ playlist.updatedAt | myFromNow }}</div>
+ <span i18n class="updated-at">Updated {{ playlist.updatedAt | myFromNow }}</span>
</div>
<div *ngIf="displayDescription" class="video-info-description">{{ playlist.description }}</div>
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
index 94edd11778..8947e72d13 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
@@ -43,18 +43,25 @@
.miniature-name {
@include miniature-name;
+
+ @include ellipsis-multiline(1.3em, 2);
+
+ margin: 0;
}
- .video-info-by-date {
- display: flex;
- font-size: 13px;
- margin: 5px 0;
+ .by {
+ @include disable-default-a-behaviour;
- .by {
- @include disable-default-a-behaviour;
+ display: block;
+ color: $grey-foreground-color;
+ }
- display: block;
- color: var(--mainForegroundColor);
+ .privacy-date {
+ margin-top: 5px;
+
+ .video-info-privacy {
+ font-size: 14px;
+ font-weight: $font-semibold;
&::after {
content: '-';
@@ -63,11 +70,6 @@
}
}
- .video-info-privacy {
- font-size: 13px;
- font-weight: $font-semibold;
- }
-
.video-info-description {
margin-top: 10px;
color: $grey-foreground-color;
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index c1eaf9b2b0..d61a0bc3ee 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -16,6 +16,8 @@ $player-factor: 1.7; // 16/9
@mixin playlist-below-player {
width: 100%;
+ height: auto;
+ max-height: 300px;
border-bottom: 1px solid $separator-border-color;
}
@@ -51,6 +53,12 @@ $player-factor: 1.7; // 16/9
justify-content: center;
margin: 0 -15px;
+ #videojs-wrapper {
+ display: flex;
+ justify-content: center;
+ flex-grow: 1;
+ }
+
.remote-server-down {
color: #fff;
display: flex;
@@ -73,10 +81,12 @@ $player-factor: 1.7; // 16/9
}
.playlist {
- width: 400px;
+ min-width: 200px;
+ max-width: 470px;
height: 66vh;
background-color: var(--mainBackgroundColor);
overflow-y: auto;
+ border-bottom: 1px solid $separator-border-color;
.playlist-info {
padding: 5px 30px;
@@ -492,6 +502,15 @@ my-video-comments {
}
@media screen and (max-width: 1100px) {
+ #video-wrapper {
+ flex-direction: column;
+ justify-content: center;
+
+ .playlist {
+ @include playlist-below-player;
+ }
+ }
+
.video-bottom {
flex-direction: column;
@@ -506,22 +525,6 @@ my-video-comments {
}
}
-@media screen and (max-width: 900px) {
- #video-wrapper {
- flex-direction: column;
- justify-content: center;
-
- #videojs-wrapper {
- display: flex;
- justify-content: center;
- }
-
- .playlist {
- @include playlist-below-player;
- }
- }
-}
-
@media screen and (max-width: 600px) {
.video-bottom {
margin: 20px 0 0 0 !important;
--
GitLab