mirror of
https://github.com/pterodactyl/panel.git
synced 2024-11-22 17:12:30 +01:00
Start working on a better design for the server boxes on the dashboard
This commit is contained in:
Dane Everitt
parent
5c25edfdd4
commit
395a2860e7
@ -16,11 +16,11 @@
|
||||
<span class="spinner spinner-xl spinner-thick blue"></span>
|
||||
</div>
|
||||
</div>
|
||||
<transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else>
|
||||
<transition-group class="flex flex-wrap justify-center sm:justify-start" v-else>
|
||||
<server-box
|
||||
v-for="(server, index) in servers"
|
||||
v-bind:key="index"
|
||||
v-bind:server="server"
|
||||
:key="index"
|
||||
:server="server"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
@ -1,39 +1,38 @@
|
||||
<template>
|
||||
<div class="server-box animate fadein">
|
||||
<router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
|
||||
<div class="float-right">
|
||||
<div class="indicator" :class="status"></div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="text-black font-bold text-xl">
|
||||
<div class="server-card animated-fade-in hover:shadow-md">
|
||||
<div class="content h-32 relative" :class="{
|
||||
'is-online': status === 'online',
|
||||
'is-offline': status === 'offline'
|
||||
}">
|
||||
<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>
|
||||
|
||||
<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 class="mb-0 flex">
|
||||
<div class="usage">
|
||||
<div class="indicator-title">{{ $t('dashboard.index.cpu_title') }}</div>
|
||||
</div>
|
||||
<div class="usage">
|
||||
<div class="indicator-title">{{ $t('dashboard.index.memory_title') }}</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="mb-4 flex text-center">
|
||||
<div class="inline-block border border-grey-lighter border-l-0 p-4 flex-1">
|
||||
<span class="font-bold text-xl">{{ cpu > 0 ? cpu : '—' }}</span>
|
||||
<span class="font-light text-sm">%</span>
|
||||
</div>
|
||||
<div class="inline-block border border-grey-lighter border-l-0 border-r-0 p-4 flex-1">
|
||||
<span class="font-bold text-xl">{{ memory > 0 ? memory : '—' }}</span>
|
||||
<span class="font-light text-sm">MB</span>
|
||||
</div>
|
||||
<div class="inline-block">
|
||||
<div class="pillbox bg-blue"><span class="select-none">CPU:</span> {{ cpu }} %</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="text-sm">
|
||||
<p class="text-grey">{{ server.node }}</p>
|
||||
<p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -57,6 +56,7 @@
|
||||
cpu: 0,
|
||||
memory: 0,
|
||||
status: '',
|
||||
link: { name: 'server', params: { id: this.server.identifier }},
|
||||
};
|
||||
},
|
||||
|
||||
@ -101,6 +101,7 @@
|
||||
* Poll the API for changes every 10 seconds when the component is mounted.
|
||||
*/
|
||||
mounted: function () {
|
||||
console.log(this.server);
|
||||
this.$options.dataGetTimeout = window.setInterval(() => {
|
||||
this.getResourceUse();
|
||||
}, 10000);
|
||||
|
||||
@ -4,6 +4,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.animated-fade-in {
|
||||
animation: fadein 500ms;
|
||||
}
|
||||
|
||||
.fade-enter-active {
|
||||
animation: fadein 500ms;
|
||||
}
|
||||
|
||||
@ -52,27 +52,48 @@ code {
|
||||
/**
|
||||
* Flex boxes for server listing on user dashboard.
|
||||
*/
|
||||
.server-box {
|
||||
@apply .block .pb-4 .no-underline;
|
||||
.server-card {
|
||||
@apply .block .no-underline .shadow;
|
||||
|
||||
@screen smx {
|
||||
@apply .w-full;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
@apply .w-1/3 .pr-4;
|
||||
@apply .w-1/3 .mr-4;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
padding-right: 0;
|
||||
@apply .mr-0;
|
||||
}
|
||||
}
|
||||
|
||||
& > .content {
|
||||
@apply .border .border-grey-light .bg-white .rounded .p-4 .justify-between .leading-normal .no-underline .block .text-black;
|
||||
& .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;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
@apply .text-black;
|
||||
& .pillbox {
|
||||
@apply .rounded-full .px-2 .py-1 .text-white .font-medium .leading-none .text-xs;
|
||||
}
|
||||
|
||||
& a, & a:visited {
|
||||
@apply .no-underline .text-grey-darkest;
|
||||
}
|
||||
|
||||
& > .content {
|
||||
@apply .border .border-grey-light .bg-white .no-underline .block .text-black .p-4;
|
||||
border-top: 4px solid config('colors.grey-light') !important;
|
||||
|
||||
&.is-online {
|
||||
border-top-color: config('colors.green') !important;
|
||||
}
|
||||
|
||||
&.is-offline {
|
||||
border-top-color: config('colors.red') !important;
|
||||
}
|
||||
}
|
||||
|
||||
& > .footer {
|
||||
@apply .border .border-grey-light .border-t-0 .bg-grey-lightest;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user