Refactoring margin and padding mixins

diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index 84626809dee1cd5116b21e356ba280af9c2a2645..fd4109416564c33e202b0ba4f4418b08555c727b 100644 (file)
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -2,7 +2,7 @@
   <h1 class="visually-hidden" i18n>Follows</h1>
 
   <div class="col-xl-6 col-md-12">
-    <h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2>
+    <h2 i18n class="fs-5-5 mb-4 fw-semibold">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2>
 
     <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">{{ instanceName }} does not have followers.</div>
 
@@ -14,7 +14,7 @@
   </div>
 
   <div class="col-xl-6 col-md-12">
-    <h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2>
+    <h2 i18n class="fs-5-5 mb-4 fw-semibold">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2>
 
     <div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">{{ instanceName }} does not have subscriptions.</div>
 

diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss
index 001405dc75dae4d0fb7f5ab134d60a1812dbd54a..a81bb8cfc625fd842e04b8630537256ec9be09d6 100644 (file)
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -7,7 +7,7 @@
 }
 
 .card {
-  @include rfs(2rem, margin);
+  @include margin(2rem);
 
   flex-basis: 300px;
 }

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 2e34ed71c78b06eff05d4b1215d4781ff521864b..b5aacffc8f30c277c5754724697975de66431966 100644 (file)
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -8,8 +8,8 @@
 }
 
 .channel {
-  @include rfs(2rem, padding);
-  @include rfs(2rem 0, margin);
+  @include padding(1.75rem);
+  @include margin(2rem, 0);
 
   max-width: $max-channels-width;
   background-color: pvar(--channelBackgroundColor);
@@ -110,10 +110,6 @@ my-subscribe-button {
 }
 
 @include on-small-main-col {
-  .channel {
-    padding: 15px;
-  }
-
   .channel-avatar-row {
     grid-template-columns: auto auto auto 1fr;
 

diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 116b26a4da3dcd7a4e373d24644a33bec9bf114e..2a49859643c6f69d2a8aaec699d66cd13dd4566a 100644 (file)
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -13,7 +13,7 @@
               <h1 i18n-title [title]="'Created on ' + (account.createdAt | date)">{{ account.displayName }}</h1>
 
               <my-user-moderation-dropdown
-                class="mx-3" 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>

diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 908e4eeda4eb283b3dfcbc169cbd8a4b41bf0d3e..56b952b657960bb31fad19b39a575166e6de8f34 100644 (file)
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -109,8 +109,8 @@
 
 @media screen and (max-width: $mobile-view) {
   .root {
-    --myFontSize: $font-size-rem-14px;
-    --myGreyFontSize: $font-size-rem-13px;
+    --myFontSize: 14px;
+    --myGreyFontSize: 13px;
   }
 
   .links {

diff --git a/client/src/app/+home/home.component.ts b/client/src/app/+home/home.component.ts
index 8da4a2008b12a73f1077b24be17c75d2303165ac..e59cde989787bf1857746c7299dbf8477ec35299 100644 (file)
--- a/client/src/app/+home/home.component.ts
+++ b/client/src/app/+home/home.component.ts
@@ -2,7 +2,7 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { CustomPageService } from '@app/shared/shared-main/custom-page'
 
 @Component({
-  templateUrl: './home.component.html',
+  templateUrl: './home.component.html'
 })
 
 export class HomeComponent implements OnInit {

diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index f981cd3d3b390bf5194a22a851858b64dc1b9405..c588c425a0c07b7a2cf486ec37e79fc58d941997 100644 (file)
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -2,7 +2,7 @@
 @use '_mixins' as *;
 
 label {
-  @include font-size(1.125rem);
+  @include font-size(18px);
 
   display: block;
   margin-bottom: 5px;
@@ -30,7 +30,7 @@ input[type=email] {
 }
 
 .alert {
-  @include margin(0, auto, 2rem, auto);
+  @include margin(0, auto, 2rem);
 }
 
 .login-form-and-externals {

diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 945d9a13db462380753bcad455c5e8956a1a6f9c..c8b182196f065323991b02b2f52403ccc50dfe3b 100644 (file)
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -264,10 +264,6 @@
     width: min-content;
   }
 
-  .show-more {
-    margin-bottom: 30px;
-  }
-
   .bottom-owner {
     padding: 15px;
     margin-bottom: 30px;

diff --git a/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss b/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
index bb5902ec91413495d7cd33fd2c0d781d91152d75..dfe6f9050c73c0963eb001b7729f6ae537f0ee39 100644 (file)
--- a/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
+++ b/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
@@ -4,5 +4,5 @@
 // Font sizes
 
 .fs-5-5 {
-  @include font-size(1.125rem);
+  @include font-size(18px);
 }

diff --git a/client/src/sass/include/_account-channel-page.scss b/client/src/sass/include/_account-channel-page.scss
index ab6c772c159c1eba0c9d68dbe8dd766647f04076..c47acb7b798624fe0abe6849b69e82834631a87a 100644 (file)
--- a/client/src/sass/include/_account-channel-page.scss
+++ b/client/src/sass/include/_account-channel-page.scss
@@ -16,7 +16,7 @@
 }
 
 @mixin show-more-description {
-  @include rfs(10px auto 45px, margin);
+  @include margin(10px, auto, 45px);
   
   color: pvar(--mainColor);
   cursor: pointer;

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index bd467a0edb4825c03d5cb781e2071844030f2f79..3941cf37481494ba1965f7df8112c8967486c280 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -919,20 +919,25 @@
   }
 }
 
-@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
+@mixin margin ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
+  @if $arg2 ==null and $arg3 ==null and $arg4 ==null {
+    @include margin-original($arg1, $arg1, $arg1, $arg1);
+  } @else if $arg3 ==null and $arg4 ==null {
+    @include margin-original($arg1, $arg2, $arg1, $arg2);
+  } @else if $arg4 ==null {
+    @include margin-original($arg1, $arg2, $arg3, $arg2);
+  } @else {
+    @include margin-original($arg1, $arg2, $arg3, $arg4);
+  }
+}
+
+@mixin margin-original ($block-start, $inline-end, $block-end, $inline-start) {
   @include margin-left($inline-start);
   @include margin-right($inline-end);
   @include margin-top($block-start);
   @include margin-bottom($block-end);
 }
 
-@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
-  @include padding-left($inline-start);
-  @include padding-right($inline-end);
-  @include padding-top($block-start);
-  @include padding-bottom($block-end);
-}
-
 @mixin margin-left ($value) {
   @supports (margin-inline-start: $value) {
     @include rfs($value, margin-inline-start);
@@ -953,6 +958,26 @@
   }
 }
 
+@mixin padding-original ($block-start, $inline-end, $block-end, $inline-start) {
+  @include padding-left($inline-start);
+  @include padding-right($inline-end);
+  @include padding-top($block-start);
+  @include padding-bottom($block-end);
+}
+
+
+@mixin padding ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
+  @if $arg2 ==null and $arg3 ==null and $arg4 ==null {
+    @include padding-original($arg1, $arg1, $arg1, $arg1);
+  } @else if $arg3 ==null and $arg4 ==null {
+    @include padding-original($arg1, $arg2, $arg1, $arg2);
+  } @else if $arg4 ==null {
+    @include padding-original($arg1, $arg2, $arg3, $arg2);
+  } @else {
+    @include padding-original($arg1, $arg2, $arg3, $arg4);
+  }
+}
+
 @mixin padding-left ($value) {
   @supports (padding-inline-start: $value) {
     @include rfs($value, padding-inline-start);

diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 1243854ec1c1be5d0c4681be3652402db9a27ce9..8358270daf0c7dfcba0d3658bf96d7fe002a5f0b 100644 (file)
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -10,9 +10,6 @@ $font-semibold: 600;
 $font-bold: 700;
 $line-height-normal: 1.2;
 
-$font-size-rem-13px: 0.8125rem;
-$font-size-rem-14px: 0.875rem;
-
 $grey-background-color: #E5E5E5;
 $grey-background-hover-color: #EFEFEF;
 $grey-foreground-color: #585858;