Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-21 07:03:49 +00:00
Code Issues Actions Projects Releases Wiki Activity

Banner vue component fully manage AccompanyingCourse banner

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-05-20 12:59:58 +02:00
parent ae1146c79c
commit 821b67723c
5 changed files with 95 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
View File

@@ -1,4 +1,5 @@
<template>
<div class="vue-component" style="display: none;">
<h3>{{ $t('course.title') }}</h3>
<dl>
@@ -7,19 +8,38 @@
</dl>
</div>
<teleport to="#header-accompanying_course-name .grid-4">
<teleport to="#header-accompanying_course-name #banner-flags">
<toggle-flags></toggle-flags>
</teleport>
<teleport to="#header-accompanying_course-name .grid-3">
<p style="text-align: right;">
<span v-if="accompanyingCourse.openingDate">
<i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
</span><br>
<span v-if="accompanyingCourse.user">
{{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
<teleport to="#header-accompanying_course-name #banner-status">
<div v-if="accompanyingCourse.step === 'DRAFT'">
<span class="badge badge-secondary">
{{ $t('course.step.draft') }}
</span>
</p>
</div>
<div v-else>
<div>
<span class="badge badge-primary">
{{ $t('course.step.active') }}
</span>
</div>
<div>
<span>
<i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
</span>
<br>
<span v-if="accompanyingCourse.user">
{{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
</span>
</div>
</div>
</teleport>
<teleport to="#header-accompanying_course-details #banner-social-issues">
<div class="grid-4">{{ $t('social_issue.title') }}</div>
<div class="grid-4">_</div>
<div class="grid-4">_</div>
</teleport>
</template>
@@ -39,3 +59,22 @@ export default {
}
}
</script>
<style lang="scss">
div#banner-flags,
div#banner-status {
margin: 1.5em 0;
div {
text-align: right;
margin-bottom: 0.8em;
}
.badge {
text-transform: uppercase;
}
}
div#banner-status {
span.badge {
font-size: 90%;
}
}
</style>