StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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
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>