Skip to content

Commit 395a286

Browse files
DaneEverittDaneEveritt
committed
Start working on a better design for the server boxes on the dashboard
1 parent 5c25edf commit 395a286

File tree

4 files changed

+66
-40
lines changed

4 files changed

+66
-40
lines changed

‎resources/assets/scripts/components/dashboard/Dashboard.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@
1616
<span class="spinner spinner-xl spinner-thick blue"></span>
1717
</div>
1818
</div>
19-
<transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else>
19+
<transition-group class="flex flex-wrap justify-center sm:justify-start" v-else>
2020
<server-box
2121
v-for="(server, index) in servers"
22-
v-bind:key="index"
23-
v-bind:server="server"
22+
:key="index"
23+
:server="server"
2424
/>
2525
</transition-group>
2626
</div>

‎resources/assets/scripts/components/dashboard/ServerBox.vue‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,38 @@
11
<template>
2-
<div class="server-box animate fadein">
3-
<router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
4-
<div class="float-right">
5-
<div class="indicator" :class="status"></div>
6-
</div>
7-
<div class="mb-4">
8-
<div class="text-black font-bold text-xl">
2+
<div class="server-card animated-fade-in hover:shadow-md">
3+
<div class="content h-32 relative" :class="{
4+
'is-online': status === 'online',
5+
'is-offline': status === 'offline'
6+
}">
7+
<router-link :to="link">
8+
<h2 class="text-xl flex flex-row items-center mb-2">
9+
<div class="identifier-icon select-none" :class="{
10+
'bg-grey': status === '',
11+
'bg-red': status === 'offline',
12+
'bg-green': status === 'online'
13+
}">
14+
{{ server.name[0] }}
15+
</div>
916
{{ server.name }}
17+
</h2>
18+
</router-link>
19+
<div class="text-grey-darker font-normal text-sm">
20+
<p v-if="server.description.length" class="pb-1">{{ server.description }}</p>
21+
22+
<div class="absolute pin-b pin-l p-4 w-full">
23+
<span class="font-semibold text-indigo">{{ server.node }}</span>
24+
<span class="float-right text-grey-dark font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span>
1025
</div>
1126
</div>
12-
<div class="mb-0 flex">
13-
<div class="usage">
14-
<div class="indicator-title">{{ $t('dashboard.index.cpu_title') }}</div>
15-
</div>
16-
<div class="usage">
17-
<div class="indicator-title">{{ $t('dashboard.index.memory_title') }}</div>
18-
</div>
27+
</div>
28+
<div class="footer p-4 text-sm">
29+
<div class="inline-block pr-2">
30+
<div class="pillbox bg-green"><span class="select-none">MEM:</span> {{ memory }} Mb</div>
1931
</div>
20-
<div class="mb-4 flex text-center">
21-
<div class="inline-block border border-grey-lighter border-l-0 p-4 flex-1">
22-
<span class="font-bold text-xl">{{ cpu > 0 ? cpu : '&mdash;' }}</span>
23-
<span class="font-light text-sm">%</span>
24-
</div>
25-
<div class="inline-block border border-grey-lighter border-l-0 border-r-0 p-4 flex-1">
26-
<span class="font-bold text-xl">{{ memory > 0 ? memory : '&mdash;' }}</span>
27-
<span class="font-light text-sm">MB</span>
28-
</div>
29-
</div>
30-
<div class="flex items-center">
31-
<div class="text-sm">
32-
<p class="text-grey">{{ server.node }}</p>
33-
<p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
34-
</div>
32+
<div class="inline-block">
33+
<div class="pillbox bg-blue"><span class="select-none">CPU:</span> {{ cpu }} %</div>
3534
</div>
36-
</router-link>
35+
</div>
3736
</div>
3837
</template>
3938

@@ -57,6 +56,7 @@
5756
cpu: 0,
5857
memory: 0,
5958
status: '',
59+
link: { name: 'server', params: { id: this.server.identifier }},
6060
};
6161
},
6262
@@ -101,6 +101,7 @@
101101
* Poll the API for changes every 10 seconds when the component is mounted.
102102
*/
103103
mounted: function () {
104+
console.log(this.server);
104105
this.$options.dataGetTimeout = window.setInterval(() => {
105106
this.getResourceUse();
106107
}, 10000);

‎resources/assets/styles/components/animations.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
}
55
}
66

7+
.animated-fade-in {
8+
animation: fadein 500ms;
9+
}
10+
711
.fade-enter-active {
812
animation: fadein 500ms;
913
}

‎resources/assets/styles/components/miscellaneous.css‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -52,28 +52,49 @@ code {
5252
/**
5353
* Flex boxes for server listing on user dashboard.
5454
*/
55-
.server-box {
56-
@apply .block .pb-4 .no-underline;
55+
.server-card {
56+
@apply .block .no-underline .shadow;
5757

5858
@screen smx {
5959
@apply .w-full;
6060
}
6161

6262
@screen md {
63-
@apply .w-1/3 .pr-4;
63+
@apply .w-1/3 .mr-4;
6464

6565
&:nth-of-type(3n) {
66-
padding-right: 0;
66+
@apply .mr-0;
6767
}
6868
}
6969

70+
& .identifier-icon {
71+
@apply .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
72+
}
73+
74+
& .pillbox {
75+
@apply .rounded-full .px-2 .py-1 .text-white .font-medium .leading-none .text-xs;
76+
}
77+
78+
& a, & a:visited {
79+
@apply .no-underline .text-grey-darkest;
80+
}
81+
7082
& > .content {
71-
@apply .border .border-grey-light .bg-white .rounded .p-4 .justify-between .leading-normal .no-underline .block .text-black;
83+
@apply .border .border-grey-light .bg-white .no-underline .block .text-black .p-4;
84+
border-top: 4px solid config('colors.grey-light') !important;
85+
86+
&.is-online {
87+
border-top-color: config('colors.green') !important;
88+
}
7289

73-
&:visited {
74-
@apply .text-black;
90+
&.is-offline {
91+
border-top-color: config('colors.red') !important;
7592
}
7693
}
94+
95+
& > .footer {
96+
@apply .border .border-grey-light .border-t-0 .bg-grey-lightest;
97+
}
7798
}
7899

79100
.server-search {

0 commit comments

Comments
 (0)