bootstrap tables in vue_accourse

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

@@ -2,18 +2,23 @@
    <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>
-   <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 class="row justify-content-end">
+      <div class="col-md-11">
+         
+         <h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1>
+         <h1 v-else>{{ $t('course.title.active') }}</h1>
+         
+         <persons-associated></persons-associated>
+         <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>
+   </div>
 </template>
 
 <script>
@@ -56,7 +61,7 @@ export default {
       }
       div.vue-component {
          h2 {
-            margin-left: 0.7em;
+            margin: 1em 0.7em;
             position: relative;
             &:before {
                position: absolute;

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

@@ -1,19 +1,5 @@
 <template>
    
-   <div class="vue-component" style="display: none;">
-      <dl>
-         <dt>{{ $t('course.id') }}</dt>
-         <dd>{{ accompanyingCourse.id }}</dd>
-      </dl>
-      <dl v-if="accompanyingCourse.closingDate">
-         <dt>{{ $t('course.closing_date') }}</dt>
-         <dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
-
-         <dt>{{ $t('course.closing_motive') }}</dt>
-         <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
-      </dl>
-   </div>
-      
    <teleport to="#header-accompanying_course-name #banner-flags">
       <toggle-flags></toggle-flags>
    </teleport>

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

@@ -6,8 +6,8 @@
       <label>{{ $tc('persons_associated.counter', counter) }}</label>
    </div>
    
-   <table class="rounded" v-if="participations.length > 0">
-      <thead>
+   <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
+      <thead class="">
          <tr>
             <th class="chill-orange">{{ $t('persons_associated.name') }}</th>
             <th class="chill-orange">{{ $t('persons_associated.startdate') }}</th>

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

@@ -7,7 +7,7 @@
       <label>{{ $tc('resources.counter', counter) }}</label>
    </div>
    
-   <table class="rounded" v-if="resources.length > 0">
+   <table class="table table-bordered table-striped border-dark align-middle" v-if="resources.length > 0">
       <thead>
          <tr>
             <th class="chill-orange">{{ $t('resources.text') }}</th>

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

@@ -120,7 +120,7 @@ export default {
          
          if (top > this.limit) {            
             this.stickyNav.style.position = 'absolute';
-            this.stickyNav.style.left = '-60px';
+            this.stickyNav.style.left = '10px';
          } else {
             this.stickyNav.style.position = 'fixed';
             this.stickyNav.style.left = pos['x'] + 'px';
@@ -149,36 +149,40 @@ export default {
 </script>
 
 <style lang="scss">
-div#navmap {
-   position: absolute;
-   top: 30px;
-   left: -60px; //-10%;
-   nav {
-      font-size: small;
-      a {
-         display: block;
-         box-sizing: border-box;
-         margin-bottom: -3px;
-         color: #71859669;
-         &.top {
-            color: #718596;
-         }
-         span {
-            display: none;
-         }
-         &:hover, 
-         &.active {
-            span {
-               display: inline;
-               padding-left: 8px;
+div#content {
+   position: relative;
+   
+   div#navmap {
+      position: absolute;
+      top: 30px;
+      left: 10px; //-10%;
+      nav {
+         font-size: small;
+         a {
+            display: block;
+            box-sizing: border-box;
+            margin-bottom: -3px;
+            color: #71859669;
+            &.top {
+               color: #718596;
+            }
+            span {
+               display: none;
+            }
+            &:hover, 
+            &.active {
+               span {
+                  display: inline;
+                  padding-left: 8px;
+               }
+            }
+            &:hover {
+               color: #718596b5;
+            }
+            &.active {
+               color: #e2793d; //orange
+               //color: #eec84a; //jaune
             }
-         }
-         &:hover {
-            color: #718596b5;
-         }
-         &.active {
-            color: #e2793d; //orange
-            //color: #eec84a; //jaune
          }
       }
    }