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

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / video-playlist / video-playlist-element-miniature.component.scss

diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
index b55ca0deac106f74b81998a7c2ca2da1a566b1cd..afd775b2554aaff3793eafac45c9247292240532 100644 (file)
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -24,7 +24,7 @@ my-video-thumbnail,
 .video {
   display: flex;
   align-items: center;
-  background-color: var(--mainBackgroundColor);
+  background-color: pvar(--mainBackgroundColor);
   padding: 10px;
   border-bottom: 1px solid $separator-border-color;
 
@@ -36,6 +36,12 @@ my-video-thumbnail,
     }
   }
 
+  @media not all and (hover: hover) and (pointer: fine) {
+    .more {
+      opacity: 1 !important;
+    }
+  }
+
   &.playing {
     background-color: rgba(0, 0, 0, 0.02);
   }
@@ -43,7 +49,7 @@ my-video-thumbnail,
   a {
     @include disable-default-a-behaviour;
 
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
     display: flex;
     min-width: 0;
     align-items: center;
@@ -52,11 +58,11 @@ my-video-thumbnail,
     .position {
       font-weight: $font-semibold;
       margin-right: 10px;
-      color: $grey-foreground-color;
+      color: pvar(--greyForegroundColor);
       min-width: 25px;
 
       my-global-icon {
-        @include apply-svg-color($grey-foreground-color);
+        @include apply-svg-color(pvar(--greyForegroundColor));
 
         width: 17px;
         position: relative;
@@ -72,14 +78,10 @@ my-video-thumbnail,
 
       a {
         width: auto;
-
-        &:hover {
-          text-decoration: underline !important;
-        }
       }
 
       .video-info-account, .video-info-timestamp {
-        color: $grey-foreground-color;
+        color: pvar(--greyForegroundColor);
       }
     }
   }
@@ -92,19 +94,22 @@ my-video-thumbnail,
     @include ellipsis;
   }
 
-  .more {
+  .more, my-edit-button {
     justify-self: flex-end;
     margin-left: auto;
     cursor: pointer;
-    opacity: 0;
     min-width: 24px;
+  }
+
+  .more {
+    opacity: 0;
 
     &.show {
       opacity: 1;
     }
 
     .icon-more {
-      @include apply-svg-color($grey-foreground-color);
+      @include apply-svg-color(pvar(--greyForegroundColor));
 
       display: flex;
 
@@ -136,3 +141,84 @@ my-video-thumbnail,
     }
   }
 }
+
+@mixin more-dropdown-control {
+  .video {
+    my-edit-button {
+      display: none;
+
+      + .more {
+        display: inline-flex;
+      }
+    }
+  }
+}
+
+@mixin edit-button-control {
+  .video {
+    my-edit-button {
+      display: none;
+    }
+
+    &.playing {
+      my-edit-button {
+        display: inline-flex;
+        height: max-content;
+      }
+    }
+
+    my-edit-button + .more {
+      display: none;
+    }
+  }
+}
+
+@mixin edit-button-in-mobile-view {
+  .video {
+    my-edit-button {
+      ::ng-deep .action-button-edit {
+        padding: 0 13px;
+
+        .button-label {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: $small-view) {
+  :host-context(.expanded) {
+    @include more-dropdown-control();
+  }
+}
+
+@media screen and (max-width: $small-view) {
+  :host-context(.expanded) {
+    @include edit-button-control();
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  :host-context(.expanded) {
+    @include edit-button-in-mobile-view();
+  }
+}
+
+@media screen and (min-width: #{$small-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include more-dropdown-control();
+  }
+}
+
+@media screen and (max-width: #{$small-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include edit-button-control();
+  }
+}
+
+@media screen and (max-width: #{$mobile-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include edit-button-in-mobile-view();
+  }
+}