From c8487f3f63c90fbfddaa906b3cbd90fb209ab1bb Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 29 May 2019 16:45:59 +0200
Subject: Improve account channel page

Set it as the default route for account page. The main goal is to better
differentiate the channel page from the account page. With the channel
page set as default, I hope people will better understand they are in
the account page, and that this account could have multiple channels.
---
 .../video-list/video-overview.component.html       |  6 +--
 .../video-list/video-overview.component.scss       | 60 ++--------------------
 2 files changed, 7 insertions(+), 59 deletions(-)

(limited to 'client/src/app/videos')

diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index b644dd798..f59de584a 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -3,7 +3,7 @@
   <div class="no-results" i18n *ngIf="notResults">No results.</div>
 
   <div class="section" *ngFor="let object of overview.categories">
-    <div class="section-title" i18n>
+    <div class="section-title">
       <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
     </div>
 
@@ -11,7 +11,7 @@
   </div>
 
   <div class="section" *ngFor="let object of overview.tags">
-    <div class="section-title" i18n>
+    <div class="section-title">
       <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
     </div>
 
@@ -19,7 +19,7 @@
   </div>
 
   <div class="section channel" *ngFor="let object of overview.channels">
-    <div class="section-title" i18n>
+    <div class="section-title">
       <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
         <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
 
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss
index a24766783..ade6f53b7 100644
--- a/client/src/app/videos/video-list/video-overview.component.scss
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -2,62 +2,10 @@
 @import '_mixins';
 @import '_miniature';
 
-.section {
-  max-height: 500px; // 2 rows max
-  overflow: hidden;
-  padding-top: 10px;
-
-  &:first-child {
-    padding-top: 30px;
-  }
-
-  my-video-miniature {
-    text-align: left;
-  }
-}
-
-.section-title {
-  font-size: 24px;
-  font-weight: $font-semibold;
-  margin-bottom: 10px;
-
-  a {
-    &:hover, &:focus:not(.focus-visible), &:active {
-      text-decoration: none;
-      outline: none;
-    }
-
-    color: var(--mainForegroundColor);
-  }
+.margin-content {
+  @include adapt-margin-content-width;
 }
 
-.channel {
-  .section-title a {
-    display: flex;
-    width: fit-content;
-    align-items: center;
-
-    img {
-      @include avatar(28px);
-
-      margin-right: 8px;
-    }
-  }
-}
-
-@media screen and (max-width: 500px) {
-  .margin-content {
-    margin: 0 !important;
-  }
-
-  .section-title {
-    font-size: 17px;
-  }
-
-  .section {
-    max-height: initial;
-    overflow: initial;
-
-    @include video-miniature-small-screen;
-  }
+.section {
+  @include miniature-rows;
 }
-- 
cgit v1.2.3