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: `
|
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">
|
||||||
<router-link :to="{ name: 'dashboard' }">
|
<div class="logo">
|
||||||
Pterodactyl
|
<router-link :to="{ name: 'dashboard' }">
|
||||||
</router-link>
|
Pterodactyl
|
||||||
</div>
|
</router-link>
|
||||||
<div class="search-box flex-none" v-if="$route.name !== 'dashboard'" ref="searchContainer">
|
</div>
|
||||||
<input type="text" class="search-input" id="searchInput" placeholder="Search..."
|
<div class="menu flex-1">
|
||||||
:class="{ 'has-search-results': ((servers.length > 0 && searchTerm.length >= 3) || loadingResults) && searchActive }"
|
<router-link :to="{ name: 'dashboard' }">
|
||||||
v-on:focus="searchActive = true"
|
<icon name="server" aria-label="Server dashboard" class="h-4 self-center"/>
|
||||||
v-on:input="search"
|
</router-link>
|
||||||
v-model="searchTerm"
|
<router-link :to="{ name: 'account' }">
|
||||||
/>
|
<icon name="user" aria-label="Profile management" class="h-4"/>
|
||||||
<div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive || searchTerm.length < 3 }">
|
</router-link>
|
||||||
<div v-if="loadingResults">
|
<a :href="this.route('admin.index')">
|
||||||
<a href="#">
|
<icon name="settings" aria-label="Administrative controls" class="h-4"/>
|
||||||
<div class="flex items-center">
|
</a>
|
||||||
<div class="flex-1">
|
</div>
|
||||||
<span class="text-sm text-grey-darker">Loading...</span>
|
<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>
|
||||||
<div class="flex-none">
|
</a>
|
||||||
<span class="spinner spinner-relative"></span>
|
</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>
|
||||||
</div>
|
</router-link>
|
||||||
</a>
|
</div>
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="menu">
|
||||||
<div class="menu flex-none">
|
<a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
|
||||||
<ul>
|
<icon name="log-out" aria-label="Sign out" class="h-4"/>
|
||||||
<li>
|
</a>
|
||||||
<router-link :to="{ name: 'dashboard' }">
|
</div>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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,28 +47,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > .menu {
|
& .menu {
|
||||||
& > ul {
|
@apply .flex .h-full .items-center;
|
||||||
@apply .list-reset;
|
|
||||||
& > li {
|
|
||||||
@apply .inline-block;
|
|
||||||
& > a {
|
|
||||||
@apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm .p-5;
|
|
||||||
|
|
||||||
&:hover {
|
& > a {
|
||||||
@apply .bg-blue-dark;
|
@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 {
|
body {
|
||||||
@apply .font-sans;
|
@apply .font-sans;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
|
||||||
@screen xsx {
|
|
||||||
@apply .px-2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -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%',
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue