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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,27 +1,38 @@
<template> <template>
<div> <div>
<nav class="module-navigation"> <nav class="module-navigation">
<h3 class="module-navigation__heading">Inhalte: {{module.metaTitle}}</h3> <div class="module-navigation__module-content">
<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">
<router-link <router-link
:to="submissionsLink(assignment)" tag="h3"
v-for="assignment in module.assignments" :to="moduleContentLink"
:key="assignment.id" class="module-navigation__heading"
class="module-navigation__anchor" >Inhalte: {{module.metaTitle}}
>{{assignment.title}}
</router-link> </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> </div>
</nav> </nav>
</div> </div>
@ -40,6 +51,9 @@
computed: { computed: {
onModulePage() { onModulePage() {
return this.$route.name === 'module'; return this.$route.name === 'module';
},
moduleContentLink() {
return `/module/${this.module.slug}`;
} }
}, },
@ -74,15 +88,20 @@
position: sticky; position: sticky;
top: 32px; top: 32px;
&__module-content {
margin-bottom: 18px;
}
&__heading { &__heading {
@include module-navigation-typography; @include module-navigation-typography;
margin: 0; margin: 0;
font-size: 1.0625rem; font-size: 1.0625rem;
cursor: pointer;
} }
&__anchors { &__anchors {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 16px 24px; padding: 16px 24px 0;
} }
&__anchor { &__anchor {
@include module-navigation-typography; @include module-navigation-typography;

3
server/assignments/schema/queries.py
View File

@ -1,5 +1,4 @@
from graphene import relay from graphene import relay
import graphene
from graphene_django.filter import DjangoFilterConnectionField from graphene_django.filter import DjangoFilterConnectionField
from assignments.schema.types import AssignmentNode from assignments.schema.types import AssignmentNode
@ -7,4 +6,4 @@ from assignments.schema.types import AssignmentNode
class AssignmentsQuery(object): class AssignmentsQuery(object):
assignment = relay.Node.Field(AssignmentNode) assignment = relay.Node.Field(AssignmentNode)
assignments = DjangoFilterConnectionField(AssignmentNode) assignments = DjangoFilterConnectionField(AssignmentNode)