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>
<div v-if="this.loading" class="my-4 animate fadein"> <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> <span class="spinner spinner-xl spinner-thick blue"></span>
</div> </div>
</div> </div>

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

@ -156,13 +156,13 @@ export default Vue.component('server-box', {
}, },
template: ` template: `
<div class="server-card-container"> <div class="server-card-container animated-fade-in">
<div class="server-card animated-fade-in hover:shadow-md"> <div>
<div class="content h-32 relative"> <div class="server-card">
<router-link :to="link"> <router-link :to="link" class="block">
<h2 class="text-xl flex flex-row items-center mb-2"> <h2 class="text-xl flex flex-row items-center mb-2">
<div class="identifier-icon select-none" :class="{ <div class="identifier-icon select-none" :class="{
'bg-grey-500': status === '', 'bg-neutral-400': status === '',
'bg-red-500': status === 'offline', 'bg-red-500': status === 'offline',
'bg-green-500': status === 'online' 'bg-green-500': status === 'online'
}"> }">
@ -171,21 +171,24 @@ export default Vue.component('server-box', {
{{ server.name }} {{ server.name }}
</h2> </h2>
</router-link> </router-link>
<div class="text-neutral-800 font-normal text-sm"> <div class="flex-1 py-3">
<p v-if="server.description.length" class="pb-1">{{ server.description }}</p> <p v-if="server.description.length" class="text-neutral-500 text-sm">{{ server.description }}</p>
</div>
<div class="absolute pin-b pin-l p-4 w-full"> <div class="flex flex-none pt-2">
<span class="font-semibold text-indigo">{{ server.node }}</span> <div class="flex-1">
<span class="float-right text-neutral-600 font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span> <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>
</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-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>
<div class="inline-block"> <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> </div>
</div> </div>

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

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