Improve navigation styling

This commit is contained in:
Ramon Wenger 2018-10-08 15:32:25 +02:00
parent 3be07c471c
commit 6e75b55475
2 changed files with 40 additions and 22 deletions

View File

@ -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;

View File

@ -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)