StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

mocked server page and better navigation and overall layout

Browse source
This commit is contained in:
Jakob Schrettenbrunner 2018-05-28 00:37:03 +02:00
parent d2c770d218
commit 89f47c6dbb
23 changed files with 12718 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

62
resources/assets/scripts/components/dashboard/Dashboard.vue
View file

@ -8,40 +8,40 @@
/>
</div>
<transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start">
<div class="server-box" :key="index" v-for="(server, index) in servers">
<div class="content">
<div class="float-right">
<div class="indicator online"></div>
</div>
<div class="mb-4">
<div class="text-black font-bold text-xl">{{ server.name }}</div>
</div>
<div class="mb-0 flex">
<div class="usage">
<div class="indicator-title">CPU</div>
<router-link class="server-box" :to="{name: 'server', params: { id: server.uuidShort }}" :key="index" v-for="(server, index) in servers">
<div class="content">
<div class="float-right">
<div class="indicator online"></div>
</div>
<div class="usage">
<div class="indicator-title">Memory</div>
<div class="mb-4">
<div class="text-black font-bold text-xl">{{ server.name }}</div>
</div>
<div class="mb-0 flex">
<div class="usage">
<div class="indicator-title">CPU</div>
</div>
<div class="usage">
<div class="indicator-title">Memory</div>
</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">---</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">---</span>
<span class="font-light text-sm">Mb</span>
</div>
</div>
<div class="flex items-center">
<div class="text-sm">
<p class="text-grey">{{ server.node_name }}</p>
<p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
</div>
</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">---</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">---</span>
<span class="font-light text-sm">Mb</span>
</div>
</div>
<div class="flex items-center">
<div class="text-sm">
<p class="text-grey">{{ server.node_name }}</p>
<p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
</div>
</div>
</div>
</div>
</router-link>
</transition-group>
</div>
</template>