From 395a2860e7d239cc8ed02a3cb4f40588fe770823 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Wed, 5 Sep 2018 22:55:59 -0700
Subject: [PATCH] Start working on a better design for the server boxes on the
 dashboard

---
 .../components/dashboard/Dashboard.vue        |  6 +-
 .../components/dashboard/ServerBox.vue        | 61 ++++++++++---------
 .../assets/styles/components/animations.css   |  4 ++
 .../styles/components/miscellaneous.css       | 37 ++++++++---
 4 files changed, 67 insertions(+), 41 deletions(-)

diff --git a/resources/assets/scripts/components/dashboard/Dashboard.vue b/resources/assets/scripts/components/dashboard/Dashboard.vue
index 5f0cb55b7..7769e1926 100644
--- a/resources/assets/scripts/components/dashboard/Dashboard.vue
+++ b/resources/assets/scripts/components/dashboard/Dashboard.vue
@@ -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>
diff --git a/resources/assets/scripts/components/dashboard/ServerBox.vue b/resources/assets/scripts/components/dashboard/ServerBox.vue
index 4f9e0ec7b..d2d6f3955 100644
--- a/resources/assets/scripts/components/dashboard/ServerBox.vue
+++ b/resources/assets/scripts/components/dashboard/ServerBox.vue
@@ -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 : '&mdash;' }}</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 : '&mdash;' }}</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);
diff --git a/resources/assets/styles/components/animations.css b/resources/assets/styles/components/animations.css
index a3daa6722..8312978f7 100644
--- a/resources/assets/styles/components/animations.css
+++ b/resources/assets/styles/components/animations.css
@@ -4,6 +4,10 @@
   }
 }
 
+.animated-fade-in {
+  animation: fadein 500ms;
+}
+
 .fade-enter-active {
   animation: fadein 500ms;
 }
diff --git a/resources/assets/styles/components/miscellaneous.css b/resources/assets/styles/components/miscellaneous.css
index 48ae381b9..99dc5658e 100644
--- a/resources/assets/styles/components/miscellaneous.css
+++ b/resources/assets/styles/components/miscellaneous.css
@@ -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;
     }
 }