pterodactyl/documentation
1
0
Fork 0
mirror of https://github.com/pterodactyl/documentation.git synced 2025-12-10 10:44:43 -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

29
.vuepress/theme/Navbar.vue
View File

@ -1,19 +1,24 @@
<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')"/>
<router-link :to="$localePath" class="home-link"> <div class="logo-container">
<img class="logo" <router-link :to="$localePath" class="home-link">
v-if="$site.themeConfig.logo" <img class="logo"
:src="$withBase($site.themeConfig.logo)"> v-if="$site.themeConfig.logo"
<span class="site-name" :src="$withBase($site.themeConfig.logo)">
v-if="$siteTitle" <span class="site-name"
:class="{ 'can-hide': $site.themeConfig.logo }"> v-if="$siteTitle"
:class="{ 'can-hide': $site.themeConfig.logo }">
{{ $siteTitle }} {{ $siteTitle }}
</span> </span>
</router-link> </router-link>
<div class="flex-grow"></div> </div>
<SearchBox/> <div class="w-full">
<NavLinks class="hidden md:flex"/> <div class="flex">
<SearchBox/>
<NavLinks class="hidden md:flex"/>
</div>
</div>
</header> </header>
</template> </template>
@ -66,4 +71,4 @@ export default {
padding-left 4rem padding-left 4rem
.can-hide .can-hide
display none display none
</style>--> </style>-->

28
.vuepress/theme/SearchBox.vue
View File

@ -12,20 +12,20 @@
@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)" @mouseenter="focus(i)">
@mouseenter="focus(i)"> <a :href="s.path" @click.prevent>
<a :href="s.path" @click.prevent> <span class="page-title">{{ s.title || s.path }}</span>
<span class="page-title">{{ s.title || s.path }}</span> <span v-if="s.header" class="header">&gt; {{ s.header.title }}</span>
<span v-if="s.header" class="header">&gt; {{ s.header.title }}</span> </a>
</a> </li>
</li> </ul>
</ul> </div>
</div> </div>
</template> </template>

56
.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,60 +11,74 @@
} }
} }
.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)
} }
} }
.suggestions { .suggestion-container {
@apply .bg-white .rounded .border .p-2 .text-left .w-full; @apply .w-full;
margin-top: -0.3rem;
list-style: none;
& > li > a { .suggestion-padding {
@apply .p-2 .block; @apply .w-1/3 .inline-block;
}
&:hover { .suggestions {
@apply .rounded .bg-grey-lighter .no-underline .text-blue-dark; @apply .bg-white .rounded .border .p-2 .text-left .w-2/3 .inline-block;
margin-top: -0.3rem;
list-style: none;
& > li > a {
@apply .p-2 .block;
&:hover {
@apply .rounded .bg-grey-lighter .no-underline .text-blue-dark;
& > .header {
@apply .text-grey-dark;
}
}
& > .header { & > .header {
@apply .text-grey-dark; @apply .text-grey .font-normal .pl-1;
font-size: 0.9em;
} }
} }
& > .header {
@apply .text-grey .font-normal .pl-1;
font-size: 0.9em;
}
} }
} }
} }
.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;