nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 19:10:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

upload/download storage chart

Browse Source
This commit is contained in:
Čarodej
2021-11-30 10:53:09 +01:00
parent 69e167a337
commit 751ebcb7eb
4 changed files with 117 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/App.vue
+1 -1
View File
@@ -131,7 +131,7 @@ export default {
@import '/resources/sass/vuefilemanager/_mixins';
.card {
@apply dark:bg-dark-foreground bg-white lg:p-6 p-4 rounded-xl lg:mb-6 mb-4
@apply dark:bg-dark-foreground bg-white lg:p-6 p-5 rounded-xl lg:mb-6 mb-4
}
.input-dark {
resources/js/components/Admin/ProgressLine.vue
+2 -2
View File
@@ -11,7 +11,7 @@
'border-r-2 dark:border-gray-800 border-white rounded-tl-lg rounded-bl-lg': chart.progress < 100,
'border-none rounded-lg': chart.progress >= 100
}, chart.color]"
class="chart-progress w-full h-2 block"
class="chart-progress w-full h-2.5 block"
>
</span>
@@ -24,7 +24,7 @@
'border-r-2 dark:border-gray-800 border-white': i < (data.length - 1),
'rounded-tr-lg rounded-br-lg': i === (data.length - 1),
}, chart.color]"
class="chart-progress w-full h-2 block"
class="chart-progress w-full h-2.5 block"
></span>
</div>
</div>
resources/js/views/User/Storage.vue
+43 -44
View File
@@ -1,15 +1,52 @@
<template>
<PageTab>
<div class="card shadow-card">
<div v-if="distribution" class="card shadow-card">
<FormLabel icon="hard-drive">
{{ $t('Storage Usage') }}
</FormLabel>
<div v-if="distribution">
<b class="mb-3 block text-sm text-gray-400">
{{ $t('Total') }} {{ storage.data.attributes.used }} {{ $t('of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
</b>
<ProgressLine :data="distribution" />
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
{{ storage.data.attributes.used }}
</b>
<b class="mb-3 block text-sm text-gray-400 mb-5">
{{ $t('Total of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
</b>
<ProgressLine :data="distribution" />
</div>
<div v-if="distribution" class="card shadow-card">
<FormLabel icon="hard-drive">
{{ $t('Upload') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
154.98MB
</b>
<b class="mb-3 block text-sm text-gray-400 mb-5">
{{ $t('In last 30 days') }}
</b>
<div class="flex items-end justify-between h-28">
<span class="w-2.5 block rounded-lg lg:mr-2 mr-1.5" :style="{height: Math.random() * 100 + '%', backgroundColor: '#9d66fe'}" v-for="(item, i) in Array(45).fill(0)" :key="i"></span>
</div>
</div>
<div v-if="distribution" class="card shadow-card">
<FormLabel icon="hard-drive">
{{ $t('Download') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
927.12MB
</b>
<b class="mb-3 block text-sm text-gray-400 mb-5">
{{ $t('In last 30 days') }}
</b>
<div class="flex items-end justify-between h-28">
<span class="w-2.5 bg-theme block rounded-lg lg:mr-2 mr-1.5" :style="{height: Math.random() * 100 + '%', backgroundColor: '#ffb822'}" v-for="(item, i) in Array(45).fill(0)" :key="i"></span>
</div>
</div>
</PageTab>
@@ -49,41 +86,3 @@
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
#single-page {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
.content-page {
overflow-y: auto;
height: 100%;
padding-bottom: 100px;
max-width: 700px;
width: 100%;
margin: 0 auto;
}
}
@media only screen and (max-width: 960px) {
#single-page {
.content-page {
padding-left: 15px;
padding-right: 15px;
}
}
}
.dark {
}
</style>