pterodactyl/documentation
1
0
Fork 0
mirror of https://github.com/pterodactyl/documentation.git synced 2025-12-10 00:09:39 -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>
<header class="nav">
<SidebarButton class="block md:hidden flex-no-shrink" @toggle-sidebar="$emit('toggle-sidebar')"/>
<router-link :to="$localePath" class="home-link">
<img class="logo"
v-if="$site.themeConfig.logo"
:src="$withBase($site.themeConfig.logo)">
<span class="site-name"
v-if="$siteTitle"
:class="{ 'can-hide': $site.themeConfig.logo }">
<div class="logo-container">
<router-link :to="$localePath" class="home-link">
<img class="logo"
v-if="$site.themeConfig.logo"
:src="$withBase($site.themeConfig.logo)">
<span class="site-name"
v-if="$siteTitle"
:class="{ 'can-hide': $site.themeConfig.logo }">
{{ $siteTitle }}
</span>
</router-link>
<div class="flex-grow"></div>
<SearchBox/>
<NavLinks class="hidden md:flex"/>
</router-link>
</div>
<div class="w-full">
<div class="flex">
<SearchBox/>
<NavLinks class="hidden md:flex"/>
</div>
</div>
</header>
</template>
@ -66,4 +71,4 @@ export default {
padding-left 4rem
.can-hide
display none
</style>-->
</style>-->

28
.vuepress/theme/SearchBox.vue
View File

@ -12,20 +12,20 @@
@keyup.enter="go(focusIndex)"
@keyup.up="onUp"
@keyup.down="onDown">
<ul class="suggestions"
v-if="showSuggestions"
:class="{ 'align-right': alignRight }"
@mouseleave="unfocus">
<li class="suggestion" v-for="(s, i) in suggestions"
:class="{ focused: i === focusIndex }"
@mousedown="go(i)"
@mouseenter="focus(i)">
<a :href="s.path" @click.prevent>
<span class="page-title">{{ s.title || s.path }}</span>
<span v-if="s.header" class="header">&gt; {{ s.header.title }}</span>
</a>
</li>
</ul>
<div class="suggestion-container" v-if="showSuggestions" @mouseleave="unfocus">
<div class="suggestion-padding"></div>
<ul class="suggestions" :class="{ 'align-right': alignRight }">
<li class="suggestion" v-for="(s, i) in suggestions"
:class="{ focused: i === focusIndex }"
@mousedown="go(i)"
@mouseenter="focus(i)">
<a :href="s.path" @click.prevent>
<span class="page-title">{{ s.title || s.path }}</span>
<span v-if="s.header" class="header">&gt; {{ s.header.title }}</span>
</a>
</li>
</ul>
</div>
</div>
</template>

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

@ -1,5 +1,5 @@
.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;
line-height: 54px;
@ -11,60 +11,74 @@
}
}
.logo-container {
width: 23rem; /* sidebar is 20rem + 1.5rem padding on each side for nav */
}
.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 {
@apply .h-full .float-left;
@apply .h-12;
}
.site-name {
@apply .float-left .pl-2 .text-2xl;
@apply .pl-2 .text-2xl;
}
}
.search-box {
@apply .relative .px-2 .w-full .text-right;
@apply .relative .pr-4 .w-full .text-right .flex-1;
input {
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);
border: 1px solid rgba(0, 0, 0, 0.3);
&:active, &:focus {
@apply .w-full;
@apply .w-2/3;
transition: all 200ms ease-in;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 0, 0, 0.7)
}
}
.suggestions {
@apply .bg-white .rounded .border .p-2 .text-left .w-full;
margin-top: -0.3rem;
list-style: none;
.suggestion-container {
@apply .w-full;
& > li > a {
@apply .p-2 .block;
.suggestion-padding {
@apply .w-1/3 .inline-block;
}
&:hover {
@apply .rounded .bg-grey-lighter .no-underline .text-blue-dark;
.suggestions {
@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 {
@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 {
@apply .flex-initial;
.nav-link {
@apply .text-grey-lighter .ml-6 .font-normal;