fix(front): upload quota

front/src/utils/filters.ts

@@ -24,7 +24,7 @@ export function humanSize (bytes: number, isSI = true) {
   const threshold = isSI ? 1000 : 1024
 
   if (Math.abs(bytes) < threshold) {
-    return `${bytes} B`
+    return `${Math.floor(bytes)}`
   }
 
   const units = HUMAN_UNITS[isSI ? 'SI' : 'powerOf2']

front/src/views/content/libraries/Home.vue

@@ -59,25 +59,8 @@ const libraryCreated = (library: Library) => {
     :h1="t('views.content.libraries.Home.header.libraries')"
     page-header
   >
-    <Alert
-      v-if="libraries.length == 0"
-      yellow
-    >
-      {{ t('views.content.libraries.Home.empty.noLibrary') }}
-      <Button
-        :aria-expanded="!hiddenForm"
-        :icon="hiddenForm ? 'bi-plus' : 'bi-minus'"
-        @click.prevent="hiddenForm = !hiddenForm"
-      >
-        {{ t('views.content.libraries.Home.link.createLibrary') }}
-      </Button>
-    </Alert>
-    <library-form
-      v-if="!hiddenForm"
-      @created="libraryCreated"
-    />
-  </Section>
   <quota />
+</Section>
   <Spacer />
   <Section
     v-if="libraries.length > 0"

front/src/views/content/libraries/Quota.vue

@@ -62,29 +62,22 @@ const purgeErroredFiles = () => purge('errored')
 </script>
 
 <template>
-  <Section
+  <Loader v-if="isLoading" />
-    :h3="t('views.content.libraries.Quota.header.currentUsage')"
-  >
-    <div
-      v-if="isLoading"
-      :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
-    >
-      <div class="ui text loader">
-        {{ t('views.content.libraries.Quota.loading.currentUsage') }}
-      </div>
-    </div>
   <Alert
     data-percent="progress"
     :green="progress < 60"
     :yellow="progress >= 60 && progress < 96"
     :red="progress >= 95"
+    style="width: 100%;"
   >
+    <h3>{{ t('views.content.libraries.Quota.header.currentUsage') }}</h3>
+    <div :class="['ui', {'success': progress < 60}, {'warning': progress >= 60 && progress < 96}, {'error': progress >= 95}, 'progress']">
       <div
         class="bar"
         :style="{width: `${progress}%`}"
       >
         <div class="progress">
-          {{ t('views.content.libraries.Quota.label.percentUsed', {progress: progress}) }}
+          {{ t('views.content.libraries.Quota.label.percentUsed', {progress: humanSize(progress)}) }}
         </div>
       </div>
       <div
@@ -93,6 +86,7 @@ const purgeErroredFiles = () => purge('errored')
       >
         {{ t('views.content.libraries.Quota.label.currentUsage', {max: humanSize(quotaStatus.max * 1000 * 1000), currentAmount: humanSize(quotaStatus.current * 1000 * 1000)}) }}
       </div>
+    </div>
   </Alert>
   <Layout
     v-if="quotaStatus"
@@ -211,5 +205,92 @@ const purgeErroredFiles = () => purge('errored')
       </Layout>
     </Alert>
   </Layout>
-  </Section>
 </template>
+
+<style lang="scss" scoped>
+.ui.progress {
+    position: relative;
+    display: -webkit-box;
+    display: flex;
+    width: 100%;
+    height: 20px;
+    border: none;
+    margin: 1em 0 2.5em;
+    box-shadow: none;
+    background: rgba(0,0,0,.1);
+    padding: 0;
+    border-radius: .28571429rem
+}
+
+.ui.progress .bar {
+    display: block;
+    line-height: 1;
+    position: relative;
+    width: 0;
+    min-width: 2em;
+    background: #888;
+    border-radius: .28571429rem;
+    -webkit-transition: width .1s ease,background-color .1s ease;
+    transition: width .1s ease,background-color .1s ease;
+    overflow: hidden
+}
+
+.ui.progress .bar>.progress {
+    white-space: nowrap;
+    position: absolute;
+    width: auto;
+    font-size: .92857143em;
+    top: 50%;
+    right: .5em;
+    left: auto;
+    bottom: auto;
+    color: var(--background-color);
+    text-shadow: none;
+    margin-top: -.5em;
+    font-weight: 700;
+    text-align: left
+}
+
+.ui.progress>.label {
+    position: absolute;
+    width: 100%;
+    font-size: 1em;
+    top: 100%;
+    right: auto;
+    left: 0;
+    bottom: auto;
+    font-weight: 700;
+    text-shadow: none;
+    margin-top: .2em;
+    text-align: center;
+    -webkit-transition: color .4s ease;
+    transition: color .4s ease
+}
+
+.ui.progress.success .bar {
+    background-color: var(--success-color)
+}
+
+.ui.progress.success .bar,.ui.progress.success .bar:after {
+    -webkit-animation: none;
+    animation: none
+}
+
+.ui.progress.warning .bar {
+    background-color: var(--warning-color)
+}
+
+.ui.progress.warning .bar,.ui.progress.warning .bar:after {
+    -webkit-animation: none;
+    animation: none
+}
+
+.ui.progress.error .bar {
+    background-color: var(--danger-color)
+}
+
+.ui.progress.error .bar,.ui.progress.error .bar:after {
+    -webkit-animation: none;
+    animation: none
+}
+</style>