dvkei/Pterodactyl-Panel
1
0
Fork 0
forked from Alex/Pterodactyl-Panel
Code Issues Pull Requests Projects Releases Wiki Activity

Fix flexbox view when there are three items

Browse Source
This commit is contained in:
Dane Everitt 2018-10-14 13:17:37 -07:00
parent aee42df3ad
commit 8fd0e5ff57
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
5 changed files with 62 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
resources/assets/scripts/components/dashboard/Dashboard.vue
View File

@ -33,7 +33,7 @@
import ServerBox from './ServerBox'; import ServerBox from './ServerBox';
import Navigation from '../core/Navigation'; import Navigation from '../core/Navigation';
import isObject from 'lodash/isObject'; import isObject from 'lodash/isObject';
import {mapState} from 'vuex'; import { mapState } from 'vuex';
export default { export default {
name: 'dashboard', name: 'dashboard',
@ -72,8 +72,8 @@
}, },
set: function (value) { set: function (value) {
this.$store.dispatch('dashboard/setSearchTerm', value); this.$store.dispatch('dashboard/setSearchTerm', value);
} },
} },
}, },
methods: { methods: {
@ -112,6 +112,6 @@
onChange: debounce(function () { onChange: debounce(function () {
this.loadServers(); this.loadServers();
}, 500), }, 500),
} },
}; };
</script> </script>

65
resources/assets/scripts/components/dashboard/ServerBox.vue
View File

@ -1,33 +1,35 @@
<template> <template>
<div class="server-card animated-fade-in hover:shadow-md"> <div class="server-card-container">
<div class="content h-32 relative"> <div class="server-card animated-fade-in hover:shadow-md">
<router-link :to="link"> <div class="content h-32 relative">
<h2 class="text-xl flex flex-row items-center mb-2"> <router-link :to="link">
<div class="identifier-icon select-none" :class="{ <h2 class="text-xl flex flex-row items-center mb-2">
<div class="identifier-icon select-none" :class="{
'bg-grey': status === '', 'bg-grey': status === '',
'bg-red': status === 'offline', 'bg-red': status === 'offline',
'bg-green': status === 'online' 'bg-green': status === 'online'
}"> }">
{{ server.name[0] }} {{ server.name[0] }}
</div> </div>
{{ server.name }} {{ server.name }}
</h2> </h2>
</router-link> </router-link>
<div class="text-grey-darker font-normal text-sm"> <div class="text-grey-darker font-normal text-sm">
<p v-if="server.description.length" class="pb-1">{{ server.description }}</p> <p v-if="server.description.length" class="pb-1">{{ server.description }}</p>
<div class="absolute pin-b pin-l p-4 w-full"> <div class="absolute pin-b pin-l p-4 w-full">
<span class="font-semibold text-indigo">{{ server.node }}</span> <span class="font-semibold text-indigo">{{ server.node }}</span>
<span class="float-right text-grey-dark font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span> <span class="float-right text-grey-dark font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span>
</div>
</div> </div>
</div> </div>
</div> <div class="footer p-4 text-sm">
<div class="footer p-4 text-sm"> <div class="inline-block pr-2">
<div class="inline-block pr-2"> <div class="pillbox bg-green"><span class="select-none">MEM:</span> {{ memory }} Mb</div>
<div class="pillbox bg-green"><span class="select-none">MEM:</span> {{ memory }} Mb</div> </div>
</div> <div class="inline-block">
<div class="inline-block"> <div class="pillbox bg-blue"><span class="select-none">CPU:</span> {{ cpu }} %</div>
<div class="pillbox bg-blue"><span class="select-none">CPU:</span> {{ cpu }} %</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -122,7 +124,6 @@
throw new Error('Received an invalid response object back from status endpoint.'); throw new Error('Received an invalid response object back from status endpoint.');
} }
this.resources = response.data.attributes; this.resources = response.data.attributes;
this.status = this.getServerStatus(); this.status = this.getServerStatus();
@ -150,14 +151,14 @@
} }
switch (this.resources.state) { switch (this.resources.state) {
case 'off': case 'off':
return 'offline'; return 'offline';
case 'on': case 'on':
case 'starting': case 'starting':
case 'stopping': case 'stopping':
return 'online'; return 'online';
default: default:
return ''; return '';
} }
}, },
@ -189,6 +190,6 @@
this.backgroundedAt = new Date(); this.backgroundedAt = new Date();
} }
}, },
} },
}; };
</script> </script>

2
resources/assets/scripts/helpers/ziggy.js
View File

File diff suppressed because one or more lines are too long

26
resources/assets/styles/components/miscellaneous.css
View File

@ -52,21 +52,37 @@ code {
/** /**
* Flex boxes for server listing on user dashboard. * Flex boxes for server listing on user dashboard.
*/ */
.server-card { .server-card-container {
@apply .block .no-underline .shadow; @apply .mb-4;
@screen smx { @screen smx {
@apply .w-full; @apply .w-full;
} }
@screen md { @screen md {
@apply .w-1/3 .mr-4; @apply .w-1/2 .pr-4;
&:nth-of-type(3n) { &:nth-of-type(2n) {
@apply .mr-0; @apply .pr-0;
} }
} }
@screen lg {
@apply .w-1/3 .pr-4;
&:nth-of-type(2n) {
@apply .pr-4;
}
&:nth-of-type(3n) {
@apply .pr-0;
}
}
}
.server-card {
@apply .block .no-underline .shadow;
& .identifier-icon { & .identifier-icon {
@apply .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center; @apply .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
} }

3
routes/server.php
View File

@ -13,3 +13,6 @@ Route::group(['prefix' => '/files'], function () {
->name('server.files') ->name('server.files')
->where('directory', '.*'); ->where('directory', '.*');
}); });
Route::get('/')->name('server.index');
Route::get('/console')->name('server.console');