Merge remote-tracking branch 'origin/master' into issue296_internal_close_accourse

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

@@ -22,7 +22,7 @@
                <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 class="item-key">{{ $t('course.referrer') }}:</span> <b>{{ accompanyingCourse.user.username }}</b>
             </span>
          </span>
       </span>
@@ -34,13 +34,15 @@
    </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>
+      <social-issue
+         v-for="issue in accompanyingCourse.socialIssues"
+         v-bind:key="issue.id"
+         v-bind:issue="issue">
+      </social-issue>
+   </teleport>
+
+   <teleport to="#header-accompanying_course-details #banner-persons-associated">
+      <persons-associated :accompanyingCourse="accompanyingCourse"></persons-associated>
    </teleport>
 
 </template>
@@ -48,12 +50,14 @@
 <script>
 import ToggleFlags from './Banner/ToggleFlags';
 import SocialIssue from './Banner/SocialIssue.vue';
+import PersonsAssociated from './Banner/PersonsAssociated.vue';
 
 export default {
    name: 'Banner',
    components: {
       ToggleFlags,
-      SocialIssue
+      SocialIssue,
+      PersonsAssociated
    },
    computed: {
       accompanyingCourse() {