74 lines
1.5 KiB
Vue
74 lines
1.5 KiB
Vue
<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 {
|
|
apollo: {
|
|
moduleQuery: {
|
|
query: MODULE_DETAILS_QUERY,
|
|
variables: {
|
|
slug: 'video'
|
|
},
|
|
fetchPolicy: 'network-only',
|
|
manual: true,
|
|
result({data, loading, networkStatus}) {
|
|
if (!loading) {
|
|
const cleanedData = this.$getRidOfEdges(data)
|
|
this.module = cleanedData.modules[0] || {};
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
components: {
|
|
Module,
|
|
ModuleNavigation
|
|
},
|
|
|
|
// TODO: can we do better by defining a type for module?
|
|
data() {
|
|
return {
|
|
module: {
|
|
objectivegroupSet: {
|
|
edges: {}
|
|
},
|
|
chapters: {
|
|
edges: {}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.module-page {
|
|
display: grid;
|
|
justify-items: center;
|
|
grid-template-columns: 2fr 6fr 2fr;
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
display: -ms-grid;
|
|
-ms-grid-columns: 2fr 6fr 2fr;
|
|
|
|
& > :nth-child(1) {
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-align: center;
|
|
}
|
|
& > :nth-child(2) {
|
|
-ms-grid-column: 2;
|
|
-ms-grid-column-align: center;
|
|
}
|
|
}
|
|
</style>
|