157 lines
3.5 KiB
Vue
157 lines
3.5 KiB
Vue
<template>
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<div
|
|
class="module"
|
|
v-if="module.id"
|
|
>
|
|
<h2
|
|
class="module__meta-title"
|
|
id="meta-title"
|
|
>
|
|
{{ module.metaTitle }}
|
|
</h2>
|
|
<h1
|
|
class="module__title"
|
|
data-cy="module-title"
|
|
>
|
|
{{ module.title }}
|
|
</h1>
|
|
<img
|
|
:src="module.heroImage"
|
|
alt=""
|
|
class="module__hero"
|
|
>
|
|
|
|
<div class="module__intro-wrapper">
|
|
<bookmark-actions
|
|
:bookmarked="!!module.bookmark"
|
|
:note="note"
|
|
:edit-mode="module.inEditMode"
|
|
class="module__bookmark-actions"
|
|
data-cy="module-bookmark-actions"
|
|
@add-note="$emit('addNote')"
|
|
@edit-note="$emit('editNote')"
|
|
@bookmark="$emit('bookmark', !module.bookmark)"
|
|
/>
|
|
<div
|
|
class="module__intro intro"
|
|
v-html="module.intro"
|
|
/>
|
|
</div>
|
|
|
|
<h3 id="objectives">
|
|
<span v-show="$flavor.showObjectivesTitle">Lernziele</span>
|
|
</h3>
|
|
|
|
<div class="module__objective-groups">
|
|
<objective-groups :groups="languageCommunicationObjectiveGroups" />
|
|
|
|
<objective-groups :groups="societyObjectiveGroups" />
|
|
|
|
<objective-groups :groups="interdisciplinaryObjectiveGroups" />
|
|
</div>
|
|
|
|
<chapter
|
|
:chapter="chapter"
|
|
:index="index"
|
|
:edit-mode="module.inEditMode"
|
|
v-for="(chapter, index) in module.chapters"
|
|
:key="chapter.id"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
|
|
import Chapter from '@/components/Chapter.vue';
|
|
import BookmarkActions from '@/components/notes/BookmarkActions';
|
|
|
|
export default {
|
|
props: {
|
|
module: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
},
|
|
|
|
components: {
|
|
BookmarkActions,
|
|
ObjectiveGroups,
|
|
Chapter,
|
|
},
|
|
|
|
computed: {
|
|
languageCommunicationObjectiveGroups() {
|
|
return this.module.objectiveGroups ? this.module.objectiveGroups
|
|
.filter(group => group.title.toLowerCase() === 'language_communication') : [];
|
|
},
|
|
societyObjectiveGroups() {
|
|
return this.module.objectiveGroups ? this.module.objectiveGroups
|
|
.filter(group => group.title.toLowerCase() === 'society') : [];
|
|
},
|
|
interdisciplinaryObjectiveGroups() {
|
|
return this.module.objectiveGroups ? this.module.objectiveGroups
|
|
.filter(group => group.title.toLowerCase() === 'interdisciplinary') : [];
|
|
},
|
|
note() {
|
|
if (!(this.module && this.module.bookmark)) {
|
|
return;
|
|
}
|
|
return this.module.bookmark.note;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~styles/helpers';
|
|
|
|
.module {
|
|
display: flex;
|
|
justify-self: center;
|
|
max-width: 100vw;
|
|
|
|
@include desktop {
|
|
width: 800px;
|
|
}
|
|
flex-direction: column;
|
|
padding: $large-spacing 15px;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
&__hero {
|
|
margin-bottom: 35px;
|
|
border-radius: 12px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
&__meta-title {
|
|
@include meta-title;
|
|
}
|
|
|
|
&__intro-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
&__intro {
|
|
> /deep/ p {
|
|
margin-bottom: $large-spacing;
|
|
@include lead-paragraph;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__bookmark-actions {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
&__objective-groups {
|
|
margin-bottom: $large-spacing;
|
|
}
|
|
}
|
|
</style>
|