StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Begin working on sidebar styling for server view

Browse source
This commit is contained in:
Dane Everitt 2018-07-15 19:47:31 -07:00
parent 92905a6c2a
commit a42280dd84
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 84 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

42
resources/assets/scripts/components/server/components/ProgressBar.vue Normal file
View file

@ -0,0 +1,42 @@
<template>
<div>
<div class="text-right mb-1" v-if="title.length > 0">
<span class="text-grey-dark text-xs uppercase">{{ title }}</span>
</div>
<div class="w-full border rounded h-4" :class="borderColor">
<div class="h-full w-1/3 text-center" :style="{ width: percent + '%' }" :class="backgroundColor">
<span class="mt-1 text-xs text-white leading-none">{{ percent }} %</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'progress-bar',
props: {
percent: {type: String, default: '0'},
title: {type: String}
},
computed: {
backgroundColor: function () {
if (this.percent < 70) {
return "bg-green-dark";
} else if (this.percent >= 70 && this.percent < 90) {
return "bg-yellow-dark";
} else {
return "bg-red-dark";
}
},
borderColor: function () {
if (this.percent < 70) {
return "border-green-dark";
} else if (this.percent >= 70 && this.percent < 90) {
return "border-yellow-dark";
} else {
return "border-red-dark";
}
}
}
};
</script>