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

5 files changed, 12 insertions, 12 deletions

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index b45ca58da..8f1ff21a5 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -19,7 +19,6 @@
         <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>
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 992c16585..d3b750da8 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -10,10 +10,10 @@
   <div class="video-bottom">
     <div class="video-miniature-information">
       <div class="d-inline-flex video-miniature-meta">
-        <div *ngIf="displayOptions.avatar" class="avatar">
-          <img [src]="getAvatarUrl()" alt="Avatar" />
-        </div>
-
+        <a *ngIf="displayOptions.avatar" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
+          <img [src]="getAvatarUrl()" alt="" />
+        </a>
+        
         <div class="d-flex flex-column">
           <a
             tabindex="-1"
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index d926c4dec..99bd9c15b 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -9,7 +9,6 @@ $more-margin-right: 15px;
   display: inline-flex;
   flex-direction: column;
   padding-bottom: $video-miniature-margin-bottom;
-  height: 195px;
   vertical-align: top;
 
   .video-bottom {
@@ -119,8 +118,6 @@ $more-margin-right: 15px;
 
   &.fit-width {
     width: 100%;
-    height: unset;
-    padding-bottom: $video-miniature-margin-bottom / 2;
 
     .video-bottom {
       width: 100% !important;
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index ccf90af54..36e18d018 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -78,6 +78,7 @@ export class VideoMiniatureComponent implements OnInit {
   addToWatchLaterText: string
   addedToWatchLaterText: string
   inWatchLaterPlaylist: boolean
+  channelLinkTitle = ''
 
   watchLaterPlaylist: {
     id: number
@@ -96,9 +97,7 @@ export class VideoMiniatureComponent implements OnInit {
     private videoPlaylistService: VideoPlaylistService,
     private cd: ChangeDetectorRef,
     @Inject(LOCALE_ID) private localeId: string
-  ) {
-
-  }
+  ) {}
 
   get isVideoBlur () {
     return this.video.isVideoNSFWForUser(this.user, this.serverConfig)
@@ -114,6 +113,11 @@ export class VideoMiniatureComponent implements OnInit {
 
     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
     if (this.screenService.isInTouchScreen()) {
       this.loadActions()
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 56b1ff884..fc13f6509 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -56,7 +56,7 @@ $footer-margin: 30px;
 $separator-border-color: rgba(0, 0, 0, 0.10);
 
 $video-miniature-width: 238px;
-$video-miniature-margin-bottom: 30px;
+$video-miniature-margin-bottom: 15px;
 $video-thumbnail-height: 122px;
 $video-thumbnail-width: 223px;