aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorWicklow <wicklow@framasoft.org>2023-02-20 11:32:48 +0100
committerChocobozzz <chocobozzz@cpy.re>2023-02-20 13:52:22 +0100
commit4158e67c8d7eb39712e598d3f409c6739eef5f0b (patch)
treed80a3b09af7bb83ce4eb2783dad449a9bfe87bd2 /client
parent6c3589fc51fdf218912538b2a46399886ed36ac3 (diff)
downloadPeerTube-4158e67c8d7eb39712e598d3f409c6739eef5f0b.tar.gz
PeerTube-4158e67c8d7eb39712e598d3f409c6739eef5f0b.tar.zst
PeerTube-4158e67c8d7eb39712e598d3f409c6739eef5f0b.zip
Refactoring margin and padding mixins
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+about/about-follows/about-follows.component.html4
-rw-r--r--client/src/app/+about/about-peertube/about-peertube.component.scss2
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.scss8
-rw-r--r--client/src/app/+accounts/accounts.component.html2
-rw-r--r--client/src/app/+accounts/accounts.component.scss4
-rw-r--r--client/src/app/+home/home.component.ts2
-rw-r--r--client/src/app/+login/login.component.scss4
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss4
-rw-r--r--client/src/sass/class-helpers/_custom-bootstrap-helpers.scss2
-rw-r--r--client/src/sass/include/_account-channel-page.scss2
-rw-r--r--client/src/sass/include/_mixins.scss41
-rw-r--r--client/src/sass/include/_variables.scss3
12 files changed, 46 insertions, 32 deletions
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 84626809d..fd4109416 100644
--- 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 @@
2 <h1 class="visually-hidden" i18n>Follows</h1> 2 <h1 class="visually-hidden" i18n>Follows</h1>
3 3
4 <div class="col-xl-6 col-md-12"> 4 <div class="col-xl-6 col-md-12">
5 <h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2> 5 <h2 i18n class="fs-5-5 mb-4 fw-semibold">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2>
6 6
7 <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">{{ instanceName }} does not have followers.</div> 7 <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">{{ instanceName }} does not have followers.</div>
8 8
@@ -14,7 +14,7 @@
14 </div> 14 </div>
15 15
16 <div class="col-xl-6 col-md-12"> 16 <div class="col-xl-6 col-md-12">
17 <h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2> 17 <h2 i18n class="fs-5-5 mb-4 fw-semibold">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2>
18 18
19 <div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">{{ instanceName }} does not have subscriptions.</div> 19 <div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">{{ instanceName }} does not have subscriptions.</div>
20 20
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 001405dc7..a81bb8cfc 100644
--- 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 @@
7} 7}
8 8
9.card { 9.card {
10 @include rfs(2rem, margin); 10 @include margin(2rem);
11 11
12 flex-basis: 300px; 12 flex-basis: 300px;
13} 13}
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 2e34ed71c..b5aacffc8 100644
--- 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 @@
8} 8}
9 9
10.channel { 10.channel {
11 @include rfs(2rem, padding); 11 @include padding(1.75rem);
12 @include rfs(2rem 0, margin); 12 @include margin(2rem, 0);
13 13
14 max-width: $max-channels-width; 14 max-width: $max-channels-width;
15 background-color: pvar(--channelBackgroundColor); 15 background-color: pvar(--channelBackgroundColor);
@@ -110,10 +110,6 @@ my-subscribe-button {
110} 110}
111 111
112@include on-small-main-col { 112@include on-small-main-col {
113 .channel {
114 padding: 15px;
115 }
116
117 .channel-avatar-row { 113 .channel-avatar-row {
118 grid-template-columns: auto auto auto 1fr; 114 grid-template-columns: auto auto auto 1fr;
119 115
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 116b26a4d..2a4985964 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -13,7 +13,7 @@
13 <h1 i18n-title [title]="'Created on ' + (account.createdAt | date)">{{ account.displayName }}</h1> 13 <h1 i18n-title [title]="'Created on ' + (account.createdAt | date)">{{ account.displayName }}</h1>
14 14
15 <my-user-moderation-dropdown 15 <my-user-moderation-dropdown
16 class="mx-3" prependActions]="prependModerationActions" 16 class="mx-3" [prependActions]="prependModerationActions"
17 buttonSize="small" [account]="account" [user]="accountUser" placement="bottom-left auto" 17 buttonSize="small" [account]="account" [user]="accountUser" placement="bottom-left auto"
18 (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()" 18 (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
19 ></my-user-moderation-dropdown> 19 ></my-user-moderation-dropdown>
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 908e4eeda..56b952b65 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -109,8 +109,8 @@
109 109
110@media screen and (max-width: $mobile-view) { 110@media screen and (max-width: $mobile-view) {
111 .root { 111 .root {
112 --myFontSize: $font-size-rem-14px; 112 --myFontSize: 14px;
113 --myGreyFontSize: $font-size-rem-13px; 113 --myGreyFontSize: 13px;
114 } 114 }
115 115
116 .links { 116 .links {
diff --git a/client/src/app/+home/home.component.ts b/client/src/app/+home/home.component.ts
index 8da4a2008..e59cde989 100644
--- 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'
2import { CustomPageService } from '@app/shared/shared-main/custom-page' 2import { CustomPageService } from '@app/shared/shared-main/custom-page'
3 3
4@Component({ 4@Component({
5 templateUrl: './home.component.html', 5 templateUrl: './home.component.html'
6}) 6})
7 7
8export class HomeComponent implements OnInit { 8export class HomeComponent implements OnInit {
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index f981cd3d3..c588c425a 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -2,7 +2,7 @@
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4label { 4label {
5 @include font-size(1.125rem); 5 @include font-size(18px);
6 6
7 display: block; 7 display: block;
8 margin-bottom: 5px; 8 margin-bottom: 5px;
@@ -30,7 +30,7 @@ input[type=email] {
30} 30}
31 31
32.alert { 32.alert {
33 @include margin(0, auto, 2rem, auto); 33 @include margin(0, auto, 2rem);
34} 34}
35 35
36.login-form-and-externals { 36.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 945d9a13d..c8b182196 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -264,10 +264,6 @@
264 width: min-content; 264 width: min-content;
265 } 265 }
266 266
267 .show-more {
268 margin-bottom: 30px;
269 }
270
271 .bottom-owner { 267 .bottom-owner {
272 padding: 15px; 268 padding: 15px;
273 margin-bottom: 30px; 269 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 bb5902ec9..dfe6f9050 100644
--- a/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
+++ b/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
@@ -4,5 +4,5 @@
4// Font sizes 4// Font sizes
5 5
6.fs-5-5 { 6.fs-5-5 {
7 @include font-size(1.125rem); 7 @include font-size(18px);
8} 8}
diff --git a/client/src/sass/include/_account-channel-page.scss b/client/src/sass/include/_account-channel-page.scss
index ab6c772c1..c47acb7b7 100644
--- a/client/src/sass/include/_account-channel-page.scss
+++ b/client/src/sass/include/_account-channel-page.scss
@@ -16,7 +16,7 @@
16} 16}
17 17
18@mixin show-more-description { 18@mixin show-more-description {
19 @include rfs(10px auto 45px, margin); 19 @include margin(10px, auto, 45px);
20 20
21 color: pvar(--mainColor); 21 color: pvar(--mainColor);
22 cursor: pointer; 22 cursor: pointer;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index bd467a0ed..3941cf374 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -919,20 +919,25 @@
919 } 919 }
920} 920}
921 921
922@mixin margin ($block-start, $inline-end, $block-end, $inline-start) { 922@mixin margin ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
923 @if $arg2 ==null and $arg3 ==null and $arg4 ==null {
924 @include margin-original($arg1, $arg1, $arg1, $arg1);
925 } @else if $arg3 ==null and $arg4 ==null {
926 @include margin-original($arg1, $arg2, $arg1, $arg2);
927 } @else if $arg4 ==null {
928 @include margin-original($arg1, $arg2, $arg3, $arg2);
929 } @else {
930 @include margin-original($arg1, $arg2, $arg3, $arg4);
931 }
932}
933
934@mixin margin-original ($block-start, $inline-end, $block-end, $inline-start) {
923 @include margin-left($inline-start); 935 @include margin-left($inline-start);
924 @include margin-right($inline-end); 936 @include margin-right($inline-end);
925 @include margin-top($block-start); 937 @include margin-top($block-start);
926 @include margin-bottom($block-end); 938 @include margin-bottom($block-end);
927} 939}
928 940
929@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
930 @include padding-left($inline-start);
931 @include padding-right($inline-end);
932 @include padding-top($block-start);
933 @include padding-bottom($block-end);
934}
935
936@mixin margin-left ($value) { 941@mixin margin-left ($value) {
937 @supports (margin-inline-start: $value) { 942 @supports (margin-inline-start: $value) {
938 @include rfs($value, margin-inline-start); 943 @include rfs($value, margin-inline-start);
@@ -953,6 +958,26 @@
953 } 958 }
954} 959}
955 960
961@mixin padding-original ($block-start, $inline-end, $block-end, $inline-start) {
962 @include padding-left($inline-start);
963 @include padding-right($inline-end);
964 @include padding-top($block-start);
965 @include padding-bottom($block-end);
966}
967
968
969@mixin padding ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
970 @if $arg2 ==null and $arg3 ==null and $arg4 ==null {
971 @include padding-original($arg1, $arg1, $arg1, $arg1);
972 } @else if $arg3 ==null and $arg4 ==null {
973 @include padding-original($arg1, $arg2, $arg1, $arg2);
974 } @else if $arg4 ==null {
975 @include padding-original($arg1, $arg2, $arg3, $arg2);
976 } @else {
977 @include padding-original($arg1, $arg2, $arg3, $arg4);
978 }
979}
980
956@mixin padding-left ($value) { 981@mixin padding-left ($value) {
957 @supports (padding-inline-start: $value) { 982 @supports (padding-inline-start: $value) {
958 @include rfs($value, padding-inline-start); 983 @include rfs($value, padding-inline-start);
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 1243854ec..8358270da 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -10,9 +10,6 @@ $font-semibold: 600;
10$font-bold: 700; 10$font-bold: 700;
11$line-height-normal: 1.2; 11$line-height-normal: 1.2;
12 12
13$font-size-rem-13px: 0.8125rem;
14$font-size-rem-14px: 0.875rem;
15
16$grey-background-color: #E5E5E5; 13$grey-background-color: #E5E5E5;
17$grey-background-hover-color: #EFEFEF; 14$grey-background-hover-color: #EFEFEF;
18$grey-foreground-color: #585858; 15$grey-foreground-color: #585858;