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

Implement some router changes for v4

This commit is contained in:
Ramon Wenger 2022-03-24 17:37:01 +01:00
parent 33b8a0d2f5
commit 2a32993c5c
2 changed files with 105 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/components/book-navigation/TopicNavigation.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<nav class="topic-navigation"> <nav class="topic-navigation">
<router-link <router-link
:to="{ name: 'topic', params: { topicSlug: topic.slug } }" :to="{name: 'topic', params: {topicSlug: topic.slug}}"
:class="{ 'topic-navigation__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile }" :class="{'topic-navigation__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
tag="div" tag="div"
active-class="book-subnavigation__item--active" active-class="book-subnavigation__item--active"
class="topic-navigation__topic book-subnavigation__item" class="topic-navigation__topic book-subnavigation__item"
@ -17,10 +17,10 @@
</template> </template>
<script> <script>
import ALL_TOPICS_QUERY from '@/graphql/gql/queries/allTopicsQuery.gql'; import ALL_TOPICS_QUERY from '@/graphql/gql/queries/allTopicsQuery.gql';
import sidebarMixin from '@/mixins/sidebar'; import sidebarMixin from '@/mixins/sidebar';
export default { export default {
props: { props: {
mobile: { mobile: {
default: false, default: false,
@ -45,21 +45,21 @@ export default {
topics: { topics: {
query: ALL_TOPICS_QUERY, query: ALL_TOPICS_QUERY,
manual: true, manual: true,
result({ data, loading }) { result({data, loading}) {
if (!loading) { if (!loading) {
this.topics = this.$getRidOfEdges(data).topics; this.topics = this.$getRidOfEdges(data).topics;
} }
}, },
}, },
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/styles/_variables.scss'; @import "~styles/helpers";
.topic-navigation { .topic-navigation {
&__topic { &__topic {
} }
} }
</style> </style>

37
client/src/components/modules/ModuleTeaser.vue
View File

@ -1,6 +1,13 @@
<template> <template>
<router-link :to="moduleLink" :class="['module-teaser', { 'module-teaser--small': !teaser }]" tag="div"> <router-link
<div :style="{ backgroundImage: 'url(' + heroImage + ')' }" class="module-teaser__image" /> :to="moduleLink"
:class="['module-teaser', {'module-teaser--small': !teaser}]"
tag="div"
>
<div
:style="{backgroundImage: 'url('+heroImage+')'}"
class="module-teaser__image"
/>
<div class="module-teaser__body"> <div class="module-teaser__body">
<h3 class="module-teaser__meta-title"> <h3 class="module-teaser__meta-title">
{{ metaTitle }} {{ metaTitle }}
@ -16,29 +23,33 @@
</template> </template>
<script> <script>
export default { export default {
props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage'], props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage'],
computed: { computed: {
moduleLink() { moduleLink() {
if (this.slug) {
return { return {
name: 'module', name: 'module',
params: { params: {
slug: this.slug, slug: this.slug
}, }
};
} else {
return {};
}
}
}
}; };
},
},
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/styles/_variables.scss'; @import "@/styles/_variables.scss";
@import '@/styles/_mixins.scss'; @import "@/styles/_mixins.scss";
.module-teaser { .module-teaser {
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
border: 1px solid #e2e2e2; border: 1px solid #E2E2E2;
height: 330px; height: 330px;
max-width: 380px; max-width: 380px;
width: 100%; width: 100%;
@ -79,5 +90,5 @@ export default {
line-height: $default-line-height; line-height: $default-line-height;
font-size: 1.2rem; font-size: 1.2rem;
} }
} }
</style> </style>