fix styles flashbag and action-row

This commit is contained in:
Mathieu Jaumotte 2021-08-11 14:06:38 +02:00 committed by Marc Ducobu
parent a54e70f9e0
commit 14c0c9763f
2 changed files with 124 additions and 125 deletions

View File

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

View File

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