Rearrange the navigation bar to be laid out more normally
This commit is contained in:
Dane Everitt
parent
378a26a7c5
commit
a28a9887c1
5 changed files with 73 additions and 96 deletions
|
|
@ -71,70 +71,64 @@ export default Vue.component('navigation', {
|
|||
},
|
||||
|
||||
template: `
|
||||
<div class="nav flex">
|
||||
<div class="logo flex-1">
|
||||
<router-link :to="{ name: 'dashboard' }">
|
||||
Pterodactyl
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="search-box flex-none" v-if="$route.name !== 'dashboard'" ref="searchContainer">
|
||||
<input type="text" class="search-input" id="searchInput" placeholder="Search..."
|
||||
:class="{ 'has-search-results': ((servers.length > 0 && searchTerm.length >= 3) || loadingResults) && searchActive }"
|
||||
v-on:focus="searchActive = true"
|
||||
v-on:input="search"
|
||||
v-model="searchTerm"
|
||||
/>
|
||||
<div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive || searchTerm.length < 3 }">
|
||||
<div v-if="loadingResults">
|
||||
<a href="#">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<span class="text-sm text-grey-darker">Loading...</span>
|
||||
<div class="nav flex flex-grow">
|
||||
<div class="flex flex-1 justify-center items-center container">
|
||||
<div class="logo">
|
||||
<router-link :to="{ name: 'dashboard' }">
|
||||
Pterodactyl
|
||||
</router-link>
|
||||
</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">
|
||||
<input type="text" class="search-input" id="searchInput" placeholder="Search..."
|
||||
:class="{ 'has-search-results': ((servers.length > 0 && searchTerm.length >= 3) || loadingResults) && searchActive }"
|
||||
v-on:focus="searchActive = true"
|
||||
v-on:input="search"
|
||||
v-model="searchTerm"
|
||||
/>
|
||||
<div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive || searchTerm.length < 3 }">
|
||||
<div v-if="loadingResults">
|
||||
<a href="#">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<span class="text-sm text-grey-darker">Loading...</span>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<span class="spinner spinner-relative"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<span class="spinner spinner-relative"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div v-else v-for="server in servers" :key="server.identifier">
|
||||
<router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
|
||||
<span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<span class="pillbox bg-indigo">{{ server.node }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div v-else v-for="server in servers" :key="server.identifier">
|
||||
<router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
|
||||
<span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<span class="pillbox bg-indigo">{{ server.node }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu flex-none">
|
||||
<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">
|
||||
<icon name="log-out" aria-label="Sign out" class="h-4"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="menu">
|
||||
<a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
|
||||
<icon name="log-out" aria-label="Sign out" class="h-4"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -71,13 +71,13 @@ export default Vue.component('server', {
|
|||
<div>
|
||||
<navigation></navigation>
|
||||
<flash class="m-6"/>
|
||||
<div v-if="loadingServerData">
|
||||
<div v-if="loadingServerData" class="container">
|
||||
<div class="mt-6 h-16">
|
||||
<div class="spinner spinner-xl spinner-thick blue"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="m-6 flex flex-no-shrink rounded animate fadein">
|
||||
<div v-else class="container">
|
||||
<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="mr-6">
|
||||
<div class="p-6 text-center bg-white border rounded">
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
@apply .bg-blue .border-b .border-t .border-blue-darkest;
|
||||
height: 56px;
|
||||
|
||||
& > .logo {
|
||||
@apply .mx-8 .font-sans .font-thin .text-3xl .text-white .inline-block .pt-2;
|
||||
& .logo {
|
||||
@apply .mr-8 .font-sans .font-thin .text-3xl .text-white .inline-block;
|
||||
|
||||
& a {
|
||||
color: inherit;
|
||||
|
|
@ -15,11 +15,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
& > .search-box {
|
||||
& .search-box {
|
||||
@apply .mr-2;
|
||||
|
||||
& > .search-input {
|
||||
@apply .text-sm .p-2 .mt-3 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest;
|
||||
width: 26rem;
|
||||
opacity: 0.7;
|
||||
@apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest .w-96;
|
||||
opacity: 0.9;
|
||||
transition: ease-in-out opacity 150ms;
|
||||
|
||||
&:focus {
|
||||
|
|
@ -34,8 +35,7 @@
|
|||
}
|
||||
|
||||
& .search-results {
|
||||
@apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .mx-3 .z-50;
|
||||
width: 26rem;
|
||||
@apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
|
||||
|
||||
& a {
|
||||
@apply .block .no-underline .p-2 .rounded;
|
||||
|
|
@ -47,28 +47,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
& > .menu {
|
||||
& > ul {
|
||||
@apply .list-reset;
|
||||
& > li {
|
||||
@apply .inline-block;
|
||||
& > a {
|
||||
@apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm .p-5;
|
||||
& .menu {
|
||||
@apply .flex .h-full .items-center;
|
||||
|
||||
&:hover {
|
||||
@apply .bg-blue-dark;
|
||||
}
|
||||
}
|
||||
& > a {
|
||||
@apply .block .flex .self-stretch .items-center .no-underline .text-grey-lighter .font-light .text-sm .px-5;
|
||||
|
||||
&:hover {
|
||||
@apply .bg-blue-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@screen xsx {
|
||||
@apply .w-full .text-center;
|
||||
}
|
||||
|
||||
@screen sm {
|
||||
@apply .float-right .mr-8 .inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,9 +31,3 @@
|
|||
body {
|
||||
@apply .font-sans;
|
||||
}
|
||||
|
||||
.container {
|
||||
@screen xsx {
|
||||
@apply .px-2;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -454,6 +454,7 @@ module.exports = {
|
|||
'32': '8rem',
|
||||
'48': '12rem',
|
||||
'64': '16rem',
|
||||
'96': '24rem',
|
||||
'1/2': '50%',
|
||||
'1/3': '33.33333%',
|
||||
'2/3': '66.66667%',
|
||||
|
|
|
|||
Loading…
Reference in a new issue