titles: size and interaction

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue

@@ -1,5 +1,9 @@
 <template>
    <banner></banner>
+   
+   <h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1>
+   <h1 v-else>{{ $t('course.title.active') }}</h1>
+   
    <persons-associated></persons-associated>
    <requestor></requestor>
    <social-issue></social-issue>
@@ -7,7 +11,7 @@
    <resources></resources>
    <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
    <confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
-   <!--test></test-->
+   
 </template>
 
 <script>
@@ -33,7 +37,6 @@ export default {
       Resources,
       Comment,
       Confirm,
-      //Test
    },
    computed: mapState([
       'accompanyingCourse'
@@ -42,6 +45,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+   h1 {
+      margin: 1.5em 0;
+   }
    div.vue-component {
       padding: 1.5em 1em;
       margin: 2em 0;
@@ -50,16 +56,17 @@ export default {
       border-left: 1px dotted lightgrey;
       border-right: 1px dotted lightgrey;
       /*
-      position: relative; */
+      position: relative; 
-      &:before { /*
+      &:before { 
          content: "vuejs component";
          position: absolute;
          left: 1.5em;
          top: -0.9em;
          background-color: white;
          color: grey;
-         padding: 0 0.3em;*/
+         padding: 0 0.3em;
       }
+      */
       dd { 
          margin-left: 1em; 
       }

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

@@ -1,7 +1,6 @@
 <template>
    
    <div class="vue-component" style="display: none;">
-      <h3>{{ $t('course.title') }}</h3>
       <dl>
         <dt>{{ $t('course.id') }}</dt>
         <dd>{{ accompanyingCourse.id }}</dd>

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

@@ -1,6 +1,6 @@
 <template>
    <div class="vue-component">
-      <h3>{{ $t('comment.title') }}</h3>
+      <h2>{{ $t('comment.title') }}</h2>
       
       <!--div class="error flash_message" v-if="errors.length > 0">
          {{ errors[0] }}

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

@@ -1,8 +1,8 @@
 <template>
   <div class="vue-component">
-     <h3>
+     <h2>
         {{ $t('confirm.title') }}
-     </h3>
+     </h2>
      
      <div>
         <p>

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

@@ -1,6 +1,6 @@
 <template>
 <div class="vue-component">
-   <h3>{{ $t('persons_associated.title')}}</h3>
+   <h2>{{ $t('persons_associated.title')}}</h2>
    <label>{{ $tc('persons_associated.counter', counter) }}</label>
    <table class="rounded">
       <thead>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="vue-component">
-     <h3>{{ $t('referrer.title') }}</h3>
+     <h2>{{ $t('referrer.title') }}</h2>
   </div>
 </template>
 

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

@@ -1,7 +1,7 @@
 <template>
 <div class="vue-component">
    
-   <h3>{{ $t('requestor.title') }}</h3>
+   <h2>{{ $t('requestor.title') }}</h2>
    
    <div v-if="accompanyingCourse.requestor">
       <label>

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

@@ -1,7 +1,7 @@
 <template>
 <div class="vue-component">
   
-   <h3>{{ $t('resources.title')}}</h3>
+   <h2>{{ $t('resources.title')}}</h2>
    
    <label>{{ $tc('resources.counter', counter) }}</label>
    <table class="rounded">

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

@@ -1,6 +1,6 @@
 <template>
   <div class="vue-component">
-     <h3>{{ $t('social_issue.title') }}</h3>
+     <h2>{{ $t('social_issue.title') }}</h2>
      
      <div>
         <!--label for="selectIssues">{{ $t('social_issue.label') }}</label-->

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

@@ -1,6 +1,6 @@
 <template>
 <div class="vue-component">
-   <h3>Tests</h3>
+   <h2>Tests</h2>
    
    <!-- Modal -->
    <ul class="record_actions">
@@ -19,7 +19,7 @@
    <teleport to="body">
    <modal v-if="modal1.showModal" :modalDialogClass="modal1.modalDialogClass" @close="modal1.showModal = false">      
       <template v-slot:header>
-         <h3 class="modal-title">Le titre de ma modale</h3>
+         <h2 class="modal-title">Le titre de ma modale</h2>
       </template>
       <template v-slot:body>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
@@ -39,7 +39,7 @@
    <teleport to="body">
    <modal v-if="modal2.showModal" :modalDialogClass="modal2.modalDialogClass" @close="modal2.showModal = false">      
       <template v-slot:header>
-         <h3 class="modal-title">Une autre modale</h3>
+         <h2 class="modal-title">Une autre modale</h2>
       </template>
       <template v-slot:body>
          <p>modal 2</p>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js

@@ -4,7 +4,10 @@ const appMessages = {
    fr: {
       course: {
          id: "id",
-         title: "Parcours",
+         title: {
+            draft: "Création d'un nouveau parcours",
+            active: "Modification du parcours"
+         },
          opening_date: "Date d'ouverture",
          closing_date: "Date de clôture",
          remark: "Commentaire",

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig

@@ -5,9 +5,8 @@
             <div class="grid-6">{% set title = title %}
                 <h1>
                     <i class="fa fa-random fa-fw"></i>
-                    {{ 'Accompanying Course'|trans }}{# ou défini en amont
+                    {{ 'Accompanying Course'|trans }}
-                    {{ title|default('Accompanying Course'|trans)|raw }} #}
+                    <span style="font-weight: lighter; font-size: 50%;">(n°{{ accompanyingCourse.id  }})</span>
-                    <span style="font-weight: lighter; font-size: 65%;">(n°{{ accompanyingCourse.id  }})</span>
                 </h1>
             </div>
 

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig

@@ -7,7 +7,6 @@
 {% endblock %}
 
 {% block content %}
-   <h1>{{ block('title') }}</h1>
    <div id="accompanying-course"></div> {#  <== insert accompanyingCourse vue component  #}
 {% endblock %}