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

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

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