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

Assorted UI tweaking

Browse source
This commit is contained in:
Dane Everitt 2019-02-03 17:27:19 -08:00
parent a28a9887c1
commit 89d29cf46b
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 67 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/assets/scripts/components/server/Server.ts
View file

@ -78,20 +78,20 @@ export default Vue.component('server', {
</div> </div>
<div v-else class="container"> <div v-else class="container">
<div class="my-6 flex flex-no-shrink rounded animate fadein"> <div class="my-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="sidebar flex-no-shrink w-1/3 max-w-xs">
<div class="mr-6"> <div class="mr-6">
<div class="p-6 text-center bg-white border rounded"> <div class="p-6 text-center bg-white rounded shadow">
<h3 class="mb-2 text-blue font-medium">{{server.name}}</h3> <h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
<span class="text-grey-dark text-sm">{{server.node}}</span> <span class="text-grey-dark text-sm">{{server.node}}</span>
<power-buttons class="mt-6 pt-6 text-center border-t border-grey-lighter"/> <power-buttons class="mt-6 pt-6 text-center border-t border-grey-lighter"/>
</div> </div>
</div> </div>
<div class="mt-6 sidenav mr-6 bg-white border rounded"> <div class="mt-6 sidenav mr-6">
<router-link :to="{ name: 'server', params: { id: $route.params.id } }"> <router-link :to="{ name: 'server', params: { id: $route.params.id } }">
<icon name="terminal" class="h-4"></icon> Console Console
</router-link> </router-link>
<router-link :to="{ name: 'server-files' }"> <router-link :to="{ name: 'server-files' }">
<icon name="folder" class="h-4"></icon> Files File Manager
</router-link> </router-link>
<!--<router-link :to="{ name: 'server-subusers' }">--> <!--<router-link :to="{ name: 'server-subusers' }">-->
<!--<icon name="users" class="h-4"></icon> Subusers--> <!--<icon name="users" class="h-4"></icon> Subusers-->
@ -100,7 +100,7 @@ export default Vue.component('server', {
<!--<icon name="calendar" class="h-4"></icon> Schedules--> <!--<icon name="calendar" class="h-4"></icon> Schedules-->
<!--</router-link>--> <!--</router-link>-->
<router-link :to="{ name: 'server-databases' }"> <router-link :to="{ name: 'server-databases' }">
<icon name="database" class="h-4"></icon> Databases Databases
</router-link> </router-link>
<!--<router-link :to="{ name: 'server-allocations' }">--> <!--<router-link :to="{ name: 'server-allocations' }">-->
<!--<icon name="globe" class="h-4"></icon> Allocations--> <!--<icon name="globe" class="h-4"></icon> Allocations-->

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

@ -46,7 +46,7 @@ code {
* Styling for elements that contain the core page content. * Styling for elements that contain the core page content.
*/ */
.content-box { .content-box {
@apply .bg-white .p-6 .border .border-grey-light .rounded; @apply .bg-white .p-6 .rounded .shadow-md;
} }
/** /**
@ -82,6 +82,7 @@ code {
.server-card { .server-card {
@apply .block .no-underline .shadow; @apply .block .no-underline .shadow;
transition: all 100ms ease-in;
& .identifier-icon { & .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; @apply .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
@ -110,6 +111,7 @@ code {
& > input[type="text"] { & > input[type="text"] {
@apply .w-full .p-3 .rounded .border .text-grey-darker; @apply .w-full .p-3 .rounded .border .text-grey-darker;
transition: border 150ms ease-in;
&:focus { &:focus {
@apply .border-blue-light; @apply .border-blue-light;

16
resources/assets/styles/components/navigation.css
View file

@ -60,6 +60,21 @@
} }
} }
.sidenav {
a {
@apply .block .no-underline .text-grey-darker .py-2;
transition: color 75ms ease-in;
&:hover {
@apply .text-grey;
}
&.router-link-exact-active {
@apply .font-medium;
}
}
}
/*
.sidenav { .sidenav {
@apply .py-2; @apply .py-2;
@ -78,3 +93,4 @@
} }
} }
} }
*/

2
resources/themes/pterodactyl/templates/wrapper.blade.php
View file

@ -32,7 +32,7 @@
@include('layouts.scripts') @include('layouts.scripts')
</head> </head>
<body class="{{ $css['body'] ?? 'bg-grey-lighter' }}"> <body class="{{ $css['body'] ?? 'bg-grey-lightest' }}">
@section('content') @section('content')
@yield('above-container') @yield('above-container')
<div id="pterodactyl" class="flex flex-col"> <div id="pterodactyl" class="flex flex-col">

96
tailwind.js
View file

@ -45,31 +45,33 @@ View the full documentation at https://tailwindcss.com.
let colors = { let colors = {
'transparent': 'transparent', 'transparent': 'transparent',
'black': '#22292f', 'black': '#1F2933',
'grey-darkest': '#3d4852',
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
'grey': '#b8c2cc',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
'grey-lightest': '#f8fafc',
'white': '#ffffff', 'white': '#ffffff',
'basically-white': '#fafafb',
'red-lightest': '#f9eded', 'grey-lightest': '#F5F7FA',
'red-lighter': '#e7b6b6', 'grey-lighter': '#E4E7EB',
'red-light': '#d58080', 'grey-light': '#CBD2D9',
'red': '#c34949', 'grey': '#9AA5B1',
'red-dark': '#b04242', 'grey-dark': '#52606D',
'red-darker': '#752c2c', 'grey-darker': '#3E4C59',
'red-darkest': '#3b1616', 'grey-darkest': '#323F4B',
'orange-lightest': '#fcf4eb', 'red-lightest': '#FFE3E3',
'orange-lighter': '#f4d4ae', 'red-lighter': '#FFBDBD',
'orange-light': '#ecb371', 'red-light': '#F86A6A',
'orange': '#e49334', 'red': '#CF1124',
'orange-dark': '#cd842f', 'red-dark': '#AB091E',
'orange-darker': '#89581f', 'red-darker': '#8A041A',
'orange-darkest': '#442c10', 'red-darkest': '#610316',
'orange-lightest': '#FFE8D9',
'orange-lighter': '#FFD0B5',
'orange-light': '#F9703E',
'orange': '#DE3A11',
'orange-dark': '#C52707',
'orange-darker': '#AD1D07',
'orange-darkest': '#841003',
'yellow-lightest': '#fbfae9', 'yellow-lightest': '#fbfae9',
'yellow-lighter': '#ede9a7', 'yellow-lighter': '#ede9a7',
@ -87,37 +89,21 @@ let colors = {
'green-darker': '#34681f', 'green-darker': '#34681f',
'green-darkest': '#1a3410', 'green-darkest': '#1a3410',
'teal-lightest': '#ecf7f5', 'blue-lightest': '#E6F6FF',
'teal-lighter': '#b3ded7', 'blue-lighter': '#BAE3FF',
'teal-light': '#7ac5ba', 'blue-light': '#2186EB',
'teal': '#41ac9c', 'blue': '#0552B5',
'teal-dark': '#3b9b8c', 'blue-dark': '#03449E',
'teal-darker': '#27675e', 'blue-darker': '#01337D',
'teal-darkest': '#14342f', 'blue-darkest': '#002159',
'blue-lightest': '#e7eef5', 'cyan-lightest': '#E1FCF8',
'blue-lighter': '#9fbad9', 'cyan-lighter': '#C1FEF6',
'blue-light': '#5886bc', 'cyan-light': '#62F4EB',
'blue': '#10529f', 'cyan': '#0FB5BA',
'blue-dark': '#0e4a8f', 'cyan-dark': '#099AA4',
'blue-darker': '#0a315f', 'cyan-darker': '#07818F',
'blue-darkest': '#051930', 'cyan-darkest': '#05606E',
'indigo-lightest': '#f0f1fa',
'indigo-lighter': '#c1c7eb',
'indigo-light': '#939edc',
'indigo': '#6574cd',
'indigo-dark': '#5b68b9',
'indigo-darker': '#3d467b',
'indigo-darkest': '#1e233e',
'purple-lightest': '#f6eaf5',
'purple-lighter': '#dcaad8',
'purple-light': '#c16bba',
'purple': '#a72b9d',
'purple-dark': '#96278d',
'purple-darker': '#641a5e',
'purple-darkest': '#320d2f',
}; };
module.exports = { module.exports = {
@ -188,11 +174,11 @@ module.exports = {
fonts: { fonts: {
'sans': [ 'sans': [
'"Source Sans Pro"',
'system-ui',
'BlinkMacSystemFont',
'-apple-system', '-apple-system',
'BlinkMacSystemFont',
'"Helvetica Neue"', '"Helvetica Neue"',
'"Roboto"',
'system-ui',
'sans-serif', 'sans-serif',
], ],
'serif': [ 'serif': [