Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

76
resources/assets/scripts/components/server/Server.vue
View file

@ -1,41 +1,45 @@
<template> <template>
<div> <div>
<navigation></navigation> <navigation></navigation>
<div class="p-2 flex flex-no-shrink rounded"> <div class="m-6 flex flex-no-shrink rounded">
<div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs"> <div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
<div class="mr-6">
<div class="p-6 text-center bg-white border rounded">
<h3 class="mb-2 text-blue font-medium">Pterodactylcraft</h3>
<span class="text-grey-dark text-sm">Minecraft / Vanilla</span>
</div>
<div class="mt-6 p-4 text-center bg-white border rounded">
<button class="btn btn-red uppercase text-xs px-4 py-2">Stop</button>
<button class="btn btn-secondary uppercase text-xs px-4 py-2">Restart</button>
<button class="btn btn-secondary uppercase text-xs px-4 py-2">Kill</button>
</div>
<div class="mt-6 p-4 bg-white border rounded">
<progress-bar title="Memory" percent="33"></progress-bar>
<progress-bar title="CPU" percent="80" class="mt-4"></progress-bar>
<progress-bar title="Disk" percent="97" class="mt-4"></progress-bar>
</div>
</div>
<div class="pt-6 px-6 pb-4 text-center"> <div class="pt-6 px-6 pb-4 text-center">
<h3 class="mb-2 text-blue">Pterodactylcraft</h3> <!--<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">-->
<span class="text-grey-dark">Minecraft / Vanilla</span> <!--<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">-->
<div class="text-lg my-4"><span class="text-green">●</span> Running</div> <!--<span class="bg-grey-lighter">CPU - 2 Cores</span>-->
<div> <!--<div class="rounded border-grey-light border mt-3 h-4">-->
<button class="btn btn-red">Stop</button> <!--<div class="rounded bg-blue h-4 w-1/6"></div>-->
<button class="btn btn-blue">Restart</button> <!--</div>-->
<button class="btn btn-red">Kill</button> <!--</div>-->
</div> <!--<div class="my-6 text-grey-dark border-t border-grey-light usage">-->
<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage"> <!--<span class="bg-grey-lighter">RAM - 4 GB</span>-->
<span class="bg-grey-lighter">CPU - 2 Cores</span> <!--<div class="rounded border-grey-light border mt-3 h-4">-->
<div class="rounded border-grey-light border mt-3 h-4"> <!--<div class="rounded bg-blue h-4 w-2/3"></div>-->
<div class="rounded bg-blue h-4 w-1/6"></div> <!--</div>-->
</div> <!--</div>-->
<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage"> <!--<div class="my-6 text-grey-dark border-t border-grey-light usage">-->
<span class="bg-grey-lighter">CPU - 2 Cores</span> <!--<span class="bg-grey-lighter">Disk - 20 GB</span>-->
<div class="rounded border-grey-light border mt-3 h-4"> <!--<div class="rounded border-grey-light border mt-3 h-4">-->
<div class="rounded bg-blue h-4 w-1/6"></div> <!--<div class="rounded bg-blue h-4 w-1/3"></div>-->
</div> <!--</div>-->
</div> <!--</div>-->
<div class="my-6 text-grey-dark border-t border-grey-light usage"> <!--</div>-->
<span class="bg-grey-lighter">RAM - 4 GB</span>
<div class="rounded border-grey-light border mt-3 h-4">
<div class="rounded bg-blue h-4 w-2/3"></div>
</div>
</div>
<div class="my-6 text-grey-dark border-t border-grey-light usage">
<span class="bg-grey-lighter">Disk - 20 GB</span>
<div class="rounded border-grey-light border mt-3 h-4">
<div class="rounded bg-blue h-4 w-1/3"></div>
</div>
</div>
</div>
</div> </div>
<div class="sidenav"> <div class="sidenav">
<router-link :to="{ name: 'server', params: { serverID: this.$route.params.serverID } }"> <router-link :to="{ name: 'server', params: { serverID: this.$route.params.serverID } }">
@ -77,13 +81,15 @@
</template> </template>
<script> <script>
import { TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons' import { TerminalIcon, OctagonIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
import ServerConsole from "./ServerConsole"; import ServerConsole from "./ServerConsole";
import Navigation from '../core/Navigation'; import Navigation from '../core/Navigation';
import ProgressBar from './components/ProgressBar';
export default { export default {
components: { components: {
Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon, ProgressBar,
OctagonIcon, Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon
} }
} }

2
resources/assets/scripts/components/server/ServerConsole.vue
View file

@ -39,6 +39,6 @@
<script> <script>
export default { export default {
name: "ServerConsole" name: "ServerConsole",
} }
</script> </script>

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>