styling adjusted

src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss

@@ -9,6 +9,14 @@
         content: "\f00d";  // fa-times
         color: var(--bs-danger);
         text-decoration: none;
+        position: absolute;
+        display: block;
+        top: 50%;
+        right: 0;
+        -webkit-transform: translateY(-50%);
+        -moz-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        transform: translateY(-50%);
     }
 }
 
@@ -37,12 +45,24 @@ ul.list-suggest {
     }
     &.add-items {
         li {
-            cursor: pointer;
+            position: relative;
+            span {
+                cursor: pointer;
+                padding-left: 2rem;
+            }
             & > span:before {
                 font: normal normal normal 14px/1 ForkAwesome;
                 margin-right: 0.5em;
                 content: "\f067"; // fa-plus
                 color: var(--bs-success);
+                position: absolute;
+                display: block;
+                top: 50%;
+                left: .75rem;
+                -webkit-transform: translateY(-50%);
+                -moz-transform: translateY(-50%);
+                -ms-transform: translateY(-50%);
+                transform: translateY(-50%);
             }
             & span:hover {
                 color: $chill-l-gray;
@@ -51,8 +71,11 @@ ul.list-suggest {
     }
     &.remove-items {
         li {
-            a {
+            position: relative;
+            span {
                 @include remove_link;
+                display: block;
+                padding-right: .75rem;
             }
         }
     }
@@ -61,7 +84,14 @@ ul.list-suggest {
 /// manage remove link if it isn't a list but a title
 /// (cfr. in Vue AccompanyingCourseWorkEdit)
 div.item-title {
-    a {
+    span {
+        position: relative;
+        padding-right: .75rem;
+        padding-left: .5rem;
+        display: block;
         @include remove_link;
+        background-color: #f3f3f3;
+        border-radius: .25rem;
+        border-left: 1rem solid #16d9b4;
     }
 }

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

@@ -50,43 +50,14 @@
          </div>
 
          <!-- results which **are** attached to an objective -->
-         <div v-for="g in goalsPicked">
+         <div v-for="g in goalsPicked" :key="g.id">
-            <div>
+               <div class="item-title" @click="removeGoal(g)">
-               <div class="item-title">
+                  <span>{{ g.goal.title.fr }}</span>
-                  <a @click="removeGoal(g)"></a>
-                  {{ g.goal.title.fr }}
                </div>
-            </div>
             <div>
                <add-result :goal="g.goal" destination="goal"></add-result>
             </div>
          </div>
-
-         <!-- box to add goal -->
-         <!-- <div class="add_goal">
-            <div>
-               <div v-if="showAddObjective">
-
-                  <p>{{ $t('available_goals_text') }}</p>
-
-                  <ul class="list-suggest add-items">
-                     <li v-for="g in availableForCheckGoal" @click="addGoal(g)">
-                        <span>{{ g.title.fr }}</span>
-                     </li>
-                  </ul>
-               </div>
-               <ul class="record_actions" v-if="availableForCheckGoal.length > 0">
-                  <li>
-                     <button :title="$t('add_an_objective')" class="btn btn-create"
-                           @click="toggleAddObjective"></button>
-                  </li>
-               </ul>
-               <div v-else>
-                  <span class="chill-no-data-statement">{{ $t('no_goals_available') }}</span>
-               </div>
-            </div>
-            <div>empty for results</div>
-         </div> -->
          <div class="accordion" id="expandedSuggestions">
             <div v-if="availableForCheckGoal.length > 0" class="accordion-item">
                <h2 class="accordion-header" id="heading_expanded_suggestions">
@@ -115,7 +86,7 @@
 
                   <template v-if="isExpanded">
                      <ul class="list-suggest add-items">
-                        <li v-for="g in availableForCheckGoal" @click="addGoal(g)">
+                        <li v-for="g in availableForCheckGoal" @click="addGoal(g)" :key="g.id">
                            <span>{{ g.title.fr }}</span>
                         </li>
                      </ul>
@@ -149,7 +120,7 @@
             <div v-if="showAddEvaluation">
                <p>{{ $t('available_evaluations_text') }}</p>
                <ul class="list-suggest add-items">
-                  <li v-for="e in evaluationsForAction" @click="addEvaluation(e)">
+                  <li v-for="e in evaluationsForAction" @click="addEvaluation(e)" :key="e.id">
                      <span>{{ e.title.fr }}</span>
                   </li>
                </ul>
@@ -275,7 +246,7 @@
       <div v-if="errors.length > 0" id="errors" class="alert alert-danger flashbag">
          <p>{{ $t('fix_these_errors') }}</p>
          <ul>
-            <li v-for="e in errors">{{ e }}</li>
+            <li v-for="e in errors" :key="e.id">{{ e }}</li>
          </ul>
       </div>
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue

@@ -1,8 +1,7 @@
 <template>
    <div>
       <div class="item-title">
-         {{ evaluation.evaluation.title.fr }}
+         <span class="evaluation-title">{{ evaluation.evaluation.title.fr }}</span>
-         <a @click="removeEvaluation(evaluation)"></a>
       </div>
 
       <div v-if="!evaluation.editEvaluation">
@@ -24,7 +23,7 @@
                <dt>{{ $t('documents') }} :</dt>
                <dd>
                   <ul>
-                  <li v-for="d in evaluation.documents">
+                  <li v-for="d in evaluation.documents" :key="d.id">
                      {{ d.template.name.fr }}
                      <a :href="buildEditLink(d.storedObject)" class="btn btn-action btn-sm">
                         <i class="fa fa-edit"></i>
@@ -139,9 +138,20 @@ export default {
          this.toggleEditEvaluation();
       },
       buildEditLink(storedObject) {
-        return `/edit/${storedObject.uuid}?returnPath=` + encodeURIComponent(
+         return `/edit/${storedObject.uuid}?returnPath=` + encodeURIComponent(
             window.location.pathname + window.location.search + window.location.hash);
       },
    }
 }
 </script>
+
+<style lang="scss" scoped>
+   div.item-title{
+      .evaluation-title{
+         cursor: default;
+         &::before{
+            content: "";
+         }
+      }
+   }
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue

@@ -6,9 +6,8 @@
       </p>
 
       <ul class="list-suggest remove-items">
-         <li v-for="r in pickedResults">
+         <li v-for="r in pickedResults" @click="removeResult(r)" :key="r.id">
             <span>
-               <a @click="removeResult(r)"></a>
                {{ r.title.fr }}
             </span>
          </li>
@@ -42,7 +41,7 @@
 
                <template v-if="isExpanded">
                   <ul class="list-suggest add-items">
-                     <li v-for="r in availableForCheckResults" @click="addResult(r)">
+                     <li v-for="r in availableForCheckResults" @click="addResult(r)" :key="r.id">
                         <span>{{ r.title.fr }}</span>
                      </li>
                   </ul>