`fitWidth` for `video-miniature`, fluid grid (#2830)

* Fluid abstract video list

* normalize timestamp display on miniatures

* use grid for abstract-video-list

- refactor scss function var to pvar to avoid overriding css variables
- move fluid-grid margins to adapt-margin-content-width mixin for maintainability
- fix video-miniature-name margin-top on small screen

* move sceenratio function in a mixin

* display no miniature avatar in channel videos view

3 files changed, 9 insertions, 7 deletions

diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index 3c8b66cd5..43f33a53a 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -11,7 +11,7 @@
     top: -2px;
     margin: 5px;
 
-    @include apply-svg-color(var(--mainForegroundColor))
+    @include apply-svg-color(pvar(--mainForegroundColor))
   }
 }
 
@@ -25,8 +25,8 @@
       text-align: left;
       padding: 10px;
       font-size: 13px;
-      background-color: var(--mainBackgroundColor);
-      color: var(--mainForegroundColor);
+      background-color: pvar(--mainBackgroundColor);
+      color: pvar(--mainForegroundColor);
       border-radius: 3px;
 
       p {
diff --git a/client/src/app/shared/misc/list-overflow.component.scss b/client/src/app/shared/misc/list-overflow.component.scss
index 1e5fe4c10..1ec044489 100644
--- a/client/src/app/shared/misc/list-overflow.component.scss
+++ b/client/src/app/shared/misc/list-overflow.component.scss
@@ -24,7 +24,7 @@ button {
   &.routeActive {
     &::after {
       display: inherit;
-      border: 2px solid var(--mainColor);
+      border: 2px solid pvar(--mainColor);
       position: relative;
       right: 95%;
       top: 50%;
@@ -53,8 +53,8 @@ button {
     width: 100%;
 
     &.active {
-      color: var(--mainBackgroundColor) !important;
-      background-color: var(--mainHoverColor);
+      color: pvar(--mainBackgroundColor) !important;
+      background-color: pvar(--mainHoverColor);
       opacity: .9;
     }
   }
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 3d1e906a2..bc3ab85b3 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -59,7 +59,9 @@ function durationToString (duration: number) {
   const secondsPadding = seconds >= 10 ? '' : '0'
   const displayedHours = hours > 0 ? hours.toString() + ':' : ''
 
-  return displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
+  return (
+    displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
+  ).replace(/^0/, '')
 }
 
 function immutableAssign <A, B> (target: A, source: B) {