103 lines
2.4 KiB
Vue
103 lines
2.4 KiB
Vue
<template>
|
|
<div class="module-activity">
|
|
<h3 class="module-activity__module-name">{{moduleTitle}}</h3>
|
|
<h2 class="module-activity__title">{{title}}</h2>
|
|
<div class="module-activity__tasks activity-tasks">
|
|
<h4 class="activity-tasks__title">Aufträge</h4>
|
|
<ol class="activity-tasks__task-list task-list">
|
|
<li v-for="activity in activities" :key="activity.key" class="task-list__item task-item">
|
|
<h5 class="task-item__title">{{activity.assignmentTitle}}</h5>
|
|
<p class="task-item__submission">{{activity.answer}}</p>
|
|
<a href="#" @click="goToAssignment(activity)"><chevron-right class="task-item__chevron"></chevron-right></a>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { mapActions } from 'vuex'
|
|
import ChevronRight from '@/components/icons/ChevronRight';
|
|
|
|
export default {
|
|
props: ['metaTitle', 'title', 'activities', 'topic', 'slug'],
|
|
components: {ChevronRight},
|
|
computed: {
|
|
moduleTitle () {
|
|
return `${this.topic.title} - ${this.metaTitle}`
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(['scrollToAssignmentId']),
|
|
goToAssignment (activity) {
|
|
const url = `/module/${this.slug}/`;
|
|
this.scrollToAssignmentId(activity.assignmentId);
|
|
this.$router.push(url);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.module-activity {
|
|
@include widget-shadow;
|
|
padding: $medium-spacing;
|
|
|
|
&__module-name {
|
|
@include small-text;
|
|
color: $color-grey;
|
|
}
|
|
}
|
|
|
|
.activity-tasks {
|
|
&__title {
|
|
background-color: $color-brand-light;
|
|
padding: $small-spacing $medium-spacing;
|
|
border-radius: $default-border-radius;
|
|
|
|
&--alternative {
|
|
background-color: $color-accent-1-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.task-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
$line-height: 50px;
|
|
|
|
&__title {
|
|
&::after {
|
|
content: ":"
|
|
}
|
|
margin-right: $medium-spacing;
|
|
}
|
|
|
|
&__submission {
|
|
width: 100%;
|
|
}
|
|
|
|
&__title, &__submission {
|
|
line-height: $line-height;
|
|
height: $line-height;
|
|
}
|
|
|
|
&__chevron {
|
|
line-height: $line-height;
|
|
height: $medium-spacing;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
top: ($line-height - $medium-spacing) / 2;
|
|
fill: $color-brand;
|
|
width: 30px;
|
|
}
|
|
}
|
|
|
|
</style>
|