<div class="user-quota mb-3">
<div>
- <label i18n>Total video quota:</label>
- <ng-container i18n>{{ userVideoQuotaUsed | bytes: 0 }} used</ng-container> / {{ userVideoQuota }}
+ <div class="progress" i18n-title title="Total video quota">
+ <div class="progress-bar" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }" [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="userVideoQuota">{{ userVideoQuotaUsed | bytes: 0 }}</div>
+ <span class="ml-auto mr-2">{{ userVideoQuota }}</span>
+ </div>
</div>
- <div *ngIf="hasDailyQuota()">
- <label i18n>Daily video quota:</label>
- <ng-container>{{ userVideoQuotaUsedDaily | bytes: 0 }} used</ng-container> / {{ userVideoQuotaDaily }}
+ <div *ngIf="hasDailyQuota()" class="mt-3">
+ <div class="progress" i18n-title title="Daily video quota">
+ <div class="progress-bar progress-bar-secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }" [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="userVideoQuotaDaily">{{ userVideoQuotaUsedDaily | bytes: 0 }}</div>
+ <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span>
+ </div>
</div>
</div>