modify user-quota to match account settings style

Chocobozzz · Jul 24, 2020 · 60979b7 · 60979b7
1 parent f9b94d0
commit 60979b7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 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
@@ -54,7 +54,7 @@ my-global-icon {
 }
 
 .progress {
-  @include progressbar;
+  @include progressbar($small: true);
   width: auto;
   max-width: 100%;
 }

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
@@ -1,21 +1,22 @@
 <div class="user-quota mb-3">
   <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-bar" tabindex="0" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }"
-        [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuota">
-        {{ userVideoQuotaUsed | bytes: 0 }}</div>
-      <span class="ml-auto mr-2">{{ userVideoQuota }}</span>
+        [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuota"></div>
+      <span>{{ userVideoQuotaUsed | bytes: 1 }}</span>
+      <span>{{ userVideoQuota }}</span>
     </div>
   </div>
 
   <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-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }"
-        [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily">
-        {{ userVideoQuotaUsedDaily | bytes: 0 }}</div>
+        [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily"></div>
       <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span>
+      <span>{{ userVideoQuotaUsedDaily | bytes: 1 }}</span>
+      <span>{{ userVideoQuotaDaily }}</span>
     </div>
   </div>
 </div>
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
@@ -1,10 +1,12 @@
 @import '_variables';
 @import '_mixins';
 
-.user-quota {
-  font-size: 15px;
-  margin-top: 20px;
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
 
+.user-quota {
   label {
     margin-right: 5px;
   }
@@ -13,12 +15,9 @@
     width: 100% !important;
   }
 
-  .user-quota-title, .progress {
+  .progress {
     @include disable-outline;
     @include button-focus(pvar(--mainColorLightest));
-  }
-
-  .progress {
     @include progressbar;
 
     height: 2rem;

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
@@ -683,7 +683,7 @@
   }
 }
 
-@mixin progressbar {
+@mixin progressbar($small: false) {
   background-color: $grey-background-color;
   display: flex;
   height: 1rem;
@@ -695,7 +695,9 @@
   span {
     position: absolute;
     color: $grey-foreground-color;
-    top: -1px;
+    @if $small {
+      top: -1px;
+    }
 
     &:nth-of-type(1) {
       left: .2rem;