Skip to content

Commit a28a988

Browse files
DaneEverittDaneEveritt
committed
Rearrange the navigation bar to be laid out more normally
1 parent 378a26a commit a28a988

File tree

5 files changed

+73
-96
lines changed

5 files changed

+73
-96
lines changed

‎resources/assets/scripts/components/core/Navigation.ts‎

Lines changed: 54 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -71,70 +71,64 @@ export default Vue.component('navigation', {
7171
},
7272

7373
template: `
74-
<div class="nav flex">
75-
<div class="logo flex-1">
76-
<router-link :to="{ name: 'dashboard' }">
77-
Pterodactyl
78-
</router-link>
79-
</div>
80-
<div class="search-box flex-none" v-if="$route.name !== 'dashboard'" ref="searchContainer">
81-
<input type="text" class="search-input" id="searchInput" placeholder="Search..."
82-
:class="{ 'has-search-results': ((servers.length > 0 && searchTerm.length >= 3) || loadingResults) && searchActive }"
83-
v-on:focus="searchActive = true"
84-
v-on:input="search"
85-
v-model="searchTerm"
86-
/>
87-
<div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive || searchTerm.length < 3 }">
88-
<div v-if="loadingResults">
89-
<a href="#">
90-
<div class="flex items-center">
91-
<div class="flex-1">
92-
<span class="text-sm text-grey-darker">Loading...</span>
93-
</div>
94-
<div class="flex-none">
95-
<span class="spinner spinner-relative"></span>
96-
</div>
97-
</div>
98-
</a>
99-
</div>
100-
<div v-else v-for="server in servers" :key="server.identifier">
101-
<router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false">
102-
<div class="flex items-center">
103-
<div class="flex-1">
104-
<span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
105-
<span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
74+
<div class="nav flex flex-grow">
75+
<div class="flex flex-1 justify-center items-center container">
76+
<div class="logo">
77+
<router-link :to="{ name: 'dashboard' }">
78+
Pterodactyl
79+
</router-link>
80+
</div>
81+
<div class="menu flex-1">
82+
<router-link :to="{ name: 'dashboard' }">
83+
<icon name="server" aria-label="Server dashboard" class="h-4 self-center"/>
84+
</router-link>
85+
<router-link :to="{ name: 'account' }">
86+
<icon name="user" aria-label="Profile management" class="h-4"/>
87+
</router-link>
88+
<a :href="this.route('admin.index')">
89+
<icon name="settings" aria-label="Administrative controls" class="h-4"/>
90+
</a>
91+
</div>
92+
<div class="search-box flex-none" v-if="$route.name !== 'dashboard'" ref="searchContainer">
93+
<input type="text" class="search-input" id="searchInput" placeholder="Search..."
94+
:class="{ 'has-search-results': ((servers.length > 0 && searchTerm.length >= 3) || loadingResults) && searchActive }"
95+
v-on:focus="searchActive = true"
96+
v-on:input="search"
97+
v-model="searchTerm"
98+
/>
99+
<div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive || searchTerm.length < 3 }">
100+
<div v-if="loadingResults">
101+
<a href="#">
102+
<div class="flex items-center">
103+
<div class="flex-1">
104+
<span class="text-sm text-grey-darker">Loading...</span>
105+
</div>
106+
<div class="flex-none">
107+
<span class="spinner spinner-relative"></span>
108+
</div>
106109
</div>
107-
<div class="flex-none">
108-
<span class="pillbox bg-indigo">{{ server.node }}</span>
110+
</a>
111+
</div>
112+
<div v-else v-for="server in servers" :key="server.identifier">
113+
<router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false">
114+
<div class="flex items-center">
115+
<div class="flex-1">
116+
<span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
117+
<span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
118+
</div>
119+
<div class="flex-none">
120+
<span class="pillbox bg-indigo">{{ server.node }}</span>
121+
</div>
109122
</div>
110-
</div>
111-
</router-link>
123+
</router-link>
124+
</div>
112125
</div>
113126
</div>
114-
</div>
115-
<div class="menu flex-none">
116-
<ul>
117-
<li>
118-
<router-link :to="{ name: 'dashboard' }">
119-
<icon name="server" aria-label="Server dashboard" class="h-4"/>
120-
</router-link>
121-
</li>
122-
<li>
123-
<router-link :to="{ name: 'account' }">
124-
<icon name="user" aria-label="Profile management" class="h-4"/>
125-
</router-link>
126-
</li>
127-
<li>
128-
<a :href="this.route('admin.index')">
129-
<icon name="settings" aria-label="Administrative controls" class="h-4"/>
130-
</a>
131-
</li>
132-
<li>
133-
<a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
134-
<icon name="log-out" aria-label="Sign out" class="h-4"/>
135-
</a>
136-
</li>
137-
</ul>
127+
<div class="menu">
128+
<a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
129+
<icon name="log-out" aria-label="Sign out" class="h-4"/>
130+
</a>
131+
</div>
138132
</div>
139133
</div>
140134
`

‎resources/assets/scripts/components/server/Server.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,13 @@ export default Vue.component('server', {
7171
<div>
7272
<navigation></navigation>
7373
<flash class="m-6"/>
74-
<div v-if="loadingServerData">
74+
<div v-if="loadingServerData" class="container">
7575
<div class="mt-6 h-16">
7676
<div class="spinner spinner-xl spinner-thick blue"></div>
7777
</div>
7878
</div>
79-
<div v-else>
80-
<div class="m-6 flex flex-no-shrink rounded animate fadein">
79+
<div v-else class="container">
80+
<div class="my-6 flex flex-no-shrink rounded animate fadein">
8181
<div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
8282
<div class="mr-6">
8383
<div class="p-6 text-center bg-white border rounded">

‎resources/assets/styles/components/navigation.css‎

Lines changed: 15 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
@apply .bg-blue .border-b .border-t .border-blue-darkest;
33
height: 56px;
44

5-
& > .logo {
6-
@apply .mx-8 .font-sans .font-thin .text-3xl .text-white .inline-block .pt-2;
5+
& .logo {
6+
@apply .mr-8 .font-sans .font-thin .text-3xl .text-white .inline-block;
77

88
& a {
99
color: inherit;
@@ -15,11 +15,12 @@
1515
}
1616
}
1717

18-
& > .search-box {
18+
& .search-box {
19+
@apply .mr-2;
20+
1921
& > .search-input {
20-
@apply .text-sm .p-2 .mt-3 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest;
21-
width: 26rem;
22-
opacity: 0.7;
22+
@apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest .w-96;
23+
opacity: 0.9;
2324
transition: ease-in-out opacity 150ms;
2425

2526
&:focus {
@@ -34,8 +35,7 @@
3435
}
3536

3637
& .search-results {
37-
@apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .mx-3 .z-50;
38-
width: 26rem;
38+
@apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
3939

4040
& a {
4141
@apply .block .no-underline .p-2 .rounded;
@@ -47,27 +47,15 @@
4747
}
4848
}
4949

50-
& > .menu {
51-
& > ul {
52-
@apply .list-reset;
53-
& > li {
54-
@apply .inline-block;
55-
& > a {
56-
@apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm .p-5;
57-
58-
&:hover {
59-
@apply .bg-blue-dark;
60-
}
61-
}
62-
}
63-
}
50+
& .menu {
51+
@apply .flex .h-full .items-center;
6452

65-
@screen xsx {
66-
@apply .w-full .text-center;
67-
}
53+
& > a {
54+
@apply .block .flex .self-stretch .items-center .no-underline .text-grey-lighter .font-light .text-sm .px-5;
6855

69-
@screen sm {
70-
@apply .float-right .mr-8 .inline-block;
56+
&:hover {
57+
@apply .bg-blue-dark;
58+
}
7159
}
7260
}
7361
}

‎resources/assets/styles/main.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,3 @@
3131
body {
3232
@apply .font-sans;
3333
}
34-
35-
.container {
36-
@screen xsx {
37-
@apply .px-2;
38-
}
39-
}

‎tailwind.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -454,6 +454,7 @@ module.exports = {
454454
'32': '8rem',
455455
'48': '12rem',
456456
'64': '16rem',
457+
'96': '24rem',
457458
'1/2': '50%',
458459
'1/3': '33.33333%',
459460
'2/3': '66.66667%',

0 commit comments

Comments
 (0)