From 5b0ec7cddb1ae6dbd2057f067382866f846b882c Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 15 Jun 2022 14:59:25 +0200
Subject: Increase global font size

---
 .../video-add-to-playlist.component.html           | 10 ++-
 .../video-add-to-playlist.component.scss           | 45 +++++--------
 ...video-playlist-element-miniature.component.scss | 73 ++++++++++++----------
 .../video-playlist-miniature.component.scss        |  2 +-
 4 files changed, 59 insertions(+), 71 deletions(-)

(limited to 'client/src/app/shared/shared-video-playlist')

diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
index bd5d37196..6d787796a 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
@@ -30,12 +30,10 @@
       </div>
 
       <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed">
-        <div class="labels">
-          <div i18n>Start at</div>
-          <div i18n>Stop at</div>
-        </div>
+        <div class="header-label" i18n>Start at</div>
+        <div class="header-label" i18n>Stop at</div>
 
-        <div *ngFor="let element of buildOptionalRowElements(playlist)">
+        <ng-container *ngFor="let element of buildOptionalRowElements(playlist)">
           <my-peertube-checkbox
             [inputName]="getOptionalInputName(playlist, element)"
             [ngModel]="element.enabled" [onPushWorkaround]="true"
@@ -55,7 +53,7 @@
             (inputBlur)="onElementTimestampUpdate(playlist, element)"
             #stopAt
           ></my-timestamp-input>
-        </div>
+        </ng-container>
       </div>
     </div>
   </div>
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index 7db469d7c..de2f1032b 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -1,10 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-$optional-rows-checkbox-width: 34px;
-$timestamp-width: 50px;
-$timestamp-margin-right: 10px;
-
 .header,
 .dropdown-item,
 .input-container {
@@ -52,12 +48,12 @@ $timestamp-margin-right: 10px;
   }
 }
 
-.primary-row,
-.optional-rows > div {
+.primary-row {
   display: flex;
 
   my-peertube-checkbox {
     @include margin-right(10px);
+
     align-self: center;
   }
 
@@ -84,41 +80,30 @@ $timestamp-margin-right: 10px;
       height: 19px;
     }
   }
-
-  my-timestamp-input {
-    @include margin-right($timestamp-margin-right);
-
-    ::ng-deep .ui-inputtext {
-      padding: 0;
-      width: $timestamp-width;
-    }
-  }
 }
 
 .optional-rows {
-  > div {
-    padding: 8px 5px 5px 10px;
-  }
+  display: grid;
+  grid-template-columns: 35px 80px 80px;
+  row-gap: 3px;
+  column-gap: 10px;
+  align-items: center;
 
   my-peertube-checkbox {
-    @include margin-right(0 !important);
-
-    display: block;
-    width: $optional-rows-checkbox-width;
+    @include margin-left(auto);
   }
 
-  .labels {
-    @include margin-left($optional-rows-checkbox-width);
-
+  .header-label {
     font-size: 13px;
     color: pvar(--greyForegroundColor);
-    padding-top: 5px;
-    padding-bottom: 0;
+    padding-left: 2px;
 
-    div {
-      @include margin-right($timestamp-margin-right);
+    &:nth-child(1) {
+      grid-column: 2;
+    }
 
-      width: $timestamp-width;
+    &:nth-child(2) {
+      grid-column: 3;
     }
   }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index c0cf2d1da..e6b01d33d 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -75,40 +75,6 @@ my-video-thumbnail,
         left: -2px;
       }
     }
-
-    .video-info {
-      display: flex;
-      flex-direction: column;
-      align-self: flex-start;
-      min-width: 0;
-
-      .video-info-header {
-        display: flex;
-        align-items: baseline;
-
-        a {
-          width: auto;
-          padding-right: 5px;
-        }
-
-        .pt-badge {
-          @include margin-right(5px);
-        }
-      }
-
-      .video-info-account,
-      .video-info-timestamp {
-        color: pvar(--greyForegroundColor);
-      }
-    }
-  }
-
-  .video-info-name {
-    @include ellipsis;
-
-    font-size: 18px;
-    font-weight: $font-semibold;
-    display: inline-block;
   }
 
   .more,
@@ -139,6 +105,45 @@ my-video-thumbnail,
   }
 }
 
+.video-info-name {
+  @include ellipsis;
+
+  font-size: 18px;
+  font-weight: $font-semibold;
+  display: inline-block;
+}
+
+.video-info {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  min-width: 0;
+
+  .video-info-header {
+    display: flex;
+    align-items: baseline;
+
+    a {
+      width: auto;
+      padding-right: 5px;
+    }
+
+    .pt-badge {
+      @include margin-right(5px);
+    }
+  }
+
+  .video-info-account,
+  .video-info-timestamp {
+    color: pvar(--greyForegroundColor);
+  }
+}
+
+.video-info-account,
+.video-miniature-created-at-views {
+  font-size: 14px;
+}
+
 .dropdown-menu {
 
   .dropdown-item {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index 3956d9282..d43afad28 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -53,7 +53,7 @@
 
   .privacy-date {
     margin-top: 5px;
-    font-size: 13px;
+    font-size: 14px;
 
     .privacy {
       font-weight: $font-semibold;
-- 
cgit v1.2.3