|
1 | 1 | <template> |
2 | 2 | <div> |
3 | 3 | <navigation></navigation> |
4 | | - <div class="container mx-auto p-2 flex flex-no-shrink rounded"> |
5 | | - <div class="sidebar border-grey-lighter flex-no-shrink w-1/4"> |
| 4 | + <div class="p-2 flex flex-no-shrink rounded"> |
| 5 | + <div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs"> |
6 | 6 | <div class="pt-6 px-6 pb-4 text-center"> |
7 | 7 | <h3 class="mb-2 text-blue">Pterodactylcraft</h3> |
8 | 8 | <span class="text-grey-dark">Minecraft / Vanilla</span> |
|
12 | 12 | <button class="btn btn-blue">Restart</button> |
13 | 13 | <button class="btn btn-red">Kill</button> |
14 | 14 | </div> |
15 | | - <div class="mt-8 mb-6 text-grey-dark border-t border-grey-lighter usage"> |
16 | | - <span class="indicator-title">CPU - 2 Cores</span> |
17 | | - <div class="rounded border-grey-lighter border mt-3 h-4"> |
| 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 | 18 | <div class="rounded bg-blue h-4 w-1/6"></div> |
19 | 19 | </div> |
20 | | - </div> |
21 | | - <div class="my-6 text-grey-dark border-t border-grey-lighter usage"> |
22 | | - <span class="indicator-title">RAM - 4 GB</span> |
23 | | - <div class="rounded border-grey-lighter border mt-3 h-4"> |
24 | | - <div class="rounded bg-blue h-4 w-2/3"></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 | 25 | </div> |
26 | | - </div> |
27 | | - <div class="my-6 text-grey-dark border-t border-grey-lighter usage"> |
28 | | - <span class="indicator-title">Disk - 20 GB</span> |
29 | | - <div class="rounded border-grey-lighter border mt-3 h-4"> |
30 | | - <div class="rounded bg-blue h-4 w-1/3"></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> |
31 | 37 | </div> |
32 | 38 | </div> |
33 | 39 | </div> |
34 | 40 | <div class="sidenav"> |
35 | | - <router-link :to="{ name: 'server' }"><font-awesome-icon class="mr-2" fixed-with icon="terminal" />Console</router-link> |
36 | | - <router-link :to="{ name: 'server-files' }"><font-awesome-icon class="mr-2" fixed-with icon="folder-open" />Files</router-link> |
37 | | - <router-link :to="{ name: 'server-subusers' }"><font-awesome-icon class="mr-2" fixed-with icon="users" />Subusers</router-link> |
38 | | - <router-link :to="{ name: 'server-schedules' }"><font-awesome-icon class="mr-2" fixed-with icon="calendar-alt" />Schedules</router-link> |
39 | | - <router-link :to="{ name: 'server-databases' }"><font-awesome-icon class="mr-2" fixed-with icon="database" />Databases</router-link> |
40 | | - <router-link :to="{ name: 'server-allocations' }"><font-awesome-icon class="mr-2" fixed-with icon="globe" />Allocations</router-link> |
41 | | - <router-link :to="{ name: 'server-settings' }"><font-awesome-icon class="mr-2" fixed-with icon="cog" />Settings</router-link> |
| 41 | + <router-link :to="{ name: 'server' }"> |
| 42 | + <font-awesome-icon class="mr-2" fixed-with icon="terminal"/> |
| 43 | + Console |
| 44 | + </router-link> |
| 45 | + <router-link :to="{ name: 'server-files' }"> |
| 46 | + <font-awesome-icon class="mr-2" fixed-with icon="folder-open"/> |
| 47 | + Files |
| 48 | + </router-link> |
| 49 | + <router-link :to="{ name: 'server-subusers' }"> |
| 50 | + <font-awesome-icon class="mr-2" fixed-with icon="users"/> |
| 51 | + Subusers |
| 52 | + </router-link> |
| 53 | + <router-link :to="{ name: 'server-schedules' }"> |
| 54 | + <font-awesome-icon class="mr-2" fixed-with icon="calendar-alt"/> |
| 55 | + Schedules |
| 56 | + </router-link> |
| 57 | + <router-link :to="{ name: 'server-databases' }"> |
| 58 | + <font-awesome-icon class="mr-2" fixed-with icon="database"/> |
| 59 | + Databases |
| 60 | + </router-link> |
| 61 | + <router-link :to="{ name: 'server-allocations' }"> |
| 62 | + <font-awesome-icon class="mr-2" fixed-with icon="globe"/> |
| 63 | + Allocations |
| 64 | + </router-link> |
| 65 | + <router-link :to="{ name: 'server-settings' }"> |
| 66 | + <font-awesome-icon class="mr-2" fixed-with icon="cog"/> |
| 67 | + Settings |
| 68 | + </router-link> |
42 | 69 | </div> |
43 | 70 | </div> |
44 | | - <div class="main bg-white p-6 rounded border border-grey-lighter flex-grow"><!--h1.text-blue.mb-6 Server Console--> |
45 | | - <router-view></router-view> |
| 71 | + <div class="main bg-white p-6 rounded border border-grey-lighter flex-grow"> |
| 72 | + <!--h1.text-blue.mb-6 Server Console--> |
| 73 | + <router-view></router-view> |
| 74 | + </div> |
46 | 75 | </div> |
47 | | - </div> |
48 | 76 | </div> |
49 | 77 | </template> |
50 | 78 |
|
51 | 79 | <script> |
52 | 80 | import ServerConsole from "./ServerConsole"; |
53 | 81 | import Navigation from '../core/Navigation'; |
| 82 | +
|
54 | 83 | export default { |
55 | | - components: { Navigation, ServerConsole} |
| 84 | + components: {Navigation, ServerConsole} |
56 | 85 | } |
57 | 86 | </script> |
0 commit comments