Add clickable link to my activities
This commit is contained in:
Ramon Wenger
parent
e45847fe1e
commit
ddf3bde076
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div class="activity-entry">
|
||||
<div class="activity-entry__content">
|
||||
<h3 class="activity-entry__title">{{title}}</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<div class="activity-entry__link" @click="$emit('link')">
|
||||
<chevron-right class="activity-entry__icon"></chevron-right>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChevronRight from '@/components/icons/ChevronRight';
|
||||
|
||||
export default {
|
||||
props: ['title'],
|
||||
|
||||
components: {
|
||||
ChevronRight
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.activity-entry {
|
||||
padding: $small-spacing 0;
|
||||
border-bottom: 1px solid $color-silver;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__title {
|
||||
@include small-text;
|
||||
// todo: make style definition for small text and silver color
|
||||
color: $color-silver-dark;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex-grow: 1;
|
||||
@include regular-text;
|
||||
line-height: $default-line-height;
|
||||
}
|
||||
&__link {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
align-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
fill: $color-brand;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
/deep/ p {
|
||||
@include regular-text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="content-bookmark module-activity-entry">
|
||||
<h3 class="module-activity-entry__title">Lesezeichen</h3>
|
||||
<div v-html="text" v-if="content.type === 'text_block'"></div>
|
||||
<div v-else-if="content.type === 'link_block'">
|
||||
<link-block :value="content.value"></link-block>
|
||||
|
|
@ -38,13 +37,3 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.content-bookmark {
|
||||
/deep/ p {
|
||||
@include regular-text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,48 +3,35 @@
|
|||
<h3 class="module-activity__module-name">{{module.topic.title}}</h3>
|
||||
<h2 class="module-activity__title">{{module.metaTitle}} - {{module.title}}</h2>
|
||||
<div class="module-activity__tasks activity-tasks">
|
||||
<div class="module-activity__entry module-activity-entry"
|
||||
v-for="submission in module.mySubmissions"
|
||||
:key="submission.id"
|
||||
@click="goTo(submission.assignment.id)">
|
||||
<h3 class="module-activity-entry__title">Aufgabe & Ergebnis</h3>
|
||||
<p class="module-activity-entry__text">
|
||||
{{submission.text}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="module-activity__entry module-activity-entry"
|
||||
v-for="answer in module.myAnswers"
|
||||
:key="answer.id"
|
||||
@click="goTo(answer.survey.id)">
|
||||
<h3 class="module-activity-entry__title">Übung</h3>
|
||||
<p class="module-activity-entry__text">
|
||||
{{answer.survey.title}}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="module-activity__entry"
|
||||
v-for="bookmark in module.myContentBookmarks"
|
||||
:key="bookmark.id"
|
||||
@click="goTo(bookmark.uuid)">
|
||||
<activity-entry title="Aufgabe & Ergebnis" class="module-activity__entry"
|
||||
v-for="submission in module.mySubmissions"
|
||||
:key="submission.id"
|
||||
@link="goTo(submission.assignment.id)">
|
||||
{{submission.text}}
|
||||
</activity-entry>
|
||||
<activity-entry title="Übung" class="module-activity__entry"
|
||||
v-for="answer in module.myAnswers"
|
||||
:key="answer.id"
|
||||
@link="goTo(answer.survey.id)">
|
||||
{{answer.survey.title}}
|
||||
</activity-entry>
|
||||
<activity-entry title="Lesezeichen" class="module-activity__entry"
|
||||
v-for="bookmark in module.myContentBookmarks"
|
||||
:key="bookmark.id"
|
||||
@link="goTo(bookmark.uuid)">
|
||||
<content-bookmark :bookmark="bookmark"></content-bookmark>
|
||||
</div>
|
||||
<div class="module-activity__entry"
|
||||
v-for="bookmark in module.myChapterBookmarks"
|
||||
:key="bookmark.id"
|
||||
@click="goTo(bookmark.chapter.id)">
|
||||
<h3 class="module-activity-entry__title">Lesezeichen</h3>
|
||||
<p class="module-activity-entry__text">
|
||||
{{bookmark.chapter.description}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="module-activity__entry"
|
||||
v-for="note in notes" :key="note.id">
|
||||
<h3 class="module-activity-entry__title">Notiz</h3>
|
||||
<p class="module-activity-entry__text">
|
||||
{{note.text}}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</activity-entry>
|
||||
<activity-entry title="Lesezeichen" class="module-activity__entry"
|
||||
v-for="bookmark in module.myChapterBookmarks"
|
||||
:key="bookmark.id"
|
||||
@link="goTo(bookmark.chapter.id)">
|
||||
{{bookmark.chapter.description}}
|
||||
</activity-entry>
|
||||
<activity-entry title="Notiz" class="module-activity__entry"
|
||||
v-for="note in notes" :key="note.id"
|
||||
@link="goTo(note.id)">
|
||||
{{note.text}}
|
||||
</activity-entry>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -53,13 +40,15 @@
|
|||
|
||||
import {mapActions} from 'vuex'
|
||||
import ContentBookmark from '@/components/profile/ContentBookmark';
|
||||
import ActivityEntry from '@/components/profile/ActivityEntry';
|
||||
|
||||
import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
|
||||
|
||||
export default {
|
||||
props: ['module'],
|
||||
components: {
|
||||
ContentBookmark
|
||||
ContentBookmark,
|
||||
ActivityEntry
|
||||
},
|
||||
computed: {
|
||||
empty() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue