sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Begin working on sidebar styling for server view

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>
<div>
<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="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">
<h3 class="mb-2 text-blue">Pterodactylcraft</h3>
<span class="text-grey-dark">Minecraft / Vanilla</span>
<div class="text-lg my-4"><span class="text-green">●</span> Running</div>
<div>
<button class="btn btn-red">Stop</button>
<button class="btn btn-blue">Restart</button>
<button class="btn btn-red">Kill</button>
</div>
<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">
<span class="bg-grey-lighter">CPU - 2 Cores</span>
<div class="rounded border-grey-light border mt-3 h-4">
<div class="rounded bg-blue h-4 w-1/6"></div>
</div>
<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">
<span class="bg-grey-lighter">CPU - 2 Cores</span>
<div class="rounded border-grey-light border mt-3 h-4">
<div class="rounded bg-blue h-4 w-1/6"></div>
</div>
</div>
<div class="my-6 text-grey-dark border-t border-grey-light usage">
<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 class="mt-8 mb-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">CPU - 2 Cores</span>-->
<!--<div class="rounded border-grey-light border mt-3 h-4">-->
<!--<div class="rounded bg-blue h-4 w-1/6"></div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="my-6 text-grey-dark border-t border-grey-light usage">-->
<!--<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 class="sidenav">
<router-link :to="{ name: 'server', params: { serverID: this.$route.params.serverID } }">
@ -77,13 +81,15 @@
</template>
<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 Navigation from '../core/Navigation';
import ProgressBar from './components/ProgressBar';
export default {
components: {
Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
ProgressBar,
OctagonIcon, Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon
}
}

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

@ -39,6 +39,6 @@
<script>
export default {
name: "ServerConsole"
name: "ServerConsole",
}
</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>