From 733dbc535d5fecdaba9e05feb8923bc754920525 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 31 Mar 2021 08:59:52 +0200
Subject: Channel/account page redesign feedbacks

Fix owner default avatar
Semi bold orange inverted button
Max width account description
Increase account's channels padding
Use owner avatar/display name links
Move "view owner account" link on mobile
Try to always display channel in video miniatures
Add small border radius for channel's avatar
Use main foreground color for the magnifying glass
---
 .../src/app/+video-channels/video-channels.component.html  | 14 +++++++++-----
 .../src/app/+video-channels/video-channels.component.scss  |  9 ++++++++-
 client/src/app/+video-channels/video-channels.component.ts |  8 ++++++++
 3 files changed, 25 insertions(+), 6 deletions(-)

(limited to 'client/src/app/+video-channels')

diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index b9ac13f09..87e1b294b 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -17,10 +17,14 @@
     <ng-template #ownerTemplate>
       <div class="owner-block">
         <div class="avatar-row">
-          <img class="account-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+          <a [routerLink]="getAccountUrl()" title="View account" i18n-title>
+            <img class="account-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+          </a>
 
           <div class="actor-info">
-            <h4>{{ videoChannel.ownerAccount.displayName }}</h4>
+            <h4>
+              <a [routerLink]="getAccountUrl()" title="View account" i18n-title>{{ videoChannel.ownerAccount.displayName }}</a>
+            </h4>
 
             <div class="actor-handle">@{{ videoChannel.ownerBy }}</div>
           </div>
@@ -30,11 +34,11 @@
           <div class="description-html" [innerHTML]="ownerDescriptionHTML"></div>
         </div>
 
-        <a class="view-account short" [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n>
+        <a class="view-account short" [routerLink]="getAccountUrl()" i18n>
           View account
         </a>
 
-        <a class="view-account complete" [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n>
+        <a class="view-account complete" [routerLink]="getAccountUrl()" i18n>
           View owner account
         </a>
       </div>
@@ -83,7 +87,7 @@
       <div class="created-at" i18n>Channel created on {{ videoChannel.createdAt | date }}</div>
     </div>
 
-    <div *ngIf="!channelDescriptionExpanded" class="show-more" role="button"
+    <div *ngIf="hasShowMoreDescription()" class="show-more" role="button"
       (click)="channelDescriptionExpanded = !channelDescriptionExpanded"
       title="Show the complete description" i18n-title i18n
     >
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index ec8f67a7e..3b27f3aa1 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -42,6 +42,7 @@
 
 .channel-description {
   grid-column: 1;
+  word-break: break-word;
 }
 
 .show-more {
@@ -108,6 +109,10 @@
     h4 {
       font-size: 18px;
       margin: 0;
+
+      a {
+        color: pvar(--mainForegroundColor);
+      }
     }
 
     .actor-handle {
@@ -118,6 +123,7 @@
 
   .owner-description {
     height: 140px;
+    word-break: break-word;
 
     @include fade-text(120px, pvar(--mainBackgroundColor));
   }
@@ -217,7 +223,8 @@
   }
 
   .view-account.complete {
-    display: inline-block;
+    display: block;
+    text-align: right;
     margin-top: 10px;
     color: pvar(--mainColor);
   }
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index a8ca3d6ff..2739047ed 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -103,10 +103,18 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
     this.notifier.success($localize`Username copied`)
   }
 
+  hasShowMoreDescription () {
+    return !this.channelDescriptionExpanded && this.channelDescriptionHTML.length > 100
+  }
+
   showSupportModal () {
     this.supportModal.show()
   }
 
+  getAccountUrl () {
+    return [ '/accounts', this.videoChannel.ownerBy ]
+  }
+
   private loadChannelVideosCount () {
     this.videoService.getVideoChannelVideos({
       videoChannel: this.videoChannel,
-- 
cgit v1.2.3