mirror of
https://github.com/aelve/guide.git
synced 2024-12-24 13:26:08 +03:00
Added anchors for category items
This commit is contained in:
parent
c5c9629ecb
commit
c2dd7f23dc
@ -13,13 +13,19 @@
|
||||
@click.stop=""
|
||||
>
|
||||
<v-toolbar-title class="headline">
|
||||
<!-- TODO change markup formatting after resolving issue with extra spaces
|
||||
(if closing tag on another line vue-template-compiler adds extra space) -->
|
||||
<router-link
|
||||
:to="{path: $route.path, hash:`item-${itemUid}`}"
|
||||
:id="`item-${itemUid}`"
|
||||
class="category-item-anchor"
|
||||
>#</router-link>
|
||||
<a-link
|
||||
v-if="itemLink"
|
||||
:url="itemLink"
|
||||
openInNewTab
|
||||
>
|
||||
{{ itemName }}
|
||||
</a-link>
|
||||
{{ itemName }}</a-link>
|
||||
<span v-else> {{ itemName }} </span>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
@ -162,6 +168,9 @@ export default class CategoryItemToolbar extends Vue {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.category-item-anchor {
|
||||
color: rgb(151, 151, 151);
|
||||
}
|
||||
.edit-item-info-changed-icon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
@ -20,6 +20,12 @@ router.onReady(() => {
|
||||
|
||||
function registerBeforeResolve () {
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
// This case handles navigation to anchors on same page
|
||||
if (to.path === from.path) {
|
||||
next()
|
||||
return
|
||||
}
|
||||
|
||||
store.commit('tooglePageLoading')
|
||||
if (!to.matched.length) {
|
||||
store.commit('tooglePageLoading')
|
||||
|
@ -6,11 +6,12 @@ function createRouter () {
|
||||
fallback: false,
|
||||
// TODO update vue-router when scroll issue will be fixed
|
||||
// https://github.com/vuejs/vue-router/issues/2095
|
||||
scrollBehavior: (to, from, savedPosition) => {
|
||||
// https://github.com/vuejs/vue-router/issues/1668
|
||||
scrollBehavior (to, from, savedPosition) {
|
||||
if (savedPosition) {
|
||||
return savedPosition
|
||||
} else if (to.hash) {
|
||||
return { selector: to.hash }
|
||||
return { selector: to.hash, offset: { y: 96, x: 0 } }
|
||||
} else {
|
||||
return { x: 0, y: 0 }
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user