pterodactyl/documentation
1
0
Fork 0
mirror of https://github.com/pterodactyl/documentation.git synced 2025-12-10 09:17:40 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add banner

Browse Source
This commit is contained in:
Dane Everitt 2022-03-06 10:27:50 -05:00
parent eeb8544b14
commit 2f1669a7a8
2 changed files with 58 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
.vuepress/theme/Layout.vue
View File

@ -1,35 +1,46 @@
<template> <template>
<div <div>
class="theme-container" <div class="fixed h-12 w-full z-50 top-0">
:class="pageClasses" <div class="h-12 w-full bg-black flex items-center justify-center px-4">
@touchstart="onTouchStart" <p class="text-grey-lightest font-semibold">
@touchend="onTouchEnd" Stand with Ukraine 🇺🇦&nbsp;
> <a class="text-blue-lighter" href="https://www.savethechildren.org/us/where-we-work/ukraine" target="_blank" rel="noindex nofollow noopener">Donate</a>
<Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" /> <a class="text-blue-lighter" href="https://razomforukraine.org/" target="_blank" rel="noindex nofollow noopener">Today.</a>
<div class="sidebar-mask" @click="toggleSidebar(false)"></div> </p>
<Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar"> </div>
<slot name="sidebar-top" slot="top" /> </div>
<slot name="sidebar-bottom" slot="bottom" /> <div
</Sidebar> class="theme-container mt-12"
<div class="custom-layout" v-if="$page.frontmatter.layout"> :class="pageClasses"
<component :is="$page.frontmatter.layout" /> @touchstart="onTouchStart"
@touchend="onTouchEnd"
>
<Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar"/>
<div class="sidebar-mask" @click="toggleSidebar(false)"></div>
<Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
<slot name="sidebar-top" slot="top"/>
<slot name="sidebar-bottom" slot="bottom"/>
</Sidebar>
<div class="custom-layout" v-if="$page.frontmatter.layout">
<component :is="$page.frontmatter.layout"/>
</div>
<Home v-else-if="$page.frontmatter.home"/>
<Page v-else :sidebar-items="sidebarItems">
<slot name="page-top" slot="top"/>
<slot name="page-bottom" slot="bottom"/>
</Page>
</div> </div>
<Home v-else-if="$page.frontmatter.home" />
<Page v-else :sidebar-items="sidebarItems">
<slot name="page-top" slot="top" />
<slot name="page-bottom" slot="bottom" />
</Page>
</div> </div>
</template> </template>
<script> <script>
import Vue from "vue"; import Vue from 'vue';
import nprogress from "nprogress"; import nprogress from 'nprogress';
import Home from "./Home.vue"; import Home from './Home.vue';
import Navbar from "./Navbar.vue"; import Navbar from './Navbar.vue';
import Page from "./Page.vue"; import Page from './Page.vue';
import Sidebar from "./Sidebar.vue"; import Sidebar from './Sidebar.vue';
import { resolveSidebarItems } from "./util"; import { resolveSidebarItems } from './util';
export default { export default {
components: { Home, Page, Sidebar, Navbar }, components: { Home, Page, Sidebar, Navbar },
@ -47,37 +58,37 @@ export default {
return false; return false;
} }
return ( return (
this.$title || this.$title ||
themeConfig.logo || themeConfig.logo ||
themeConfig.repo || themeConfig.repo ||
themeConfig.nav || themeConfig.nav ||
this.$themeLocaleConfig.nav this.$themeLocaleConfig.nav
); );
}, },
shouldShowSidebar() { shouldShowSidebar() {
const { frontmatter } = this.$page; const { frontmatter } = this.$page;
return ( return (
!frontmatter.layout && !frontmatter.layout &&
!frontmatter.home && !frontmatter.home &&
frontmatter.sidebar !== false && frontmatter.sidebar !== false &&
this.sidebarItems.length this.sidebarItems.length
); );
}, },
sidebarItems() { sidebarItems() {
return resolveSidebarItems( return resolveSidebarItems(
this.$page, this.$page,
this.$route, this.$route,
this.$site, this.$site,
this.$localePath this.$localePath
); );
}, },
pageClasses() { pageClasses() {
const userPageClass = this.$page.frontmatter.pageClass; const userPageClass = this.$page.frontmatter.pageClass;
return [ return [
{ {
"no-navbar": !this.shouldShowNavbar, 'no-navbar': !this.shouldShowNavbar,
"sidebar-open": this.isSidebarOpen, 'sidebar-open': this.isSidebarOpen,
"no-sidebar": !this.shouldShowSidebar 'no-sidebar': !this.shouldShowSidebar
}, },
userPageClass userPageClass
]; ];
@ -85,7 +96,7 @@ export default {
}, },
mounted() { mounted() {
window.addEventListener("scroll", this.onScroll); window.addEventListener('scroll', this.onScroll);
// configure progress bar // configure progress bar
nprogress.configure({ showSpinner: false }); nprogress.configure({ showSpinner: false });
@ -105,7 +116,7 @@ export default {
methods: { methods: {
toggleSidebar(to) { toggleSidebar(to) {
this.isSidebarOpen = typeof to === "boolean" ? to : !this.isSidebarOpen; this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen;
}, },
// side swipe // side swipe
onTouchStart(e) { onTouchStart(e) {

6
.vuepress/theme/styles/sidebar.css
View File

@ -6,7 +6,7 @@ $arrow-bg: #000;
} }
@apply .fixed .left-0 .bottom-0 .bg-white .overflow-auto .border-r .border-grey-lighter .py-8; @apply .fixed .left-0 .bottom-0 .bg-white .overflow-auto .border-r .border-grey-lighter .py-8;
top: 56px; top: calc(3rem + 56px);
width: 20rem; width: 20rem;
font-size: 15px; font-size: 15px;
@ -116,14 +116,14 @@ $arrow-bg: #000;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-top: 6px solid #b8c2cc; border-top: 6px solid #b8c2cc;
} }
} }
.items { .items {
@apply .absolute .right-0 .bg-white .shadow .p-1 .mt-1; @apply .absolute .right-0 .bg-white .shadow .p-1 .mt-1;
border-radius: 1rem; border-radius: 1rem;
z-index: 100; z-index: 100;
.item { .item {
@apply .select-none .rounded-full .cursor-pointer .px-2 .border .border-white; @apply .select-none .rounded-full .cursor-pointer .px-2 .border .border-white;
white-space: nowrap; white-space: nowrap;