StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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
Download patch file Download diff file Expand all files Collapse all files

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

@ -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>
`

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

@ -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">