suggest-list: picto is managedby css

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to
 
 * [Semantic Versioning](https://semver.org/spec/v2.0.0.html) for stable releases;
 * date versioning for test releases
+* [accompanyingCourse_work] fix styles conflicts
 
 ## Unreleased
 

CONVENTIONS.md

@@ -397,7 +397,6 @@ Créer une liste de suggestions à enlever (avec une croix rouge cliquable, l'an
     <li>
         <span>
             item
-            <a></a>
         </span>
     </li>
 </ul>
@@ -405,8 +404,8 @@ Créer une liste de suggestions à enlever (avec une croix rouge cliquable, l'an
 Créer un titre enlevable (avec une croix rouge cliquable, l'ancre a est vide)
 ```html
 <div class="item-title">
-    title
+    <span>title</span>
-    <a></a>
 </div>
 ```
 Les classes `cols` ou `inline` peuvent être ajoutées à côté de `list-suggest` pour modifier la disposition de la liste.
+Dans le dernier exemple, on met une classe `removable` sur le span, si on veut pouvoir enlever l'élément.

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

@@ -8,6 +8,10 @@
         content: "\f00d";  // fa-times
         color: var(--bs-danger);
         text-decoration: none;
+        position: absolute;
+        display: block;
+        top: calc(50% - 7px);
+        right: 10px;
     }
 }
 
@@ -36,12 +40,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;
@@ -50,7 +66,10 @@ ul.list-suggest {
     }
     &.remove-items {
         li {
-            a {
+            position: relative;
+            span {
+                display: block;
+                padding-right: .75rem;
                 @include remove_link;
             }
         }
@@ -60,7 +79,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 {
-        @include remove_link;
+        display: block;
+        position: relative;
+        padding: 0.5em 0.8em;
+        background-color: $chill-llight-gray;
+        border-radius: .25rem;
+        &.removable {
+            @include remove_link;
+        }
     }
 }

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

@@ -52,7 +52,7 @@
          <!-- results which **are** attached to an objective -->
          <div v-for="g in goalsPicked" :key="g.id">
                <div class="item-title" @click="removeGoal(g)">
-                  <span>{{ g.goal.title.fr }}</span>
+                  <span class="removable">{{ g.goal.title.fr }}</span>
                </div>
             <div>
                <add-result :goal="g.goal" destination="goal"></add-result>

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

@@ -1,63 +1,14 @@
 <template>
    <div>
       <div class="item-title">
-         <span class="evaluation-title">{{ evaluation.evaluation.title.fr }}</span>
+         <span>{{ evaluation.evaluation.title.fr }}</span>
       </div>
 
-      <div v-if="!evaluation.editEvaluation">
+      <div>
-         <dl class="item-details definition-inline">
-
-            <dt v-if="evaluation.startDate">{{ $t('startDate') }} :</dt>
-            <dd v-if="evaluation.startDate">{{ $d(evaluation.startDate, 'short') }}</dd>
-
-            <dt v-if="evaluation.endDate">{{ $t('endDate') }} :</dt>
-            <dd v-if="evaluation.endDate">{{ $d(evaluation.endDate, 'short') }}</dd>
-
-            <dt v-if="evaluation.maxDate">{{ $t('maxDate') }} :</dt>
-            <dd v-if="evaluation.maxDate">{{ $d(evaluation.maxDate, 'short') }}</dd>
-
-            <dt v-if="evaluation.warningInterval">{{ $t('warningInterval') }} :</dt>
-            <dd v-if="evaluation.warningInterval">{{ evaluation.warningInterval }}</dd>
-
-            <template v-if="evaluation.documents.length > 0">
-               <dt>{{ $t('documents') }} :</dt>
-               <dd>
-                  <ul>
-                  <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>
-                     </a>
-                  </li>
-                  </ul>
-               </dd>
-            </template>
-
-         </dl>
-         <dl class="item-details">
-
-            <dt v-if="evaluation.comment">{{ $t('comment') }} :</dt>
-            <dd v-if="evaluation.comment">
-               <blockquote class="chill-user-quote">
-                  {{ evaluation.comment }}
-               </blockquote>
-            </dd>
-
-         </dl>
-         <ul class="record_actions">
-            <li>
-               <a class="btn btn-sm btn-update" @click="toggleEditEvaluation(e)">{{ $t('action.edit') }}</a>
-            </li>
-            <li>
-               <a class="btn btn-sm btn-delete" @click="modal.showModal = true">{{ $t('action.delete') }}</a>
-            </li>
-         </ul>
-      </div>
-      <div v-if="evaluation.editEvaluation">
          <form-evaluation ref="FormEvaluation" :key="evaluation.key" :evaluation="evaluation"></form-evaluation>
          <ul class="record_actions">
             <li>
-               <button class="btn btn-sm btn-update" @click="submitForm">{{ $t('action.save') }}</button>
+               <a class="btn btn-delete" @click="modal.showModal = true" :title="$t('action.delete')"></a>
             </li>
          </ul>
       </div>

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

@@ -60,6 +60,7 @@
 </template>
 
 <script>
+
 const i18n = {
    messages: {
       fr: {
@@ -149,4 +150,4 @@ export default {
    padding: .25rem;
 }
 
-</style>
+</style>

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

@@ -50,8 +50,8 @@
       </div>
 
       <div class="row mb-3">
-         <label class="col-sm-4 col-form-label">{{ $t('evaluation_public_comment') }}</label>
+         <label class="col-sm-4 col-form-label visually-hidden">{{ $t('evaluation_public_comment') }}</label>
-         <div class="col-sm-8">
+         <div class="col-sm-12">
             <ckeditor
                :editor="editor"
                :placeholder="$t('evaluation_comment_placeholder')"

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js

@@ -192,7 +192,7 @@ const store = createStore({
         type: "accompanying_period_work_evaluation",
         key: state.evaluationsPicked.length + 1,
         evaluation: evaluation,
-        startDate: null,
+        startDate: new Date(),
         endDate:  null,
         maxDate:  null,
         warningInterval: null,