ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Improve dynamic module navigation, add anchors

This commit is contained in:
Ramon Wenger 2018-10-04 20:06:22 +02:00
parent 6a57b35251
commit a204de4098
3 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/Chapter.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="chapter"> <div class="chapter">
<h3>{{chapter.title}}</h3> <h3 :id="'chapter-' + index">{{chapter.title}}</h3>
<p> <p>
{{chapter.description}} {{chapter.description}}
@ -19,7 +19,7 @@
import AddContentBlockButton from '@/components/AddContentBlockButton'; import AddContentBlockButton from '@/components/AddContentBlockButton';
export default { export default {
props: ['chapter'], props: ['chapter', 'index'],
components: { components: {
ContentBlock, ContentBlock,

2
client/src/components/modules/Module.vue
View File

@ -10,7 +10,7 @@
<h3 id="objectives">Lernziele</h3> <h3 id="objectives">Lernziele</h3>
<objective-group v-for="group in module.objectiveGroups" :key="group.id" :group="group"></objective-group> <objective-group v-for="group in module.objectiveGroups" :key="group.id" :group="group"></objective-group>
<chapter :chapter="chapter" v-for="chapter in module.chapters" :key="chapter.id"></chapter> <chapter :chapter="chapter" :index="index" v-for="(chapter, index) in module.chapters" :key="chapter.id"></chapter>
</div> </div>
</template> </template>

45
client/src/components/modules/ModuleNavigation.vue
View File

@ -1,32 +1,26 @@
<template> <template>
<div> <div>
<nav class="module-navigation"> <nav class="module-navigation">
<h3 class="module-navigation__heading">Inhalte: Modul 1</h3> <h3 class="module-navigation__heading">Inhalte: {{module.metaTitle}}</h3>
<div class="module-navigation__anchors"> <div class="module-navigation__anchors">
<a href="#" class="module-navigation__anchor module-navigation__anchor--active">Einleitung</a> <a href="#" class="module-navigation__anchor module-navigation__anchor--active">Einleitung</a>
<a href="#" v-scroll-to="'#objectives'" class="module-navigation__anchor">Lernziele</a> <a href="#" v-scroll-to="'#objectives'" class="module-navigation__anchor">Lernziele</a>
<a href="#" class="module-navigation__anchor">1.1 Lehrbeginn</a>
<a href="#" class="module-navigation__anchor">1.2 Die drei Lernorte</a> <a href="#" class="module-navigation__anchor"
v-scroll-to="chapterId(index)"
v-for="(chapter, index) in module.chapters"
:key="chapter.id">{{chapter.title}}</a>
<a href="#" class="module-navigation__anchor">Lernzielkontrolle</a> <a href="#" class="module-navigation__anchor">Lernzielkontrolle</a>
</div> </div>
<router-link tag="h3" to="/module/submissions" class="module-navigation__heading">Ergebnisse: {{module.metaTitle}} <router-link tag="h3" to="/module/submissions" class="module-navigation__heading">Ergebnisse: {{module.metaTitle}}
</router-link> </router-link>
<div class="module-navigation__anchors"> <div class="module-navigation__anchors">
<router-link to="/module/geld/submissions" class="module-navigation__anchor">Tauschvorgänge</router-link> <router-link
<router-link to="/module/geld/submissions" class="module-navigation__anchor">Schwierigkeiten von Tauschvorgängen to="/module/geld/submissions"
</router-link> v-for="assignment in module.assignments"
<router-link to="/module/geld/submissions" class="module-navigation__anchor">Vorteile von Geld</router-link> :key="assignment.id"
<router-link to="/module/geld/submissions" class="module-navigation__anchor">Aufgaben von Geld</router-link> class="module-navigation__anchor"
<router-link to="/module/geld/submissions" class="module-navigation__anchor">Notizen zum Video «Funktionen der >{{assignment.title}}
Bank»
</router-link>
<router-link to="/module/geld/submissions" class="module-navigation__anchor">Anlageberatung</router-link>
<router-link to="/module/geld/submissions"
v-for="assignment in module.assignments"
:key="assignment.id"
class="module-navigation__anchor">{{assignment.title}}
</router-link> </router-link>
</div> </div>
</nav> </nav>
@ -41,6 +35,18 @@
export default { export default {
apollo: { apollo: {
module: moduleQuery module: moduleQuery
},
data() {
return {
module: {}
}
},
methods: {
chapterId(index) {
return `#chapter-${index}`
}
} }
} }
</script> </script>
@ -72,7 +78,8 @@
&__anchor { &__anchor {
@include module-navigation-typography; @include module-navigation-typography;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.6875rem; line-height: 1.2rem;
margin-bottom: .6875rem;
&--active { &--active {
color: $color-brand; color: $color-brand;