Improve docs page ui

This commit is contained in:
BenRoe 2019-07-25 14:09:30 +02:00
parent 7e4c3882da
commit 5971b87628
2 changed files with 25 additions and 25 deletions

View File

@ -48,36 +48,36 @@
</div> </div>
<!-- /Sidebar Nav --> <!-- /Sidebar Nav -->
<!-- Content --> <!-- Content -->
<div class="w-full lg:w-4/5 lg:p-8 lg:mt-0 leading-normal bg-white lg:border-l border-gray-300"> <div class="w-full lg:w-4/5 lg:p-6 lg:mt-0 leading-normal bg-white">
<slot /> <slot />
<hr class="mt-10 border-b border-gray-400"> <!--Back link -->
<p> <div class="w-full lg:ml-auto mt-8 text-base">
<nav class="flex">
<div class="flex-grow text-left">
<g-link v-if="previousPage" :to="previousPage.link"
class="text-base md:text-sm font-bold text-gray-600">
<font-awesome :icon="['fas', 'caret-left']" class="mr-1"/>
{{ previousPage.title }}
</g-link>
</div>
<div class="flex-grow text-right">
<g-link v-if="nextPage" :to="nextPage.link"
class="text-base md:text-sm font-bold text-gray-600">
{{ nextPage.title }}
<font-awesome :icon="['fas', 'caret-right']" class="mr-1"/>
</g-link>
</div>
</nav>
</div>
<!-- /Content -->
<!-- <hr class="mb-6 border-b border-gray-400"> -->
<p class="mt-20">
<a :href="editLink" target="_blank"> <a :href="editLink" target="_blank">
<font-awesome :icon="['fab', 'github']" class="mr-1"/> <font-awesome :icon="['fab', 'github']" class="mr-1"/>
<span>Edit this page on GitHub</span> <span>Edit this page on GitHub</span>
</a> </a>
</p> </p>
</div> </div>
<!-- /Content -->
<!--Back link -->
<div class="w-full lg:w-4/5 lg:ml-auto text-base">
<nav class="flex">
<div class="flex-grow text-left pl-10 py-6">
<g-link v-if="previousPage" :to="previousPage.link"
class="text-base md:text-sm font-bold text-gray-400">
<span class="text-base font-bold">&lt;</span>
{{ previousPage.title }}
</g-link>
</div>
<div class="flex-grow text-right pr-8 py-6">
<g-link v-if="nextPage" :to="nextPage.link"
class="text-base md:text-sm font-bold text-gray-400">
{{ nextPage.title }}
<span class="text-base font-bold">&gt;</span>
</g-link>
</div>
</nav>
</div>
</Layout> </Layout>
</template> </template>

View File

@ -7,7 +7,7 @@ import DocsLayout from '~/layouts/Docs.vue'
import { config, library } from '@fortawesome/fontawesome-svg-core' import { config, library } from '@fortawesome/fontawesome-svg-core'
import { faGithub, faFontAwesome } from '@fortawesome/free-brands-svg-icons' import { faGithub, faFontAwesome } from '@fortawesome/free-brands-svg-icons'
import { faKeyboard, faRss } from '@fortawesome/free-solid-svg-icons' import { faKeyboard, faRss, faCaretLeft, faCaretRight } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import '@fortawesome/fontawesome-svg-core/styles.css' import '@fortawesome/fontawesome-svg-core/styles.css'
@ -15,7 +15,7 @@ import '~/assets/css/tailwind.css'
// Make sure you tell Font Awesome to skip auto-inserting CSS into the <head> // Make sure you tell Font Awesome to skip auto-inserting CSS into the <head>
config.autoAddCss = false config.autoAddCss = false
library.add(faGithub, faKeyboard, faRss) library.add(faGithub, faKeyboard, faRss, faCaretLeft, faCaretRight)
export default function (Vue, { router, head, isClient }) { export default function (Vue, { router, head, isClient }) {
// Set default layout as a global component // Set default layout as a global component