place html anchors: top, bottom of page + for each form section

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

@@ -44,11 +44,26 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
    h1 {
       margin: 1.5em 0;
    }
    div.vue-component {
+      h2 {
+         position: relative;
+         &:before {
+            position: absolute;
+            content: "\f1dd";
+            font-family: "ForkAwesome";
+            color: lightgrey;
+            left: -28px;
+            top: 4px;
+         }
+         a[name^="section"] {
+            position: absolute;
+            top: -2em;
+         }
+      }
       padding: 1.5em 1em;
       margin: 2em 0;
       border: 1px solid lightgrey; 

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

@@ -1,6 +1,6 @@
 <template>
    <div class="vue-component">
-      <h2>{{ $t('comment.title') }}</h2>
+      <h2><a name="section-60"></a>{{ $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,6 +1,6 @@
 <template>
   <div class="vue-component">
-     <h2>
+     <h2><a name="section-70"></a>
         {{ $t('confirm.title') }}
      </h2>
      

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

@@ -1,6 +1,6 @@
 <template>
 <div class="vue-component">
-   <h2>{{ $t('persons_associated.title')}}</h2>
+   <h2><a name="section-10"></a>{{ $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">
-     <h2>{{ $t('referrer.title') }}</h2>
+     <h2><a name="section-40"></a>{{ $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">
    
-   <h2>{{ $t('requestor.title') }}</h2>
+   <h2><a name="section-20"></a>{{ $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">
   
-   <h2>{{ $t('resources.title')}}</h2>
+   <h2><a name="section-50"></a>{{ $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">
-     <h2>{{ $t('social_issue.title') }}</h2>
+     <h2><a name="section-30"></a>{{ $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">
-   <h2>Tests</h2>
+   <h2></a>Tests</h2>
    
    <!-- Modal -->
    <ul class="record_actions">