Improve navigation styling
This commit is contained in:
parent
3be07c471c
commit
6e75b55475
|
|
@ -1,27 +1,38 @@
|
|||
<template>
|
||||
<div>
|
||||
<nav class="module-navigation">
|
||||
<h3 class="module-navigation__heading">Inhalte: {{module.metaTitle}}</h3>
|
||||
<div class="module-navigation__anchors" v-if="onModulePage">
|
||||
<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"
|
||||
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">
|
||||
<div class="module-navigation__module-content">
|
||||
<router-link
|
||||
:to="submissionsLink(assignment)"
|
||||
v-for="assignment in module.assignments"
|
||||
:key="assignment.id"
|
||||
class="module-navigation__anchor"
|
||||
>{{assignment.title}}
|
||||
tag="h3"
|
||||
:to="moduleContentLink"
|
||||
class="module-navigation__heading"
|
||||
>Inhalte: {{module.metaTitle}}
|
||||
</router-link>
|
||||
<div class="module-navigation__anchors" v-if="onModulePage">
|
||||
<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"
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div class="module-navigation__module-submissions">
|
||||
<router-link tag="h3" to="/module/submissions" class="module-navigation__heading">Ergebnisse:
|
||||
{{module.metaTitle}}
|
||||
</router-link>
|
||||
<div class="module-navigation__anchors">
|
||||
<router-link
|
||||
:to="submissionsLink(assignment)"
|
||||
v-for="assignment in module.assignments"
|
||||
:key="assignment.id"
|
||||
class="module-navigation__anchor"
|
||||
>{{assignment.title}}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -40,6 +51,9 @@
|
|||
computed: {
|
||||
onModulePage() {
|
||||
return this.$route.name === 'module';
|
||||
},
|
||||
moduleContentLink() {
|
||||
return `/module/${this.module.slug}`;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -74,15 +88,20 @@
|
|||
position: sticky;
|
||||
top: 32px;
|
||||
|
||||
&__module-content {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
@include module-navigation-typography;
|
||||
margin: 0;
|
||||
font-size: 1.0625rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
&__anchors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px 24px;
|
||||
padding: 16px 24px 0;
|
||||
}
|
||||
&__anchor {
|
||||
@include module-navigation-typography;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
from graphene import relay
|
||||
import graphene
|
||||
from graphene_django.filter import DjangoFilterConnectionField
|
||||
|
||||
from assignments.schema.types import AssignmentNode
|
||||
|
|
@ -7,4 +6,4 @@ from assignments.schema.types import AssignmentNode
|
|||
|
||||
class AssignmentsQuery(object):
|
||||
assignment = relay.Node.Field(AssignmentNode)
|
||||
assignments = DjangoFilterConnectionField(AssignmentNode)
|
||||
assignments = DjangoFilterConnectionField(AssignmentNode)
|
||||
|
|
|
|||
Loading…
Reference in New Issue