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; */
-      &:before { /*
+      position: relative; 
+      &: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; 
       }