From a1c96a63a0ac70f0853a8ef7a97f828f8bb0f5d9 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 12 Oct 2023 09:06:40 +0200
Subject: [PATCH] Better videos list header styling

---
 .../videos-list.component.html                |  6 +++---
 .../videos-list.component.scss                | 20 +++++++------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.html b/client/src/app/shared/shared-video-miniature/videos-list.component.html
index 909c86d3d..6fea36f4c 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.html
@@ -1,6 +1,6 @@
 <div class="margin-content">
-  <div class="videos-header">
-    <h1 *ngIf="displayTitle" class="title" placement="bottom" [ngbTooltip]="titleTooltip" container="body">
+  <div class="videos-header pt-4 mb-4">
+    <h1 *ngIf="displayTitle" class="title mb-1" placement="bottom" [ngbTooltip]="titleTooltip" container="body">
       {{ title }}
     </h1>
 
@@ -10,7 +10,7 @@
       <my-feed [syndicationItems]="syndicationItems"></my-feed>
     </div>
 
-    <div class="action-block">
+    <div *ngIf="headerActions.length !== 0" class="action-block mt-3">
       <ng-container *ngFor="let action of headerActions">
         <a *ngIf="action.routerLink" class="ms-2" [routerLink]="action.routerLink" routerLinkActive="active">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.scss b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
index fb9dcafb8..1a1fda0d2 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
@@ -4,12 +4,11 @@
 @use '_miniature' as *;
 
 // Cannot set margin top to videos-header because of the main header fixed position
-$margin-top: 30px;
+$margin-top: 2rem;
 
 .videos-header {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  margin-bottom: 30px;
 
   .title,
   .title-subscription {
@@ -21,9 +20,6 @@ $margin-top: 30px;
     color: pvar(--mainForegroundColor);
     display: inline-block;
     font-weight: $font-semibold;
-
-    margin-top: $margin-top;
-    margin-bottom: 0;
   }
 
   .title-subscription {
@@ -39,7 +35,6 @@ $margin-top: 30px;
   .action-block {
     grid-column: 3;
     grid-row: 1/3;
-    margin-top: $margin-top;
   }
 
   my-feed {
@@ -77,15 +72,15 @@ $margin-top: 30px;
   @include margin-right(pvar(--horizontalMarginContent));
 
   .video-wrapper {
-    margin-bottom: 15px;
+    margin-bottom: 1rem;
   }
 }
 
 @media screen and (max-width: $mobile-view) {
   .videos-header,
   my-video-filters-header {
-    @include margin-left(15px);
-    @include margin-right(15px);
+    @include margin-left(1rem);
+    @include margin-right(1rem);
 
     display: inline-block;
   }
@@ -95,9 +90,8 @@ $margin-top: 30px;
   }
 
   .videos-header {
-    flex-direction: column;
-    align-items: center;
-    height: auto;
-    margin-bottom: 10px;
+    text-align: center;
+    width: 100%;
+    margin-bottom: 1rem;
   }
 }