Files
chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue

74 lines
1.9 KiB
Vue

<template>
<teleport to="#header-accompanying_course-name #banner-flags">
<toggle-flags></toggle-flags>
</teleport>
<teleport to="#header-accompanying_course-name #banner-status">
<span v-if="accompanyingCourse.step === 'DRAFT'"
class="text-md-end d-md-block">
<span class="badge bg-secondary">
{{ $t('course.step.draft') }}
</span>
</span>
<span v-else class="text-md-end">
<span class="d-md-block mb-md-3">
<span class="badge bg-primary">
{{ $t('course.step.active') }}
</span>
</span>
<span class="d-md-block">
<span class="d-md-block ms-3 ms-md-0">
<i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
</span>
<span v-if="accompanyingCourse.user" class="d-md-block ms-3 ms-md-0">
<abbr :title="$t('course.referrer')">{{ $t('course.referrer') }}:</abbr> <b>{{ accompanyingCourse.user.username }}</b>
</span>
</span>
</span>
</teleport>
<teleport to="#header-accompanying_course-details #banner-social-issues">
<div class="col-12">
<social-issue
v-for="issue in accompanyingCourse.socialIssues"
v-bind:key="issue.id"
v-bind:issue="issue">
</social-issue>
</div>
</teleport>
</template>
<script>
import ToggleFlags from './Banner/ToggleFlags';
import SocialIssue from './Banner/SocialIssue.vue';
export default {
name: 'Banner',
components: {
ToggleFlags,
SocialIssue
},
computed: {
accompanyingCourse() {
return this.$store.state.accompanyingCourse
}
}
}
</script>
<style lang="scss">
div#banner-flags,
div#banner-status {
.badge {
text-transform: uppercase;
}
}
div#banner-status {
span.badge {
font-size: 90%;
}
}
</style>