aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-07-24 11:26:22 +0200
committerRigel Kent <par@rigelk.eu>2020-07-29 18:15:53 +0200
commit66927c0588b050f23ad3f98d62b48307bc7e79e7 (patch)
tree3c56129289a24a1642265deadfbcfd82a5d259b7 /client
parent4f5d045960b042eb27e10bac1bdaf1c074c9fa2a (diff)
downloadPeerTube-66927c0588b050f23ad3f98d62b48307bc7e79e7.tar.gz
PeerTube-66927c0588b050f23ad3f98d62b48307bc7e79e7.tar.zst
PeerTube-66927c0588b050f23ad3f98d62b48307bc7e79e7.zip
modify user-quota to match account settings style
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.scss2
-rw-r--r--client/src/app/shared/shared-main/users/user-quota.component.html15
-rw-r--r--client/src/app/shared/shared-main/users/user-quota.component.scss13
-rw-r--r--client/src/sass/include/_mixins.scss6
4 files changed, 19 insertions, 17 deletions
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index 59ad7da35..98fc4d027 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -54,7 +54,7 @@ my-global-icon {
54} 54}
55 55
56.progress { 56.progress {
57 @include progressbar; 57 @include progressbar($small: true);
58 width: auto; 58 width: auto;
59 max-width: 100%; 59 max-width: 100%;
60} 60}
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.html b/client/src/app/shared/shared-main/users/user-quota.component.html
index f9fb32133..06981223a 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.html
+++ b/client/src/app/shared/shared-main/users/user-quota.component.html
@@ -1,21 +1,22 @@
1<div class="user-quota mb-3"> 1<div class="user-quota mb-3">
2 <div> 2 <div>
3 <strong class="user-quota-title" tabindex="0" i18n>Total video quota</strong> 3 <label class="user-quota-title" tabindex="0" i18n>Total video quota</label>
4 <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuota()"> 4 <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuota()">
5 <div class="progress-bar" tabindex="0" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }" 5 <div class="progress-bar" tabindex="0" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }"
6 [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuota"> 6 [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuota"></div>
7 {{ userVideoQuotaUsed | bytes: 0 }}</div> 7 <span>{{ userVideoQuotaUsed | bytes: 1 }}</span>
8 <span class="ml-auto mr-2">{{ userVideoQuota }}</span> 8 <span>{{ userVideoQuota }}</span>
9 </div> 9 </div>
10 </div> 10 </div>
11 11
12 <div *ngIf="hasDailyQuota()" class="mt-3"> 12 <div *ngIf="hasDailyQuota()" class="mt-3">
13 <strong class="user-quota-title" tabindex="0" i18n>Daily video quota</strong> 13 <label class="user-quota-title" tabindex="0" i18n>Daily video quota</label>
14 <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuotaDaily()"> 14 <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuotaDaily()">
15 <div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }" 15 <div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }"
16 [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily"> 16 [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily"></div>
17 {{ userVideoQuotaUsedDaily | bytes: 0 }}</div>
18 <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span> 17 <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span>
18 <span>{{ userVideoQuotaUsedDaily | bytes: 1 }}</span>
19 <span>{{ userVideoQuotaDaily }}</span>
19 </div> 20 </div>
20 </div> 21 </div>
21</div> \ No newline at end of file 22</div> \ No newline at end of file
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
index 904add0f4..c670559d3 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.scss
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -1,10 +1,12 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.user-quota { 4label {
5 font-size: 15px; 5 font-weight: $font-regular;
6 margin-top: 20px; 6 font-size: 100%;
7}
7 8
9.user-quota {
8 label { 10 label {
9 margin-right: 5px; 11 margin-right: 5px;
10 } 12 }
@@ -13,12 +15,9 @@
13 width: 100% !important; 15 width: 100% !important;
14 } 16 }
15 17
16 .user-quota-title, .progress { 18 .progress {
17 @include disable-outline; 19 @include disable-outline;
18 @include button-focus(pvar(--mainColorLightest)); 20 @include button-focus(pvar(--mainColorLightest));
19 }
20
21 .progress {
22 @include progressbar; 21 @include progressbar;
23 22
24 height: 2rem; 23 height: 2rem;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 0fb54f121..ee2fe0497 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -683,7 +683,7 @@
683 } 683 }
684} 684}
685 685
686@mixin progressbar { 686@mixin progressbar($small: false) {
687 background-color: $grey-background-color; 687 background-color: $grey-background-color;
688 display: flex; 688 display: flex;
689 height: 1rem; 689 height: 1rem;
@@ -695,7 +695,9 @@
695 span { 695 span {
696 position: absolute; 696 position: absolute;
697 color: $grey-foreground-color; 697 color: $grey-foreground-color;
698 top: -1px; 698 @if $small {
699 top: -1px;
700 }
699 701
700 &:nth-of-type(1) { 702 &:nth-of-type(1) {
701 left: .2rem; 703 left: .2rem;