Add ability to view my followers

3 files changed, 136 insertions, 65 deletions

diff --git a/client/src/sass/include/_account-channel-page.scss b/client/src/sass/include/_account-channel-page.scss
new file mode 100644
index 000000000..b135bbb6d
--- /dev/null
+++ b/client/src/sass/include/_account-channel-page.scss
@@ -0,0 +1,88 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+@mixin section-label-responsive {
+  color: pvar(--mainColor);
+  font-size: 12px;
+  margin-bottom: 15px;
+  font-weight: $font-bold;
+  letter-spacing: 2.5px;
+
+  @media screen and (max-width: $mobile-view) {
+    font-size: 10px;
+    letter-spacing: 2.1px;
+    margin-bottom: 5px;
+  }
+}
+
+@mixin show-more-description {
+  color: pvar(--mainColor);
+  cursor: pointer;
+  margin: 10px auto 45px;
+}
+
+@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
+  display: flex;
+  grid-column: 1;
+  margin-bottom: 30px;
+
+  .main-avatar {
+    @include actor-avatar-size(120px);
+  }
+
+  > div {
+    @include margin-left($img-margin);
+
+    min-width: 1px;
+  }
+
+  .actor-info {
+    display: flex;
+
+    > div:first-child {
+      flex-grow: 1;
+      min-width: 1px;
+    }
+  }
+
+  .actor-display-name {
+    @include peertube-word-wrap;
+
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  h1 {
+    font-size: 28px;
+    font-weight: $font-bold;
+    margin: 0;
+  }
+
+  .actor-handle {
+    @include ellipsis;
+  }
+
+  .actor-handle,
+  .actor-counters {
+    color: pvar(--greyForegroundColor);
+    font-size: $grey-font-size;
+  }
+
+  .actor-counters > *:not(:last-child)::after {
+    content: '•';
+    margin: 0 10px;
+    color: pvar(--mainColor);
+  }
+
+  @media screen and (max-width: $mobile-view) {
+    margin-bottom: 15px;
+
+    h1 {
+      font-size: 22px;
+    }
+
+    .main-avatar {
+      @include actor-avatar-size(80px);
+    }
+  }
+}
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index b135bbb6d..f9e44b8ad 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -1,88 +1,68 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-@mixin section-label-responsive {
-  color: pvar(--mainColor);
-  font-size: 12px;
-  margin-bottom: 15px;
-  font-weight: $font-bold;
-  letter-spacing: 2.5px;
-
-  @media screen and (max-width: $mobile-view) {
-    font-size: 10px;
-    letter-spacing: 2.1px;
-    margin-bottom: 5px;
-  }
-}
-
-@mixin show-more-description {
-  color: pvar(--mainColor);
-  cursor: pointer;
-  margin: 10px auto 45px;
-}
-
-@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
-  display: flex;
-  grid-column: 1;
-  margin-bottom: 30px;
+@mixin actor-row ($avatar-size: 80px, $avatar-margin-right: 10px, $min-height: 130px, $separator: true) {
+  @include row-blocks($min-height: $min-height, $separator: $separator);
 
-  .main-avatar {
-    @include actor-avatar-size(120px);
-  }
-
-  > div {
-    @include margin-left($img-margin);
+  > my-actor-avatar {
+    @include actor-avatar-size($avatar-size);
 
-    min-width: 1px;
+    @include margin-right($avatar-margin-right);
   }
 
   .actor-info {
-    display: flex;
-
-    > div:first-child {
-      flex-grow: 1;
-      min-width: 1px;
-    }
+    flex-grow: 1;
   }
 
-  .actor-display-name {
-    @include peertube-word-wrap;
+  .actor-names {
+    @include disable-default-a-behaviour;
 
+    width: fit-content;
     display: flex;
-    flex-wrap: wrap;
+    align-items: baseline;
+    color: pvar(--mainForegroundColor);
   }
 
-  h1 {
-    font-size: 28px;
-    font-weight: $font-bold;
-    margin: 0;
+  .actor-display-name {
+    font-weight: $font-semibold;
+    font-size: 18px;
   }
 
-  .actor-handle {
-    @include ellipsis;
-  }
+  .actor-name {
+    @include margin-left(5px);
 
-  .actor-handle,
-  .actor-counters {
-    color: pvar(--greyForegroundColor);
-    font-size: $grey-font-size;
+    font-size: 14px;
+    color: $grey-actor-name;
   }
 
-  .actor-counters > *:not(:last-child)::after {
-    content: '•';
-    margin: 0 10px;
-    color: pvar(--mainColor);
-  }
+  .actor-owner {
+    @include disable-default-a-behaviour;
 
-  @media screen and (max-width: $mobile-view) {
-    margin-bottom: 15px;
+    font-size: 13px;
+    color: pvar(--mainForegroundColor);
 
-    h1 {
-      font-size: 22px;
+    span:hover {
+      opacity: 0.8;
     }
 
-    .main-avatar {
-      @include actor-avatar-size(80px);
+    my-actor-avatar {
+      @include margin-left(7px);
+
+      display: inline-block;
+      vertical-align: top;
+    }
+  }
+
+  @media screen and (max-width: $small-view) {
+    .actor-info {
+      padding-bottom: 10px;
+      text-align: center;
+
+      .actor-names {
+        flex-direction: column;
+        align-items: center !important;
+        margin: auto;
+      }
     }
   }
 }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 9e510771e..2f436d787 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -653,12 +653,15 @@
   @include button-with-icon(20px, 5px, -1px);
 }
 
-@mixin row-blocks ($column-responsive: true) {
+@mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
   display: flex;
-  min-height: 130px;
+  min-height: $min-height;
   padding-bottom: 20px;
   margin-bottom: 20px;
-  border-bottom: 1px solid #C6C6C6;
+
+  @if $separator {
+    border-bottom: 1px solid #C6C6C6;
+  }
 
   @media screen and (max-width: $small-view) {
     @if $column-responsive {