chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue

<template>
   <banner></banner>
   <sticky-nav></sticky-nav>

   <h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1>
   <h1 v-else>{{ $t('course.title.active') }}</h1>

   <persons-associated></persons-associated>
   <course-location></course-location>
   <origin-demand></origin-demand>
   <requestor></requestor>
   <social-issue></social-issue>
   <referrer></referrer>
   <resources></resources>
   <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
   <confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>

    <div v-for="error in errorMsg" class="vue-component errors alert alert-danger">
       <p>
          <span>{{ error.sta }} {{ error.txt }}</span><br>
          <span>{{ $t(error.msg) }}</span>
       </p>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import Banner from './components/Banner.vue';
import StickyNav from './components/StickyNav.vue';
import OriginDemand from './components/OriginDemand.vue';
import PersonsAssociated from './components/PersonsAssociated.vue';
import Requestor from './components/Requestor.vue';
import SocialIssue from './components/SocialIssue.vue';
import CourseLocation from './components/CourseLocation.vue';
import Referrer from './components/Referrer.vue';
import Resources from './components/Resources.vue';
import Comment from './components/Comment.vue';
import Confirm from './components/Confirm.vue';

export default {
   name: 'App',
   components: {
      Banner,
      StickyNav,
      OriginDemand,
      PersonsAssociated,
      Requestor,
      SocialIssue,
      CourseLocation,
      Referrer,
      Resources,
      Comment,
      Confirm,
   },
   computed: mapState([
      'accompanyingCourse',
      'addressContext',
      'errorMsg'
   ])
};
</script>

<style lang="scss">
   @import 'ChillMainAssets/module/bootstrap/shared';
   $chill-accourse-context: #718596;

   div#accompanying-course {
      div.vue-component {
         h2 {
            margin: 1em 0.7em;
            position: relative;
            &:before {
               position: absolute;
               content: "\f142";  //ellipsis-v
               font-family: "ForkAwesome";
               color: tint-color($chill-accourse-context, 10%);
               left: -22px;
               top: 4px;
            }
            a[name^="section"] {
               position: absolute;
               top: -2.5em;  // reference for stickNav
            }
         }
         padding: 0em 0em;
         margin: 1em 0;
         border: 1px dotted tint-color($chill-accourse-context, 10%);
         border-radius: 5px;
         border-left: 1px dotted tint-color($chill-accourse-context, 10%);
         border-right: 1px dotted tint-color($chill-accourse-context, 10%);
         dd {
            margin-left: 1em;
         }
         & > div {
            margin: 1em 3em 0;
         }
         table {
         }

         &.errors {
            //display: flex;
            //position: sticky;
            //bottom: 0.3em;
            //z-index: 1000;
            margin: 1em 0;
            padding: 1em;
            border-radius: 0;
         }
      }
   }
</style>