mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-07-01 22:46:13 +00:00
fix styles flashbag and action-row
This commit is contained in:
Marc Ducobu
parent
a54e70f9e0
commit
14c0c9763f
@ -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,112 +452,116 @@ div#workEditor {
|
||||
#errors {
|
||||
grid-area: errors; }
|
||||
|
||||
|
||||
& > div {
|
||||
div.action-row {
|
||||
@include border-collapse;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
div.action-title {
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
&#title {
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
div#objectives {
|
||||
& > div {
|
||||
display: grid;
|
||||
grid-template-areas: "obj res";
|
||||
grid-template-columns: 50%;
|
||||
column-gap: 0rem;
|
||||
|
||||
&#objectives {
|
||||
& > div {
|
||||
@include border-collapse;
|
||||
padding: 1em;
|
||||
display: grid;
|
||||
grid-template-columns: 50%;
|
||||
column-gap: 0rem;
|
||||
grid-template-areas: "obj res";
|
||||
|
||||
&:nth-child(1) {
|
||||
grid-area: obj; }
|
||||
& > div {
|
||||
@include border-collapse;
|
||||
padding: 1em;
|
||||
|
||||
&:nth-child(2) {
|
||||
grid-area: res; }
|
||||
}
|
||||
&:nth-child(1) {
|
||||
grid-area: obj; }
|
||||
|
||||
& > div.results_without_objective {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
$gray-500,
|
||||
$gray-500 10px,
|
||||
$gray-100 10px,
|
||||
$gray-100 20px
|
||||
);
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
grid-area: res; }
|
||||
}
|
||||
|
||||
div#evaluations {
|
||||
& > div {
|
||||
@include border-collapse;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
div#objectives,
|
||||
div#evaluations {
|
||||
padding: 0;
|
||||
|
||||
& > div.title {
|
||||
background-color: $gray-200;
|
||||
color: $gray-700;
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
div.item-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul.list-evaluations,
|
||||
ul.list-objectives,
|
||||
ul.list-results {
|
||||
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0.5rem;
|
||||
|
||||
&.badge {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
& > div.results_without_objective {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
$gray-500,
|
||||
$gray-500 10px,
|
||||
$gray-100 10px,
|
||||
$gray-100 20px
|
||||
);
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i.fa {
|
||||
padding: 0.25rem;
|
||||
color: $white;
|
||||
&#evaluations {
|
||||
& > div {
|
||||
@include border-collapse;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.fa-plus { background-color: $green; }
|
||||
&.fa-times { background-color: $red; }
|
||||
&.fa-pencil { background-color: $orange; }
|
||||
&#objectives,
|
||||
&#evaluations {
|
||||
padding: 0;
|
||||
|
||||
& > div.title {
|
||||
background-color: $gray-200;
|
||||
color: $gray-700;
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
div.item-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul.list-evaluations,
|
||||
ul.list-objectives,
|
||||
ul.list-results {
|
||||
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0.5rem;
|
||||
|
||||
&.badge {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i.fa {
|
||||
padding: 0.25rem;
|
||||
color: $white;
|
||||
|
||||
&.fa-plus { background-color: $green; }
|
||||
&.fa-times { background-color: $red; }
|
||||
&.fa-pencil { background-color: $orange; }
|
||||
}
|
||||
}
|
||||
|
||||
&#persons {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
div#persons {
|
||||
margin-top: 1.5em;
|
||||
div#errors {
|
||||
&.alert {
|
||||
margin-top: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,27 +1,25 @@
|
||||
<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>
|
||||
{{ e.evaluation.title.fr }}
|
||||
</div>
|
||||
<div v-if="!editEvaluation">
|
||||
voit l'évaluation
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a class="btn btn-sm btn-update" @click="toggleEditEvaluation(e)">{{ $t('action.edit') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="editEvaluation">
|
||||
<form-evaluation ref="FormEvaluation">
|
||||
</form-evaluation>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<button class="btn btn-sm btn-update" @click="submitForm">{{ $t('action.save') }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-for="e in pickedEvaluations">
|
||||
<div class="item-title" @click="removeEvaluation(e)">
|
||||
<i class="fa fa-fw fa-times"></i>
|
||||
{{ e.evaluation.title.fr }}
|
||||
</div>
|
||||
<div v-if="!editEvaluation">
|
||||
voit l'évaluation
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a class="btn btn-sm btn-update" @click="toggleEditEvaluation(e)">{{ $t('action.edit') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="editEvaluation">
|
||||
<form-evaluation ref="FormEvaluation">
|
||||
</form-evaluation>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<button class="btn btn-sm btn-update" @click="submitForm">{{ $t('action.save') }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -52,9 +50,6 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasEvaluation() {
|
||||
return this.$store.state.evaluationsPicked.length > 0;
|
||||
},
|
||||
pickedEvaluations() {
|
||||
return this.$store.state.evaluationsPicked;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user