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

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

@ -1,33 +1,35 @@
<template>
<div class="server-card animated-fade-in hover:shadow-md">
<div class="content h-32 relative">
<router-link :to="link">
<h2 class="text-xl flex flex-row items-center mb-2">
<div class="identifier-icon select-none" :class="{
<div class="server-card-container">
<div class="server-card animated-fade-in hover:shadow-md">
<div class="content h-32 relative">
<router-link :to="link">
<h2 class="text-xl flex flex-row items-center mb-2">
<div class="identifier-icon select-none" :class="{
'bg-grey': status === '',
'bg-red': status === 'offline',
'bg-green': status === 'online'
}">
{{ server.name[0] }}
</div>
{{ server.name }}
</h2>
</router-link>
<div class="text-grey-darker font-normal text-sm">
<p v-if="server.description.length" class="pb-1">{{ server.description }}</p>
{{ server.name[0] }}
</div>
{{ server.name }}
</h2>
</router-link>
<div class="text-grey-darker font-normal text-sm">
<p v-if="server.description.length" class="pb-1">{{ server.description }}</p>
<div class="absolute pin-b pin-l p-4 w-full">
<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>
<div class="absolute pin-b pin-l p-4 w-full">
<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>
</div>
</div>
</div>
</div>
<div class="footer p-4 text-sm">
<div class="inline-block pr-2">
<div class="pillbox bg-green"><span class="select-none">MEM:</span> {{ memory }} Mb</div>
</div>
<div class="inline-block">
<div class="pillbox bg-blue"><span class="select-none">CPU:</span> {{ cpu }} %</div>
<div class="footer p-4 text-sm">
<div class="inline-block pr-2">
<div class="pillbox bg-green"><span class="select-none">MEM:</span> {{ memory }} Mb</div>
</div>
<div class="inline-block">
<div class="pillbox bg-blue"><span class="select-none">CPU:</span> {{ cpu }} %</div>
</div>
</div>
</div>
</div>
@ -122,7 +124,6 @@
throw new Error('Received an invalid response object back from status endpoint.');
}
this.resources = response.data.attributes;
this.status = this.getServerStatus();
@ -150,14 +151,14 @@
}
switch (this.resources.state) {
case 'off':
return 'offline';
case 'on':
case 'starting':
case 'stopping':
return 'online';
default:
return '';
case 'off':
return 'offline';
case 'on':
case 'starting':
case 'stopping':
return 'online';
default:
return '';
}
},
@ -189,6 +190,6 @@
this.backgroundedAt = new Date();
}
},
}
},
};
</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.
*/
.server-card {
@apply .block .no-underline .shadow;
.server-card-container {
@apply .mb-4;
@screen smx {
@apply .w-full;
}
@screen md {
@apply .w-1/3 .mr-4;
@apply .w-1/2 .pr-4;
&:nth-of-type(3n) {
@apply .mr-0;
&:nth-of-type(2n) {
@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 {
@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')
->where('directory', '.*');
});
Route::get('/')->name('server.index');
Route::get('/console')->name('server.console');