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

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

@ -56,7 +56,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/styles/_variables.scss'; @import "~styles/helpers";
.topic-navigation { .topic-navigation {
&__topic { &__topic {

29
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 }}
@ -21,24 +28,28 @@ export default {
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%;