Fix flexbox view when there are three items

Author: DaneEveritt

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

@@ -33,7 +33,7 @@
     import ServerBox from './ServerBox';
     import Navigation from '../core/Navigation';
     import isObject from 'lodash/isObject';
-    import {mapState} from 'vuex';
+    import { mapState } from 'vuex';
 
     export default {
         name: 'dashboard',
@@ -72,8 +72,8 @@
                 },
                 set: function (value) {
                     this.$store.dispatch('dashboard/setSearchTerm', value);
-                }
-            }
+                },
+            },
         },
 
         methods: {
@@ -112,6 +112,6 @@
             onChange: debounce(function () {
                 this.loadServers();
             }, 500),
-        }
+        },
     };
 </script>

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

@@ -1,33 +1,35 @@
 <template>
-    <div class="server-card animated-fade-in hover:shadow-md">
-        <div class="content h-32 relative">
-            <router-link :to="link">
-                <h2 class="text-xl flex flex-row items-center mb-2">
-                    <div class="identifier-icon select-none" :class="{
+    <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">
+                    <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] }}
+                            {{ 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>
-                    {{ 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>
-        <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="inline-block">
-                <div class="pillbox bg-blue"><span class="select-none">CPU:</span> {{ cpu }} %</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="inline-block">
+                    <div class="pillbox bg-blue"><span class="select-none">CPU:</span> {{ cpu }} %</div>
+                </div>
             </div>
         </div>
     </div>
@@ -122,7 +124,6 @@
                             throw new Error('Received an invalid response object back from status endpoint.');
                         }
 
-
                         this.resources = response.data.attributes;
                         this.status = this.getServerStatus();
 
@@ -150,14 +151,14 @@
                 }
 
                 switch (this.resources.state) {
-                    case 'off':
-                        return 'offline';
-                    case 'on':
-                    case 'starting':
-                    case 'stopping':
-                        return 'online';
-                    default:
-                        return '';
+                case 'off':
+                    return 'offline';
+                case 'on':
+                case 'starting':
+                case 'stopping':
+                    return 'online';
+                default:
+                    return '';
                 }
             },
 
@@ -189,6 +190,6 @@
                     this.backgroundedAt = new Date();
                 }
             },
-        }
+        },
     };
 </script>

resources/assets/scripts/helpers/ziggy.js

@@ -52,20 +52,36 @@ code {
 /**
  * Flex boxes for server listing on user dashboard.
  */
-.server-card {
-    @apply .block .no-underline .shadow;
+.server-card-container {
+    @apply .mb-4;
 
     @screen smx {
         @apply .w-full;
     }
 
     @screen md {
-        @apply .w-1/3 .mr-4;
+        @apply .w-1/2 .pr-4;
+
+        &:nth-of-type(2n) {
+            @apply .pr-0;
+        }
+    }
+
+    @screen lg {
+        @apply .w-1/3 .pr-4;
+
+        &:nth-of-type(2n) {
+            @apply .pr-4;
+        }
 
         &:nth-of-type(3n) {
-            @apply .mr-0;
+            @apply .pr-0;
         }
     }
+}
+
+.server-card {
+    @apply .block .no-underline .shadow;
 
     & .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;

resources/assets/styles/components/miscellaneous.css

@@ -13,3 +13,6 @@
         ->name('server.files')
         ->where('directory', '.*');
 });
+
+Route::get('/')->name('server.index');
+Route::get('/console')->name('server.console');