pterodactyl/documentation
1
0
Fork 0
mirror of https://github.com/pterodactyl/documentation.git synced 2025-12-11 14:00:27 -06:00
Code Issues Packages Projects Releases Wiki Activity

FIx up the navigation (breaks logo currently)

Browse Source
This commit is contained in:
Dane Everitt 2018-07-26 20:15:03 -07:00
parent d165db78de
commit 27f860880b
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
3 changed files with 66 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.vuepress/theme/Navbar.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<header class="nav"> <header class="nav">
<SidebarButton class="block md:hidden flex-no-shrink" @toggle-sidebar="$emit('toggle-sidebar')"/> <SidebarButton class="block md:hidden flex-no-shrink" @toggle-sidebar="$emit('toggle-sidebar')"/>
<div class="logo-container">
<router-link :to="$localePath" class="home-link"> <router-link :to="$localePath" class="home-link">
<img class="logo" <img class="logo"
v-if="$site.themeConfig.logo" v-if="$site.themeConfig.logo"
@ -11,9 +12,13 @@
{{ $siteTitle }} {{ $siteTitle }}
</span> </span>
</router-link> </router-link>
<div class="flex-grow"></div> </div>
<div class="w-full">
<div class="flex">
<SearchBox/> <SearchBox/>
<NavLinks class="hidden md:flex"/> <NavLinks class="hidden md:flex"/>
</div>
</div>
</header> </header>
</template> </template>

8
.vuepress/theme/SearchBox.vue
View File

@ -12,10 +12,9 @@
@keyup.enter="go(focusIndex)" @keyup.enter="go(focusIndex)"
@keyup.up="onUp" @keyup.up="onUp"
@keyup.down="onDown"> @keyup.down="onDown">
<ul class="suggestions" <div class="suggestion-container" v-if="showSuggestions" @mouseleave="unfocus">
v-if="showSuggestions" <div class="suggestion-padding"></div>
:class="{ 'align-right': alignRight }" <ul class="suggestions" :class="{ 'align-right': alignRight }">
@mouseleave="unfocus">
<li class="suggestion" v-for="(s, i) in suggestions" <li class="suggestion" v-for="(s, i) in suggestions"
:class="{ focused: i === focusIndex }" :class="{ focused: i === focusIndex }"
@mousedown="go(i)" @mousedown="go(i)"
@ -27,6 +26,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
</template> </template>
<script> <script>

30
.vuepress/theme/styles/nav.css
View File

@ -1,5 +1,5 @@
.nav { .nav {
@apply .fixed .w-full .flex .bg-blue .font-sans .border-b .border-t .border-blue-darker .px-6 .text-sm .z-20; @apply .fixed .w-full .bg-blue .font-sans .border-b .border-t .border-blue-darker .px-6 .text-sm .z-20 .flex;
height: 56px; height: 56px;
line-height: 54px; line-height: 54px;
@ -11,37 +11,48 @@
} }
} }
.logo-container {
width: 23rem; /* sidebar is 20rem + 1.5rem padding on each side for nav */
}
.home-link { .home-link {
@apply .block .text-white .font-light .flex-no-shrink .mr-6; @apply .block .text-white .font-light .mr-6 .flex-none .w-auto;
.logo { .logo {
@apply .h-full .float-left; @apply .h-12;
} }
.site-name { .site-name {
@apply .float-left .pl-2 .text-2xl; @apply .pl-2 .text-2xl;
} }
} }
.search-box { .search-box {
@apply .relative .px-2 .w-full .text-right; @apply .relative .pr-4 .w-full .text-right .flex-1;
input { input {
transition: all 200ms ease-in; transition: all 200ms ease-in;
@apply .text-grey-lighter .w-2/3 .outline-none .px-4 .py-2 .rounded; @apply .text-grey-lighter .w-1/2 .outline-none .px-4 .py-2 .rounded;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.3);
&:active, &:focus { &:active, &:focus {
@apply .w-full; @apply .w-2/3;
transition: all 200ms ease-in; transition: all 200ms ease-in;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 0, 0, 0.7) border: 1px solid rgba(0, 0, 0, 0.7)
} }
} }
.suggestion-container {
@apply .w-full;
.suggestion-padding {
@apply .w-1/3 .inline-block;
}
.suggestions { .suggestions {
@apply .bg-white .rounded .border .p-2 .text-left .w-full; @apply .bg-white .rounded .border .p-2 .text-left .w-2/3 .inline-block;
margin-top: -0.3rem; margin-top: -0.3rem;
list-style: none; list-style: none;
@ -63,8 +74,11 @@
} }
} }
} }
}
.nav-links { .nav-links {
@apply .flex-initial;
.nav-link { .nav-link {
@apply .text-grey-lighter .ml-6 .font-normal; @apply .text-grey-lighter .ml-6 .font-normal;