From 7e6902cc90aa1d290436284fef9293c0849be0a9 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 3 Aug 2018 21:30:06 -0700
Subject: [PATCH] Adjustments to the UI

---
 .../scripts/components/server/Server.vue      | 85 +++++++++----------
 .../assets/styles/components/navigation.css   | 19 +++--
 2 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/resources/assets/scripts/components/server/Server.vue b/resources/assets/scripts/components/server/Server.vue
index d4b389c39..7ac61f063 100644
--- a/resources/assets/scripts/components/server/Server.vue
+++ b/resources/assets/scripts/components/server/Server.vue
@@ -6,54 +6,53 @@
                 <div class="spinner spinner-xl spinner-thick blue"></div>
             </div>
         </div>
-        <div class="m-6 flex flex-no-shrink rounded animate fadein" v-else>
-            <div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
-                <div class="mr-6">
-                    <div class="p-6 text-center bg-white border rounded">
-                        <h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
-                        <span class="text-grey-dark text-sm">{{server.node}}</span>
+        <div v-else>
+            <div class="m-6 flex flex-no-shrink rounded animate fadein">
+                <div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
+                    <div class="mr-6">
+                        <div class="p-6 text-center bg-white border rounded">
+                            <h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
+                            <span class="text-grey-dark text-sm">{{server.node}}</span>
+                            <power-buttons class="mt-6 pt-6 text-center border-t border-grey-lighter"/>
+                        </div>
                     </div>
-                    <power-buttons class="mt-6 p-4 text-center bg-white border rounded"/>
-                    <div class="mt-6 p-4 bg-white border rounded">
-                        <progress-bar title="Memory" percent="33"></progress-bar>
-                        <progress-bar title="CPU" percent="80" class="mt-4"></progress-bar>
-                        <progress-bar title="Disk" percent="97" class="mt-4"></progress-bar>
+                    <div class="mt-6 sidenav mr-6 bg-white border rounded">
+                        <router-link :to="{ name: 'server', params: { id: this.$route.params.id } }">
+                            <terminal-icon class="h-4"></terminal-icon> Console
+                        </router-link>
+                        <router-link :to="{ name: 'server-files' }">
+                            <folder-icon class="h-4"></folder-icon> Files
+                        </router-link>
+                        <router-link :to="{ name: 'server-subusers' }">
+                            <users-icon class="h-4"></users-icon> Subusers
+                        </router-link>
+                        <router-link :to="{ name: 'server-schedules' }">
+                            <calendar-icon class="h-4"></calendar-icon> Schedules
+                        </router-link>
+                        <router-link :to="{ name: 'server-databases' }">
+                            <database-icon class="h-4"></database-icon> Databases
+                        </router-link>
+                        <router-link :to="{ name: 'server-allocations' }">
+                            <globe-icon class="h-4"></globe-icon> Allocations
+                        </router-link>
+                        <router-link :to="{ name: 'server-settings' }">
+                            <settings-icon class="h-4"></settings-icon> Settings
+                        </router-link>
                     </div>
                 </div>
-                <div class="sidenav">
-                    <router-link :to="{ name: 'server', params: { id: this.$route.params.id } }">
-                        <terminal-icon style="height: 1em;"></terminal-icon>
-                        Console
-                    </router-link>
-                    <router-link :to="{ name: 'server-files' }">
-                        <folder-icon style="height: 1em;"></folder-icon>
-                        Files
-                    </router-link>
-                    <router-link :to="{ name: 'server-subusers' }">
-                        <users-icon style="height: 1em;"></users-icon>
-                        Subusers
-                    </router-link>
-                    <router-link :to="{ name: 'server-schedules' }">
-                        <calendar-icon style="height: 1em;"></calendar-icon>
-                        Schedules
-                    </router-link>
-                    <router-link :to="{ name: 'server-databases' }">
-                        <database-icon style="height: 1em;"></database-icon>
-                        Databases
-                    </router-link>
-                    <router-link :to="{ name: 'server-allocations' }">
-                        <globe-icon style="height: 1em;"></globe-icon>
-                        Allocations
-                    </router-link>
-                    <router-link :to="{ name: 'server-settings' }">
-                        <settings-icon style="height: 1em;"></settings-icon>
-                        Settings
-                    </router-link>
+                <div class="h-full w-full">
+                    <div class="mb-6 bg-white border rounded" v-if="$router.currentRoute.name !== 'server'">
+                        <div class="flex">
+                            <progress-bar title="Memory" percent="33" class="flex-1 p-4 pb-6"></progress-bar>
+                            <progress-bar title="CPU" percent="80" class="flex-1 p-4 pb-6"></progress-bar>
+                            <progress-bar title="Disk" percent="97" class="flex-1 p-4 pb-6"></progress-bar>
+                        </div>
+                    </div>
+                    <div class="bg-white p-6 rounded border border-grey-light">
+                        <router-view></router-view>
+                    </div>
                 </div>
             </div>
-            <div class="bg-white p-6 rounded border border-grey-light h-full w-full">
-                <router-view></router-view>
-            </div>
         </div>
     </div>
 </template>
diff --git a/resources/assets/styles/components/navigation.css b/resources/assets/styles/components/navigation.css
index ac0691f6c..69a12ccd3 100644
--- a/resources/assets/styles/components/navigation.css
+++ b/resources/assets/styles/components/navigation.css
@@ -42,17 +42,20 @@
 }
 
 .sidenav {
-    @apply .mb-2;
+    @apply .py-2;
 
     a {
-        @apply .block .py-3 .px-8 .text-grey-darkest .no-underline;
+        @apply .block .py-3 .px-6 .text-grey-darkest .no-underline .border .border-transparent;
 
-        &:hover {
-             @apply .border-l-4 .border-blue-lightest;
-         }
+        &:hover, &.router-link-exact-active {
+            @apply .border-grey-light .bg-grey-lightest;
 
-        &.router-link-exact-active {
-             @apply .text-blue .border-l-4 .border-blue;
-         }
+            border-left: 1px solid transparent;
+            border-right: 1px solid transparent;
+        }
+
+        &.router-link-exact-active + a:hover {
+            border-top: 1px solid transparent;
+        }
     }
 }