Fix flexbox view when there are three items
This commit is contained in:
Dane Everitt
parent
aee42df3ad
commit
8fd0e5ff57
5 changed files with 62 additions and 42 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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] }}
|
||||
</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>
|
||||
{{ 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 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>
|
||||
<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>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -52,21 +52,37 @@ 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(3n) {
|
||||
@apply .mr-0;
|
||||
&: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 .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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,3 +13,6 @@ Route::group(['prefix' => '/files'], function () {
|
|||
->name('server.files')
|
||||
->where('directory', '.*');
|
||||
});
|
||||
|
||||
Route::get('/')->name('server.index');
|
||||
Route::get('/console')->name('server.console');
|
||||
|
|
|
|||
Loading…
Reference in a new issue