Skip to content
Permalink
Browse files

Doc page nav (#3154)

* updated docs page to separate related and nav links

* Update DocPage.vue
  • Loading branch information...
rossity authored and rstoenescu committed Feb 5, 2019
1 parent 6ea677b commit 36301e5759331567f9786c11085988a73508de57
Showing with 33 additions and 10 deletions.
  1. +1 −0 .gitignore
  2. +32 −10 docs/src/components/DocPage.vue
@@ -4,3 +4,4 @@
.idea/
debug.log
package-lock.json
.vscode/settings.json
@@ -9,18 +9,38 @@ q-page.doc-page

slot

.doc-page-nav.doc-page-padding.text-primary(v-if="related !== void 0")
.doc-page-nav.doc-page-padding.text-primary.q-pb-lg(v-if="related !== void 0")
.text-h6.q-pb-md Related
.q-gutter-md.flex
router-link.q-link.doc-page-related.rounded-borders.q-pa-md.cursor-pointer.column.justify-center.shadow-2.bg-grey-4(
v-for="(link, index) in related"
:key="link.category + link.path"
:to="link.path"
target="_blank"
)
.row.items-center
.col
.doc-page-nav__categ.text-uppercase {{ link.category || 'Docs' }}
.doc-page-nav__name.text-weight-bold {{ link.name }}

.col-auto.q-pl-lg
q-icon(name="launch")

.doc-page-nav.doc-page-padding.text-primary.q-pb-xl(v-if="nav !== void 0")
.text-h6.q-pb-md Ready for more?
.q-gutter-sm.flex.items-stretch
router-link.relative-position.q-link.doc-page-related.rounded-borders.q-pa-md.cursor-pointer.column.justify-center(
v-for="link in related"
.q-gutter-md.flex
router-link.q-link.doc-page-related.rounded-borders.q-pa-md.cursor-pointer.column.justify-center.shadow-2(
v-for="(link, index) in nav"
:key="link.category + link.path"
:to="link.path"
)
q-icon.absolute(v-if="link.dir !== void 0", :name="`chevron_${link.dir}`")
.row.items-center
.col-auto(:class="index ? 'order-last q-pl-md' : 'order-first q-pr-md'")
q-icon(v-if="link.dir !== void 0", :name="`chevron_${link.dir}`")

.doc-page-nav__categ.text-uppercase.q-pr-lg {{ link.category || 'Docs' }}
.doc-page-nav__name.text-weight-bold {{ link.name }}
.col
.doc-page-nav__categ.text-uppercase {{ link.category || 'Docs' }}
.doc-page-nav__name.text-weight-bold {{ link.name }}

.doc-edit-link
| Caught a mistake? <doc-link :to="editHref">Suggest an edit on Github</doc-link>
@@ -35,7 +55,8 @@ export default {
props: {
title: String,
related: Array
related: Array,
nav: Array
},
computed: {
@@ -73,7 +94,6 @@ export default {
margin 48px 0 12px
.doc-page-related
background-color $grey-4
color $grey-9
transition background-color .28s, color .28s
@@ -85,11 +105,13 @@ export default {
margin 68px 0 12px
.q-icon
font-size 1.5em
font-size 1.75em
top 12px
right 10px
&__categ
font-size .8em
&__name
font-size 1em
</style>

0 comments on commit 36301e5

Please sign in to comment.
You can’t perform that action at this time.