fix styles flashbag and action-row

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

@@ -1,22 +1,22 @@
 <template>
    <div id="workEditor" class="my-4">
 
-      <div id="title" class="action-title">
+      <div id="title" class="action-row">
          <label>{{ $t('action_title') }}</label>
          <p>{{ work.socialAction.text }}</p>
       </div>
 
-      <div id="startDate">
+      <div id="startDate" class="action-row">
          <label>{{ $t('startDate') }}</label>
          <input v-model="startDate" type="date"/>
       </div>
 
-      <div id="endDate">
+      <div id="endDate" class="action-row">
          <label>{{ $t('endDate') }}</label>
          <input v-model="endDate" type="date"/>
       </div>
 
-      <div id="comment">
+      <div id="comment" class="action-row">
          <label>{{ $t('comments') }}</label>
          <ckeditor
             v-model="note"
@@ -25,7 +25,7 @@
          ></ckeditor>
       </div>
 
-      <div id="objectives">
+      <div id="objectives" class="action-row">
          <div aria="hidden" class="title">
             <div><h3>{{ $t('goals_title') }}</h3></div>
             <div><h3>{{ $t('results_title') }}</h3></div>
@@ -79,7 +79,7 @@
          </div>
       </div>
 
-      <div id="evaluations">
+      <div id="evaluations" class="action-row">
          <div aria="hidden" class="title">
             <div><h3>{{ $t('Evaluations') }}</h3></div>
          </div>
@@ -106,7 +106,7 @@
          </div>
       </div>
 
-      <div id="persons">
+      <div id="persons" class="action-row">
          <h3>{{ $t('persons_involved') }}</h3>
 
          <ul>
@@ -117,7 +117,7 @@
          </ul>
       </div>
 
-      <div id="handlingThirdParty">
+      <div id="handlingThirdParty" class="action-row">
          <h3>{{ $t('handling_thirdparty') }}</h3>
 
          <div v-if="!hasHandlingThirdParty">
@@ -152,7 +152,7 @@
 
       </div>
 
-      <div id="thirdParties">
+      <div id="thirdParties" class="action-row">
          <h3>{{ $t('thirdparty_intervener') }}</h3>
 
          <div v-if="!hasThirdParties">
@@ -187,7 +187,7 @@
          </ul>
       </div>
 
-      <div v-if="errors.length > 0" id="errors">
+      <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>
@@ -347,8 +347,8 @@ export default {
          return this.$store.state.goalsForAction.filter(g => !pickedIds.includes(g.id));
       },
       availableForCheckEvaluation() {
-         console.log('evaluationsPicked', this.$store.state.evaluationsPicked);
-         console.log('evaluationsForAction', this.$store.state.evaluationsForAction);
+         //console.log('evaluationsPicked', this.$store.state.evaluationsPicked);
+         //console.log('evaluationsForAction', this.$store.state.evaluationsForAction);
          let pickedIds = this.$store.state.evaluationsPicked.map(e => e.evaluation.id);
          return this.$store.state.evaluationsForAction.filter(e => !pickedIds.includes(e.id));
       },
@@ -452,13 +452,11 @@ div#workEditor {
    #errors {
       grid-area: errors; }
 
-
-   & > div {
+   div.action-row {
       @include border-collapse;
       padding: 1em;
-   }
 
-   div.action-title {
+      &#title {
          label {
             margin-bottom: 0;
          }
@@ -469,12 +467,12 @@ div#workEditor {
          }
       }
 
-   div#objectives {
+      &#objectives {
          & > div {
             display: grid;
-         grid-template-areas: "obj res";
             grid-template-columns: 50%;
             column-gap: 0rem;
+            grid-template-areas: "obj res";
 
             & > div {
                @include border-collapse;
@@ -502,15 +500,15 @@ div#workEditor {
          }
       }
 
-   div#evaluations {
+      &#evaluations {
          & > div {
             @include border-collapse;
             padding: 1em;
          }
       }
 
-   div#objectives,
-   div#evaluations {
+      &#objectives,
+      &#evaluations {
          padding: 0;
 
          & > div.title {
@@ -554,10 +552,16 @@ div#workEditor {
          }
       }
 
-   div#persons {
+      &#persons {
          margin-top: 1.5em;
       }
+   }
 
+   div#errors {
+      &.alert {
+         margin-top: 2em;
+      }
+   }
 }
 
 </style>

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

@@ -1,5 +1,4 @@
 <template>
-   <div v-if="hasEvaluation">
    <div v-for="e in pickedEvaluations">
       <div class="item-title" @click="removeEvaluation(e)">
          <i class="fa fa-fw fa-times"></i>
@@ -23,7 +22,6 @@
          </ul>
       </div>
    </div>
-   </div>
 </template>
 
 <script>
@@ -52,9 +50,6 @@ export default {
       };
    },
    computed: {
-      hasEvaluation() {
-         return this.$store.state.evaluationsPicked.length > 0;
-      },
       pickedEvaluations() {
          return this.$store.state.evaluationsPicked;
       }