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

fix miniature fixed height, add link/title to avatar, remove pr-2 on channels list

pull/2870/head
Rigel Kent 2020-06-12 09:51:13 +02:00
parent 8b381422b8
commit 435258ea3c
No known key found for this signature in database
GPG Key ID: 5E53E96A494E452F
5 changed files with 12 additions and 12 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

@ -19,7 +19,6 @@
<div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div> <div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div>
<my-video-miniature <my-video-miniature
class="pr-2"
*ngFor="let video of getVideosOf(videoChannel)" *ngFor="let video of getVideosOf(videoChannel)"
[video]="video" [user]="user" [displayVideoActions]="true" [video]="video" [user]="user" [displayVideoActions]="true"
></my-video-miniature> ></my-video-miniature>

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

@ -10,10 +10,10 @@
<div class="video-bottom"> <div class="video-bottom">
<div class="video-miniature-information"> <div class="video-miniature-information">
<div class="d-inline-flex video-miniature-meta"> <div class="d-inline-flex video-miniature-meta">
<div *ngIf="displayOptions.avatar" class="avatar"> <a *ngIf="displayOptions.avatar" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
<img [src]="getAvatarUrl()" alt="Avatar" /> <img [src]="getAvatarUrl()" alt="" />
</div> </a>
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<a <a
tabindex="-1" tabindex="-1"

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

@ -9,7 +9,6 @@ $more-margin-right: 15px;
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
padding-bottom: $video-miniature-margin-bottom; padding-bottom: $video-miniature-margin-bottom;
height: 195px;
vertical-align: top; vertical-align: top;
.video-bottom { .video-bottom {
@ -119,8 +118,6 @@ $more-margin-right: 15px;
&.fit-width { &.fit-width {
width: 100%; width: 100%;
height: unset;
padding-bottom: $video-miniature-margin-bottom / 2;
.video-bottom { .video-bottom {
width: 100% !important; width: 100% !important;

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

@ -78,6 +78,7 @@ export class VideoMiniatureComponent implements OnInit {
addToWatchLaterText: string addToWatchLaterText: string
addedToWatchLaterText: string addedToWatchLaterText: string
inWatchLaterPlaylist: boolean inWatchLaterPlaylist: boolean
channelLinkTitle = ''
watchLaterPlaylist: { watchLaterPlaylist: {
id: number id: number
@ -96,9 +97,7 @@ export class VideoMiniatureComponent implements OnInit {
private videoPlaylistService: VideoPlaylistService, private videoPlaylistService: VideoPlaylistService,
private cd: ChangeDetectorRef, private cd: ChangeDetectorRef,
@Inject(LOCALE_ID) private localeId: string @Inject(LOCALE_ID) private localeId: string
) { ) {}
}
get isVideoBlur () { get isVideoBlur () {
return this.video.isVideoNSFWForUser(this.user, this.serverConfig) return this.video.isVideoNSFWForUser(this.user, this.serverConfig)
@ -114,6 +113,11 @@ export class VideoMiniatureComponent implements OnInit {
this.setUpBy() this.setUpBy()
this.channelLinkTitle = this.i18n(
'Go to the channel page of {{name}} ({{handle}})',
{ name: this.video.channel.name, handle: this.video.byVideoChannel }
)
// We rely on mouseenter to lazy load actions // We rely on mouseenter to lazy load actions
if (this.screenService.isInTouchScreen()) { if (this.screenService.isInTouchScreen()) {
this.loadActions() this.loadActions()

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

@ -56,7 +56,7 @@ $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-width: 238px;
$video-miniature-margin-bottom: 30px; $video-miniature-margin-bottom: 15px;
$video-thumbnail-height: 122px; $video-thumbnail-height: 122px;
$video-thumbnail-width: 223px; $video-thumbnail-width: 223px;