Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve dash design

Browse source
This commit is contained in:
Dane Everitt 2018-05-26 22:09:29 -07:00
parent 9d8830a2d7
commit d78189df23
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 68 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
resources/assets/styles/components/miscellaneous.css
View file

@ -26,3 +26,45 @@ code {
animation: offlineblink 2s infinite alternate;
}
}
/**
* Usage indicator labels for the server listing.
*/
.usage {
@apply .flex-1 .text-center .relative;
& > .indicator-title {
@apply .text-xs .uppercase .font-hairline .bg-white .absolute .text-grey;
margin-top:-9px;
padding: 0 8px;
left: 50%;
transform: translate(-50%, 0);
}
}
/**
* Flex boxes for server listing on user dashboard.
*/
.server-box {
@apply .pb-4;
@screen smx {
@apply .w-1/2 .pr-4;
&:nth-of-type(2n) {
padding-right: 0;
}
}
@screen md {
@apply .w-1/3 .pr-4;
&:nth-of-type(3n) {
padding-right: 0;
}
}
& > .content {
@apply .border .border-grey-light .bg-white .rounded .p-4 .justify-between .leading-normal;
}
}

38
resources/themes/pterodactyl/templates/base/core.blade.php
View file

@ -33,27 +33,33 @@
@endsection
@section('container')
<div class="w-full m-auto mt-8 animate fadein sm:block md:flex">
<div class="w-full m-auto mt-8 animate fadein sm:flex flex-wrap content-start">
@foreach($servers as $server)
<div class="w-full mr-4 flex flex-col">
<div class="border border-grey-light bg-white rounded p-4 justify-between leading-normal">
<div class="server-box">
<div class="content">
<div class="float-right">
<div class="indicator {{ ['online', 'offline'][rand(0, 1)] }}"></div>
</div>
<div class="mb-4">
{{--@if ($server->owner_id !== Auth::user()->id)--}}
{{--<p class="text-sm text-grey-dark flex items-center">--}}
{{--<svg class="fill-current text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">--}}
{{--<path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" ></path>--}}
{{--</svg>--}}
{{--Restricted Access--}}
{{--</p>--}}
{{--@endif--}}
<div class="text-black font-bold text-xl">{{ $server->name }}</div>
{{--<div class="flex text-center">--}}
{{--<div class="flex-1">68%</div>--}}
{{--<div class="flex-1">124 / 1024 Mb</div>--}}
{{--</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">{{ rand(1, 200) }}</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">{{ rand(128, 2048) }}</span>
<span class="font-light text-sm">Mb</span>
</div>
</div>
<div class="flex items-center">
<div class="text-sm">
@ -65,7 +71,7 @@
</div>
@endforeach
</div>
<div class="w-full m-auto mt-4">
<div class="w-full m-auto mt-0">
<p class="text-right text-grey-dark text-xs">
{!! trans('strings.copyright', ['year' => date('Y')]) !!}
</p>

4
tailwind.js
View file

@ -171,6 +171,10 @@ module.exports = {
'md': '768px',
'lg': '992px',
'xl': '1200px',
'smx': {'max': '767px'},
'mdx': {'max': '991px'},
'lgx': {'max': '1999px'},
},