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

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

@ -10,7 +10,7 @@
<h3 id="objectives">Lernziele</h3>
<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>
</template>

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

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