Refactoring accounts component style

client/src/app/+accounts/account-video-channels/account-video-channels.component.html

@@ -16,7 +16,7 @@
           size="75"
         ></my-actor-avatar>
 
-        <h2>
+        <h2 class="fs-5 lh-1 fw-bold m-0">
           <a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
             {{ videoChannel.displayName }}
           </a>
@@ -39,7 +39,7 @@
 
       <div class="videos-overflow-workaround">
         <div class="videos">
-          <div class="no-results" i18n *ngIf="getTotalVideosOf(videoChannel) === 0">This channel doesn't have any videos.</div>
+          <div class="no-results h-auto" i18n *ngIf="getTotalVideosOf(videoChannel) === 0">This channel doesn't have any videos.</div>
 
           <my-video-miniature
             *ngFor="let video of getVideosOf(videoChannel)"

client/src/app/+accounts/account-video-channels/account-video-channels.component.scss

@@ -8,11 +8,11 @@
 }
 
 .channel {
+  @include rfs(2rem, padding);
+  @include rfs(2rem 0, margin);
+
   max-width: $max-channels-width;
   background-color: pvar(--channelBackgroundColor);
-  padding: 30px;
-
-  margin: 30px 0;
 
   display: grid;
   grid-template-columns: 1fr auto;
@@ -44,10 +44,6 @@
   h2 {
     grid-row: 1;
     grid-column: 2;
-    font-size: 20px;
-    line-height: 1;
-    font-weight: $font-bold;
-    margin: 0;
   }
 
   .actor-counters {
@@ -87,13 +83,11 @@ my-subscribe-button {
     max-width: $video-thumbnail-medium-width;
   }
 
-  .no-results {
-    height: auto;
-  }
 }
 
 .videos-overflow-workaround {
-  margin-top: 30px;
+  @include margin-top(2rem);
+  
   overflow-x: hidden;
 }
 

client/src/app/+accounts/accounts.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="account" class="root">
-  <div class="account-info">
+  <div class="account-info d-md-grid d-block">
 
     <div class="account-avatar-row">
       <my-actor-avatar class="main-avatar" actorType="account" [actor]="account"></my-actor-avatar>
@@ -9,11 +9,11 @@
 
         <div class="actor-info">
           <div>
-            <div class="actor-display-name">
+            <div class="actor-display-name align-items-center">
               <h1 i18n-title [title]="'Created on ' + (account.createdAt | date)">{{ account.displayName }}</h1>
 
               <my-user-moderation-dropdown
-                [prependActions]="prependModerationActions"
+                class="mx-3" prependActions]="prependModerationActions"
                 buttonSize="small" [account]="account" [user]="accountUser" placement="bottom-left auto"
                 (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
               ></my-user-moderation-dropdown>
@@ -48,7 +48,7 @@
       <div class="description-html" [innerHTML]="accountDescriptionHTML"></div>
     </div>
 
-    <div *ngIf="hasShowMoreDescription()" class="show-more" role="button"
+    <div *ngIf="hasShowMoreDescription()" class="show-more d-md-none d-block" role="button"
       (click)="accountDescriptionExpanded = !accountDescriptionExpanded"
       title="Show the complete description" i18n-title i18n
     >

client/src/app/+accounts/accounts.component.scss

@@ -4,10 +4,8 @@
 @use '_miniature' as *;
 
 .root {
-  --myGlobalTopPadding: 60px;
-  --myImgMargin: 30px;
-  --myFontSize: 16px;
-  --myGreyFontSize: 16px;
+  --myFontSize: 1rem;
+  --myGreyFontSize: 1rem;
 }
 
 .section-label {
@@ -30,12 +28,6 @@
   }
 }
 
-my-user-moderation-dropdown {
-  margin: 0 10px;
-
-  height: fit-content;
-}
-
 .copy-button {
   @include margin-left(3px);
 
@@ -48,20 +40,19 @@ my-user-moderation-dropdown {
 
 .account-info {
   @include grid-videos-miniature-margins(false, 15px);
+  @include padding-top(3.75rem);
+  @include padding-bottom(3.75rem);
+  @include margin-bottom(3rem);
+  @include font-size(1rem);
 
-  display: grid;
   grid-template-columns: 1fr min-content;
   grid-template-rows: auto auto;
 
   background-color: pvar(--submenuBackgroundColor);
-  margin-bottom: 45px;
-  padding-top: var(--myGlobalTopPadding);
-  padding-bottom: var(--myGlobalTopPadding);
-  font-size: var(--myFontSize);
 }
 
 .account-avatar-row {
-  @include avatar-row-responsive(var(--myImgMargin), var(--myGreyFontSize));
+  @include avatar-row-responsive(2rem, var(--myGreyFontSize));
 }
 
 .actor-display-name {
@@ -76,8 +67,8 @@ my-user-moderation-dropdown {
 
 .show-more {
   @include show-more-description;
+  @include padding-bottom(3.75rem);
 
-  display: none;
   text-align: center;
 }
 
@@ -90,11 +81,11 @@ my-user-moderation-dropdown {
   justify-content: flex-end;
   align-content: flex-start;
 
-  > *:not(:last-child) {
-    margin-bottom: 15px;
+  >*:not(:last-child) {
+    @include margin-bottom(1rem);
   }
 
-  > a {
+  >a {
     white-space: nowrap;
   }
 }
@@ -104,15 +95,6 @@ my-user-moderation-dropdown {
 }
 
 @media screen and (max-width: $small-view) {
-  .root {
-    --myGlobalTopPadding: 45px;
-    --myChannelImgMargin: 15px;
-  }
-
-  .account-info {
-    display: block;
-    padding-bottom: 60px;
-  }
 
   .description:not(.expanded) {
     @include fade-text(30px, pvar(--submenuBackgroundColor));
@@ -120,10 +102,6 @@ my-user-moderation-dropdown {
     max-height: 70px;
   }
 
-  .show-more {
-    display: block;
-  }
-
   .buttons {
     justify-content: center;
   }
@@ -131,22 +109,12 @@ my-user-moderation-dropdown {
 
 @media screen and (max-width: $mobile-view) {
   .root {
-    --myGlobalTopPadding: 15px;
-    --myFontSize: 14px;
-    --myGreyFontSize: 13px;
-  }
-
-  .account-info {
-    display: block;
-    padding-bottom: 30px;
+    --myFontSize: $font-size-rem-14px;
+    --myGreyFontSize: $font-size-rem-13px;
   }
 
   .links {
     margin: auto !important;
     width: min-content;
   }
-
-  .show-more {
-    margin-bottom: 30px;
-  }
-}
+}

client/src/sass/include/_account-channel-page.scss

@@ -16,15 +16,17 @@
 }
 
 @mixin show-more-description {
+  @include rfs(10px auto 45px, margin);
+  
   color: pvar(--mainColor);
   cursor: pointer;
-  margin: 10px auto 45px;
 }
 
 @mixin avatar-row-responsive ($img-margin, $grey-font-size) {
+  @include margin-bottom(2rem);
+
   display: flex;
   grid-column: 1;
-  margin-bottom: 30px;
 
   > div {
     @include margin-left($img-margin);
@@ -49,7 +51,8 @@
   }
 
   h1 {
-    font-size: 28px;
+    @include font-size(2rem);
+
     font-weight: $font-bold;
     margin: 0;
   }
@@ -60,8 +63,9 @@
 
   .actor-handle,
   .actor-counters {
+    @include font-size($grey-font-size);
+
     color: pvar(--greyForegroundColor);
-    font-size: $grey-font-size;
   }
 
   .actor-counters > *:not(:last-child)::after {
@@ -75,11 +79,6 @@
   }
 
   @media screen and (max-width: $mobile-view) {
-    margin-bottom: 15px;
-
-    h1 {
-      font-size: 22px;
-    }
 
     .main-avatar {
       @include actor-avatar-size(80px);