Skip to content

Commit a42280d

Browse files
DaneEverittDaneEveritt
committed
Begin working on sidebar styling for server view
1 parent 92905a6 commit a42280d

File tree

3 files changed

+83
-35
lines changed

3 files changed

+83
-35
lines changed

‎resources/assets/scripts/components/server/Server.vue‎

Lines changed: 40 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,46 @@
11
<template>
22
<div>
33
<navigation></navigation>
4-
<div class="p-2 flex flex-no-shrink rounded">
4+
<div class="m-6 flex flex-no-shrink rounded">
55
<div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
6-
<div class="pt-6 px-6 pb-4 text-center">
7-
<h3 class="mb-2 text-blue">Pterodactylcraft</h3>
8-
<span class="text-grey-dark">Minecraft / Vanilla</span>
9-
<div class="text-lg my-4"><span class="text-green">●</span> Running</div>
10-
<div>
11-
<button class="btn btn-red">Stop</button>
12-
<button class="btn btn-blue">Restart</button>
13-
<button class="btn btn-red">Kill</button>
6+
<div class="mr-6">
7+
<div class="p-6 text-center bg-white border rounded">
8+
<h3 class="mb-2 text-blue font-medium">Pterodactylcraft</h3>
9+
<span class="text-grey-dark text-sm">Minecraft / Vanilla</span>
10+
</div>
11+
<div class="mt-6 p-4 text-center bg-white border rounded">
12+
<button class="btn btn-red uppercase text-xs px-4 py-2">Stop</button>
13+
<button class="btn btn-secondary uppercase text-xs px-4 py-2">Restart</button>
14+
<button class="btn btn-secondary uppercase text-xs px-4 py-2">Kill</button>
1415
</div>
15-
<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">
16-
<span class="bg-grey-lighter">CPU - 2 Cores</span>
17-
<div class="rounded border-grey-light border mt-3 h-4">
18-
<div class="rounded bg-blue h-4 w-1/6"></div>
19-
</div>
20-
<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">
21-
<span class="bg-grey-lighter">CPU - 2 Cores</span>
22-
<div class="rounded border-grey-light border mt-3 h-4">
23-
<div class="rounded bg-blue h-4 w-1/6"></div>
24-
</div>
25-
</div>
26-
<div class="my-6 text-grey-dark border-t border-grey-light usage">
27-
<span class="bg-grey-lighter">RAM - 4 GB</span>
28-
<div class="rounded border-grey-light border mt-3 h-4">
29-
<div class="rounded bg-blue h-4 w-2/3"></div>
30-
</div>
31-
</div>
32-
<div class="my-6 text-grey-dark border-t border-grey-light usage">
33-
<span class="bg-grey-lighter">Disk - 20 GB</span>
34-
<div class="rounded border-grey-light border mt-3 h-4">
35-
<div class="rounded bg-blue h-4 w-1/3"></div>
36-
</div>
37-
</div>
16+
<div class="mt-6 p-4 bg-white border rounded">
17+
<progress-bar title="Memory" percent="33"></progress-bar>
18+
<progress-bar title="CPU" percent="80" class="mt-4"></progress-bar>
19+
<progress-bar title="Disk" percent="97" class="mt-4"></progress-bar>
3820
</div>
3921
</div>
22+
<div class="pt-6 px-6 pb-4 text-center">
23+
<!--<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">-->
24+
<!--<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">-->
25+
<!--<span class="bg-grey-lighter">CPU - 2 Cores</span>-->
26+
<!--<div class="rounded border-grey-light border mt-3 h-4">-->
27+
<!--<div class="rounded bg-blue h-4 w-1/6"></div>-->
28+
<!--</div>-->
29+
<!--</div>-->
30+
<!--<div class="my-6 text-grey-dark border-t border-grey-light usage">-->
31+
<!--<span class="bg-grey-lighter">RAM - 4 GB</span>-->
32+
<!--<div class="rounded border-grey-light border mt-3 h-4">-->
33+
<!--<div class="rounded bg-blue h-4 w-2/3"></div>-->
34+
<!--</div>-->
35+
<!--</div>-->
36+
<!--<div class="my-6 text-grey-dark border-t border-grey-light usage">-->
37+
<!--<span class="bg-grey-lighter">Disk - 20 GB</span>-->
38+
<!--<div class="rounded border-grey-light border mt-3 h-4">-->
39+
<!--<div class="rounded bg-blue h-4 w-1/3"></div>-->
40+
<!--</div>-->
41+
<!--</div>-->
42+
<!--</div>-->
43+
</div>
4044
<div class="sidenav">
4145
<router-link :to="{ name: 'server', params: { serverID: this.$route.params.serverID } }">
4246
<terminal-icon style="height: 1em;"></terminal-icon>
@@ -77,13 +81,15 @@
7781
</template>
7882

7983
<script>
80-
import { TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
84+
import { TerminalIcon, OctagonIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
8185
import ServerConsole from "./ServerConsole";
8286
import Navigation from '../core/Navigation';
87+
import ProgressBar from './components/ProgressBar';
8388
8489
export default {
8590
components: {
86-
Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
91+
ProgressBar,
92+
OctagonIcon, Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
8793
CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon
8894
}
8995
}

‎resources/assets/scripts/components/server/ServerConsole.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,6 @@
3939

4040
<script>
4141
export default {
42-
name: "ServerConsole"
42+
name: "ServerConsole",
4343
}
4444
</script>

‎resources/assets/scripts/components/server/components/ProgressBar.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<div>
3+
<div class="text-right mb-1" v-if="title.length > 0">
4+
<span class="text-grey-dark text-xs uppercase">{{ title }}</span>
5+
</div>
6+
<div class="w-full border rounded h-4" :class="borderColor">
7+
<div class="h-full w-1/3 text-center" :style="{ width: percent + '%' }" :class="backgroundColor">
8+
<span class="mt-1 text-xs text-white leading-none">{{ percent }} %</span>
9+
</div>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script>
15+
export default {
16+
name: 'progress-bar',
17+
props: {
18+
percent: {type: String, default: '0'},
19+
title: {type: String}
20+
},
21+
computed: {
22+
backgroundColor: function () {
23+
if (this.percent < 70) {
24+
return "bg-green-dark";
25+
} else if (this.percent >= 70 && this.percent < 90) {
26+
return "bg-yellow-dark";
27+
} else {
28+
return "bg-red-dark";
29+
}
30+
},
31+
borderColor: function () {
32+
if (this.percent < 70) {
33+
return "border-green-dark";
34+
} else if (this.percent >= 70 && this.percent < 90) {
35+
return "border-yellow-dark";
36+
} else {
37+
return "border-red-dark";
38+
}
39+
}
40+
}
41+
};
42+
</script>

0 commit comments

Comments
 (0)