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

Rearrange the navigation bar to be laid out more normally

Browse source
This commit is contained in:
Dane Everitt 2019-02-03 16:29:08 -08:00
parent 378a26a7c5
commit a28a9887c1
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 73 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
resources/assets/scripts/components/core/Navigation.ts
View file

@ -71,12 +71,24 @@ export default Vue.component('navigation', {
}, },
template: ` template: `
<div class="nav flex"> <div class="nav flex flex-grow">
<div class="logo flex-1"> <div class="flex flex-1 justify-center items-center container">
<div class="logo">
<router-link :to="{ name: 'dashboard' }"> <router-link :to="{ name: 'dashboard' }">
Pterodactyl Pterodactyl
</router-link> </router-link>
</div> </div>
<div class="menu flex-1">
<router-link :to="{ name: 'dashboard' }">
<icon name="server" aria-label="Server dashboard" class="h-4 self-center"/>
</router-link>
<router-link :to="{ name: 'account' }">
<icon name="user" aria-label="Profile management" class="h-4"/>
</router-link>
<a :href="this.route('admin.index')">
<icon name="settings" aria-label="Administrative controls" class="h-4"/>
</a>
</div>
<div class="search-box flex-none" v-if="$route.name !== 'dashboard'" ref="searchContainer"> <div class="search-box flex-none" v-if="$route.name !== 'dashboard'" ref="searchContainer">
<input type="text" class="search-input" id="searchInput" placeholder="Search..." <input type="text" class="search-input" id="searchInput" placeholder="Search..."
:class="{ 'has-search-results': ((servers.length > 0 && searchTerm.length >= 3) || loadingResults) && searchActive }" :class="{ 'has-search-results': ((servers.length > 0 && searchTerm.length >= 3) || loadingResults) && searchActive }"
@ -112,29 +124,11 @@ export default Vue.component('navigation', {
</div> </div>
</div> </div>
</div> </div>
<div class="menu flex-none"> <div class="menu">
<ul>
<li>
<router-link :to="{ name: 'dashboard' }">
<icon name="server" aria-label="Server dashboard" class="h-4"/>
</router-link>
</li>
<li>
<router-link :to="{ name: 'account' }">
<icon name="user" aria-label="Profile management" class="h-4"/>
</router-link>
</li>
<li>
<a :href="this.route('admin.index')">
<icon name="settings" aria-label="Administrative controls" class="h-4"/>
</a>
</li>
<li>
<a :href="this.route('auth.logout')" v-on:click.prevent="doLogout"> <a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
<icon name="log-out" aria-label="Sign out" class="h-4"/> <icon name="log-out" aria-label="Sign out" class="h-4"/>
</a> </a>
</li> </div>
</ul>
</div> </div>
</div> </div>
` `

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

@ -71,13 +71,13 @@ export default Vue.component('server', {
<div> <div>
<navigation></navigation> <navigation></navigation>
<flash class="m-6"/> <flash class="m-6"/>
<div v-if="loadingServerData"> <div v-if="loadingServerData" class="container">
<div class="mt-6 h-16"> <div class="mt-6 h-16">
<div class="spinner spinner-xl spinner-thick blue"></div> <div class="spinner spinner-xl spinner-thick blue"></div>
</div> </div>
</div> </div>
<div v-else> <div v-else class="container">
<div class="m-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 border-grey-lighter 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 border rounded">

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

@ -2,8 +2,8 @@
@apply .bg-blue .border-b .border-t .border-blue-darkest; @apply .bg-blue .border-b .border-t .border-blue-darkest;
height: 56px; height: 56px;
& > .logo { & .logo {
@apply .mx-8 .font-sans .font-thin .text-3xl .text-white .inline-block .pt-2; @apply .mr-8 .font-sans .font-thin .text-3xl .text-white .inline-block;
& a { & a {
color: inherit; color: inherit;
@ -15,11 +15,12 @@
} }
} }
& > .search-box { & .search-box {
@apply .mr-2;
& > .search-input { & > .search-input {
@apply .text-sm .p-2 .mt-3 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest; @apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest .w-96;
width: 26rem; opacity: 0.9;
opacity: 0.7;
transition: ease-in-out opacity 150ms; transition: ease-in-out opacity 150ms;
&:focus { &:focus {
@ -34,8 +35,7 @@
} }
& .search-results { & .search-results {
@apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .mx-3 .z-50; @apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
width: 26rem;
& a { & a {
@apply .block .no-underline .p-2 .rounded; @apply .block .no-underline .p-2 .rounded;
@ -47,29 +47,17 @@
} }
} }
& > .menu { & .menu {
& > ul { @apply .flex .h-full .items-center;
@apply .list-reset;
& > li {
@apply .inline-block;
& > a { & > a {
@apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm .p-5; @apply .block .flex .self-stretch .items-center .no-underline .text-grey-lighter .font-light .text-sm .px-5;
&:hover { &:hover {
@apply .bg-blue-dark; @apply .bg-blue-dark;
} }
} }
} }
}
@screen xsx {
@apply .w-full .text-center;
}
@screen sm {
@apply .float-right .mr-8 .inline-block;
}
}
} }
.sidenav { .sidenav {

6
resources/assets/styles/main.css
View file

@ -31,9 +31,3 @@
body { body {
@apply .font-sans; @apply .font-sans;
} }
.container {
@screen xsx {
@apply .px-2;
}
}

1
tailwind.js
View file

@ -454,6 +454,7 @@ module.exports = {
'32': '8rem', '32': '8rem',
'48': '12rem', '48': '12rem',
'64': '16rem', '64': '16rem',
'96': '24rem',
'1/2': '50%', '1/2': '50%',
'1/3': '33.33333%', '1/3': '33.33333%',
'2/3': '66.66667%', '2/3': '66.66667%',