forks
/
peertube
1
0
Fork 0
Code Releases Activity

modify user-quota to match account settings style

This commit is contained in:
Rigel Kent 2020-07-24 11:26:22 +02:00 committed by Rigel Kent
parent 4f5d045960
commit 66927c0588
4 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/+admin/users/user-list/user-list.component.scss
View File

@ -54,7 +54,7 @@ my-global-icon {
} }
.progress { .progress {
@include progressbar; @include progressbar($small: true);
width: auto; width: auto;
max-width: 100%; max-width: 100%;
} }

15
client/src/app/shared/shared-main/users/user-quota.component.html
View File

@ -1,21 +1,22 @@
<div class="user-quota mb-3"> <div class="user-quota mb-3">
<div> <div>
<strong class="user-quota-title" tabindex="0" i18n>Total video quota</strong> <label class="user-quota-title" tabindex="0" i18n>Total video quota</label>
<div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuota()"> <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuota()">
<div class="progress-bar" tabindex="0" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }" <div class="progress-bar" tabindex="0" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }"
[attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuota"> [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuota"></div>
{{ userVideoQuotaUsed | bytes: 0 }}</div> <span>{{ userVideoQuotaUsed | bytes: 1 }}</span>
<span class="ml-auto mr-2">{{ userVideoQuota }}</span> <span>{{ userVideoQuota }}</span>
</div> </div>
</div> </div>
<div *ngIf="hasDailyQuota()" class="mt-3"> <div *ngIf="hasDailyQuota()" class="mt-3">
<strong class="user-quota-title" tabindex="0" i18n>Daily video quota</strong> <label class="user-quota-title" tabindex="0" i18n>Daily video quota</label>
<div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuotaDaily()"> <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuotaDaily()">
<div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }" <div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }"
[attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily"> [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily"></div>
{{ userVideoQuotaUsedDaily | bytes: 0 }}</div>
<span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span> <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span>
<span>{{ userVideoQuotaUsedDaily | bytes: 1 }}</span>
<span>{{ userVideoQuotaDaily }}</span>
</div> </div>
</div> </div>
</div> </div>

13
client/src/app/shared/shared-main/users/user-quota.component.scss
View File

@ -1,10 +1,12 @@
@import '_variables'; @import '_variables';
@import '_mixins'; @import '_mixins';
.user-quota { label {
font-size: 15px; font-weight: $font-regular;
margin-top: 20px; font-size: 100%;
}
.user-quota {
label { label {
margin-right: 5px; margin-right: 5px;
} }
@ -13,12 +15,9 @@
width: 100% !important; width: 100% !important;
} }
.user-quota-title, .progress { .progress {
@include disable-outline; @include disable-outline;
@include button-focus(pvar(--mainColorLightest)); @include button-focus(pvar(--mainColorLightest));
}
.progress {
@include progressbar; @include progressbar;
height: 2rem; height: 2rem;

6
client/src/sass/include/_mixins.scss
View File

@ -683,7 +683,7 @@
} }
} }
@mixin progressbar { @mixin progressbar($small: false) {
background-color: $grey-background-color; background-color: $grey-background-color;
display: flex; display: flex;
height: 1rem; height: 1rem;
@ -695,7 +695,9 @@
span { span {
position: absolute; position: absolute;
color: $grey-foreground-color; color: $grey-foreground-color;
top: -1px; @if $small {
top: -1px;
}
&:nth-of-type(1) { &:nth-of-type(1) {
left: .2rem; left: .2rem;