X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bvideo-channels%2Fvideo-channels.component.scss;h=004ad7998526d6faef52a649c5852964e567cdce;hb=7b51ede977c299a74728171d8c124bcc4cbba6ea;hp=f5547b4e9062b9f7ea1e024bdbf9a538419415ed;hpb=67264e060b6068399dae9a67abae035a73b84af1;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index f5547b4e9..004ad7998 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -1,32 +1,48 @@
-@import '_variables';
-@import '_mixins';
-@import '_actor';
-@import '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_account-channel-page' as *;
+@use '_miniature' as *;
 
 .root {
-  --myGlobalPadding: 60px;
+  --myGlobalTopPadding: 60px;
   --myChannelImgMargin: 30px;
   --myFontSize: 16px;
   --myGreyChannelFontSize: 16px;
   --myGreyOwnerFontSize: 14px;
 }
 
+.banner {
+  @include block-ratio('img', $banner-inverted-ratio);
+}
+
 .section-label {
   @include section-label-responsive;
 }
 
 .links {
-  @include fluid-videos-miniature-layout;
+  @include grid-videos-miniature-margins;
+}
+
+.actor-info {
+  min-width: 1px;
+  width: 100%;
+
+  > h4,
+  > .actor-handle {
+    @include ellipsis;
+  }
 }
 
 .channel-info {
+  @include grid-videos-miniature-margins(false, 15px);
+
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-rows: auto auto;
 
   background-color: pvar(--channelBackgroundColor);
   margin-bottom: 45px;
-  padding: var(--myGlobalPadding) var(--myGlobalPadding) 0 var(--myGlobalPadding);
+  padding-top: var(--myGlobalTopPadding);
   font-size: var(--myFontSize);
 }
 
@@ -34,8 +50,14 @@
   @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize));
 }
 
+.support-button {
+  @include button-with-icon(21px, 0, -1px);
+}
+
 .channel-description {
   grid-column: 1;
+  word-break: break-word;
+  padding-bottom: var(--myGlobalTopPadding);
 }
 
 .show-more {
@@ -49,12 +71,12 @@
   flex-wrap: wrap;
 
   > *:not(:last-child) {
-    margin-right: 15px;
+    @include margin-right(15px);
   }
 }
 
 .channel-buttons.right {
-  margin-left: 45px;
+  @include margin-left(45px);
 }
 
 // Only used by mobile
@@ -62,14 +84,8 @@
   display: none;
 }
 
-.created-at {
-  margin-top: 15px;
-  color: pvar(--greyForegroundColor);
-  padding-bottom: 60px;
-}
-
 .owner-card {
-  margin-left: 105px;
+  @include margin-left(105px);
   grid-column: 2;
   // Takes all the column
   grid-row: 1 / 3;
@@ -91,17 +107,17 @@
     display: flex;
     margin-bottom: 15px;
 
-    img {
-      @include avatar(48px);
-    }
-
     .actor-info {
-      margin-left: 15px;
+      @include margin-left(15px);
     }
 
     h4 {
       font-size: 18px;
       margin: 0;
+
+      a {
+        color: pvar(--mainForegroundColor);
+      }
     }
 
     .actor-handle {
@@ -111,9 +127,10 @@
   }
 
   .owner-description {
-    height: 140px;
-
     @include fade-text(120px, pvar(--mainBackgroundColor));
+
+    max-height: 140px;
+    word-break: break-word;
   }
 }
 
@@ -129,7 +146,7 @@
 }
 
 .copy-button {
-  border: none;
+  border: 0;
 }
 
 @media screen and (max-width: 1400px) {
@@ -139,14 +156,15 @@
   }
 
   .owner-card {
+    @include margin-left(60px);
+
     grid-row: 2;
-    margin-left: 60px;
   }
 }
 
 @media screen and (max-width: 1100px) {
   .root {
-    --myGlobalPadding: 45px;
+    --myGlobalTopPadding: 45px;
     --myChannelImgMargin: 15px;
   }
 
@@ -157,9 +175,9 @@
   }
 
   .channel-description:not(.expanded) {
-    max-height: 70px;
-
     @include fade-text(30px, pvar(--channelBackgroundColor));
+
+    max-height: 70px;
   }
 
   .show-more {
@@ -184,7 +202,7 @@
     display: block;
     width: 100%;
     border-bottom: 2px solid $separator-border-color;
-    padding: var(--myGlobalPadding) 45px;
+    padding: var(--myGlobalTopPadding) 45px;
     margin-bottom: 60px;
   }
 
@@ -194,15 +212,16 @@
     padding: 0;
 
     .avatar-row {
+      @include margin-right(30px);
+
       grid-column: 1;
-      margin-right: 30px;
     }
 
     .owner-description {
+      @include fade-text(30px, pvar(--mainBackgroundColor));
+
       grid-column: 2;
       max-height: 70px;
-
-      @include fade-text(30px, pvar(--mainBackgroundColor));
     }
 
     .view-account {
@@ -211,7 +230,8 @@
   }
 
   .view-account.complete {
-    display: inline-block;
+    display: block;
+    text-align: end;
     margin-top: 10px;
     color: pvar(--mainColor);
   }
@@ -223,7 +243,7 @@
 
 @media screen and (max-width: $mobile-view) {
   .root {
-    --myGlobalPadding: 15px;
+    --myGlobalTopPadding: 15px;
     --myFontSize: 14px;
     --myGreyChannelFontSize: 13px;
     --myGreyOwnerFontSize: 13px;
@@ -267,8 +287,8 @@
         margin-top: -5px;
       }
 
-      img {
-        @include channel-avatar(64px);
+      .account-avatar {
+        @include actor-avatar-size(64px);
 
         margin: -30px 0 0 15px;
       }