Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix a bunch of design inconsistencies and horrible code on server boxes

Browse source
This commit is contained in:
Dane Everitt 2019-02-09 16:38:45 -08:00
parent a9fda52065
commit ac13f5dce4
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 39 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/assets/scripts/components/dashboard/Dashboard.ts
View file

@ -108,7 +108,7 @@ export default Vue.component('dashboard', {
/>
</div>
<div v-if="this.loading" class="my-4 animate fadein">
<div class="text-center h-16">
<div class="text-center h-16 my-20">
<span class="spinner spinner-xl spinner-thick blue"></span>
</div>
</div>

29
resources/assets/scripts/components/dashboard/ServerBox.ts
View file

@ -156,13 +156,13 @@ export default Vue.component('server-box', {
},
template: `
<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">
<div class="server-card-container animated-fade-in">
<div>
<div class="server-card">
<router-link :to="link" class="block">
<h2 class="text-xl flex flex-row items-center mb-2">
<div class="identifier-icon select-none" :class="{
'bg-grey-500': status === '',
'bg-neutral-400': status === '',
'bg-red-500': status === 'offline',
'bg-green-500': status === 'online'
}">
@ -171,21 +171,24 @@ export default Vue.component('server-box', {
{{ server.name }}
</h2>
</router-link>
<div class="text-neutral-800 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-neutral-600 font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span>
<div class="flex-1 py-3">
<p v-if="server.description.length" class="text-neutral-500 text-sm">{{ server.description }}</p>
</div>
<div class="flex flex-none pt-2">
<div class="flex-1">
<span class="font-semibold text-cyan-800">{{ server.node }}</span>
</div>
<div>
<span class="text-neutral-300">{{ server.allocation.ip }}:{{ server.allocation.port }}</span>
</div>
</div>
</div>
<div class="footer p-4 text-sm">
<div class="inline-block pr-2">
<div class="pillbox bg-green-500"><span class="select-none">MEM:</span> {{ memory }} Mb</div>
<div class="pillbox bg-neutral-700"><span class="select-none">MEM:</span> {{ memory }} Mb</div>
</div>
<div class="inline-block">
<div class="pillbox bg-primary-500"><span class="select-none">CPU:</span> {{ cpu }} %</div>
<div class="pillbox bg-neutral-700"><span class="select-none">CPU:</span> {{ cpu }} %</div>
</div>
</div>
</div>

44
resources/assets/styles/components/miscellaneous.css
View file

@ -53,11 +53,7 @@ code {
* Flex boxes for server listing on user dashboard.
*/
.server-card-container {
@apply .mb-4;
@screen smx {
@apply .w-full;
}
@apply .mb-4 .w-full;
@screen md {
@apply .w-1/2 .pr-4;
@ -78,27 +74,31 @@ code {
@apply .pr-0;
}
}
}
.server-card {
@apply .block .no-underline .shadow;
transition: all 100ms ease-in;
& > div {
@apply .flex .flex-col .h-full;
transition: box-shadow 150ms ease-in;
& .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;
&:hover {
@apply .shadow-md;
}
}
& a, & a:visited {
@apply .no-underline .text-neutral-900;
& > div > .server-card {
@apply .flex .flex-1 .flex-col .p-4 .border .border-t-4 .border-neutral-100 .bg-white;
transition: all 100ms ease-in;
& .identifier-icon {
@apply .select-none .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
}
& a, & a:visited {
@apply .no-underline .text-neutral-800;
}
}
& > .content {
@apply .border .border-neutral-400 .bg-white .no-underline .block .text-black .p-4;
border-top: 4px solid config('colors.neutral-400') !important;
}
& > .footer {
@apply .border .border-neutral-400 .border-t-0 .bg-neutral-50;
& > div > .footer {
@apply .border .border-neutral-100 .border-t-0 .bg-neutral-50 .shadow-inner;
}
}
@ -110,11 +110,11 @@ code {
@apply .w-full .my-4;
& > input[type="text"] {
@apply .w-full .p-3 .rounded .border .text-neutral-800;
@apply .w-full .p-4 .rounded .border .border-neutral-200 .text-neutral-500;
transition: border 150ms ease-in;
&:focus {
@apply .border-primary-400;
@apply .border-primary-500;
}
}
}