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

Add module navigation

This commit is contained in:
Ramon Wenger 2018-08-20 17:05:40 +02:00
parent 19de9a7e65
commit 9c6e06c4a8
6 changed files with 67 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/index.html
View File

@ -6,7 +6,7 @@
<title>skillBox</title>
<link href='https://fonts.googleapis.com/css?family=Material+Icons' rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:500,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,800" rel="stylesheet">
<link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet">
</head>
<body>

9
client/src/components/Module.vue
View File

@ -7,17 +7,10 @@
</div>
<h3>Lernziele</h3>
<h3 id="objectives">Lernziele</h3>
<objective-group v-for="group in module.objectivegroupSet" :key="group.id" :group="group"></objective-group>
<chapter :chapter="chapter" v-for="chapter in module.chapters" :key="chapter.id"></chapter>
<h3>1.1 Lehrbeginn</h3>
<h4>Das Interview</h4>
<h4>Tipp</h4>
<h3>1.2 Die drei Lernorte</h3>
<h4>Unser Berufsbildungssystem</h4>
<h5>Die Berufsfachschule</h5>
</div>
</template>

45
client/src/components/ModuleNavigation.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<nav class="module-navigation">
<h3 class="module-navigation__heading">Inhalte: Modul 1</h3>
<div class="module-navigation__anchors">
<a href="#" class="module-navigation__anchor module-navigation__anchor--active">Einleitung</a>
<a href="#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">Lernzielkontrolle</a>
</div>
<h3 class="module-navigation__heading">Ergebnisse: Modul 1</h3>
</nav>
</template>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@mixin module-navigation-typography {
font-family: $sans-serif-font-family;
color: $color-grey;
font-weight: 400;
}
.module-navigation {
&__heading {
@include module-navigation-typography;
margin: 0;
font-size: 1.0625rem;
}
&__anchors {
display: flex;
flex-direction: column;
padding: 16px 24px;
}
&__anchor {
@include module-navigation-typography;
font-size: 0.875rem;
line-height: 1.6875rem;
&--active {
color: $color-brand;
}
}
}
</style>

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

@ -1,9 +1,9 @@
<template>
<div class="top-navigation">
<nav class="top-navigation">
<router-link to="/" class="top-navigation__link top-navigation__link--active">Inhalte</router-link>
<router-link to="/" class="top-navigation__link">Räume</router-link>
<router-link to="/" class="top-navigation__link">Portfolio</router-link>
</div>
</nav>
</template>
<style scoped lang="scss">

19
client/src/pages/module.vue
View File

@ -1,9 +1,13 @@
<template>
<div class="module-page">
<module-navigation></module-navigation>
<module :module="module"></module>
</div>
</template>
<script>
import Module from '@/components/Module.vue';
import ModuleNavigation from '@/components/ModuleNavigation.vue';
import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
export default {
@ -17,15 +21,16 @@
manual: true,
result({data, loading, networkStatus}) {
if (!loading) {
const purgedData = this.$getRidOfEdges(data)
this.module = purgedData.modules[0]
const cleanedData = this.$getRidOfEdges(data)
this.module = cleanedData.modules[0] || {};
}
}
}
},
components: {
Module
Module,
ModuleNavigation
},
// TODO: can we do better by defining a type for module?
@ -43,3 +48,11 @@
}
}
</script>
<style scoped lang="scss">
.module-page {
display: grid;
justify-items: center;
grid-template-columns: 2fr 6fr 2fr;
}
</style>

1
client/src/styles/_typography.scss
View File

@ -2,6 +2,7 @@
* {
font-size: $base-font-size;
font-weight: 400;
}
h1, h2, h3, h4, h5 {