mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
improve AccompanyingCourse ux design
This commit is contained in:
parent
199e5a73d8
commit
8bd75429c1
@ -24,7 +24,6 @@ import Referrer from './components/Referrer.vue';
|
||||
import Resources from './components/Resources.vue';
|
||||
import Comment from './components/Comment.vue';
|
||||
import Confirm from './components/Confirm.vue';
|
||||
//import Test from './components/Test.vue';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
@ -50,12 +49,13 @@ export default {
|
||||
}
|
||||
div.vue-component {
|
||||
h2 {
|
||||
margin-left: 0.7em;
|
||||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "\f1dd";
|
||||
content: "\f192";
|
||||
font-family: "ForkAwesome";
|
||||
color: lightgrey;
|
||||
color: #718596ab;
|
||||
left: -28px;
|
||||
top: 4px;
|
||||
}
|
||||
@ -64,12 +64,12 @@ export default {
|
||||
top: -2em;
|
||||
}
|
||||
}
|
||||
padding: 1.5em 1em;
|
||||
padding: 0.8em 0em;
|
||||
margin: 2em 0;
|
||||
border: 1px solid lightgrey;
|
||||
border: 1px dotted #718596ab;
|
||||
border-radius: 5px;
|
||||
border-left: 1px dotted lightgrey;
|
||||
border-right: 1px dotted lightgrey;
|
||||
border-left: 1px dotted #718596ab;
|
||||
border-right: 1px dotted #718596ab;
|
||||
/*
|
||||
position: relative;
|
||||
&:before {
|
||||
@ -85,5 +85,10 @@ export default {
|
||||
dd {
|
||||
margin-left: 1em;
|
||||
}
|
||||
& > div {
|
||||
margin: 1em 3em 0;
|
||||
}
|
||||
table {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,9 +2,16 @@
|
||||
|
||||
<div class="vue-component" style="display: none;">
|
||||
<dl>
|
||||
<dt>{{ $t('course.id') }}</dt>
|
||||
<dd>{{ accompanyingCourse.id }}</dd>
|
||||
</dl>
|
||||
<dt>{{ $t('course.id') }}</dt>
|
||||
<dd>{{ accompanyingCourse.id }}</dd>
|
||||
</dl>
|
||||
<dl v-if="accompanyingCourse.closingDate">
|
||||
<dt>{{ $t('course.closing_date') }}</dt>
|
||||
<dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
|
||||
|
||||
<dt>{{ $t('course.closing_motive') }}</dt>
|
||||
<dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<teleport to="#header-accompanying_course-name #banner-flags">
|
||||
|
||||
@ -92,6 +92,6 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div.vue-component > div {
|
||||
margin: 1em;
|
||||
//margin: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,24 +13,16 @@
|
||||
{{ $t('confirm.text_active') }}
|
||||
<span class="badge badge-primary">{{ $t('course.step.active') }}</span>
|
||||
</p>
|
||||
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<button class="sc-button bt-save" @click="modal.showModal = true">
|
||||
{{ $t('confirm.ok') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<dl v-if="accompanyingCourse.closingDate">
|
||||
<dt>{{ $t('course.closing_date') }}</dt>
|
||||
<dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
|
||||
|
||||
<dt>{{ $t('course.closing_motive') }}</dt>
|
||||
<dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
|
||||
</dl>
|
||||
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<button class="sc-button bt-save" @click="modal.showModal = true">
|
||||
{{ $t('confirm.ok') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<teleport to="body">
|
||||
<modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
|
||||
<template v-slot:header>
|
||||
@ -83,6 +75,6 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div.vue-component > div {
|
||||
margin: 1em;
|
||||
//margin: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h2><a name="section-10"></a>{{ $t('persons_associated.title')}}</h2>
|
||||
<label>{{ $tc('persons_associated.counter', counter) }}</label>
|
||||
<table class="rounded">
|
||||
|
||||
<div>
|
||||
<label>{{ $tc('persons_associated.counter', counter) }}</label>
|
||||
</div>
|
||||
|
||||
<table class="rounded" v-if="participations.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="chill-orange">{{ $t('persons_associated.firstname') }}</th>
|
||||
@ -23,14 +27,16 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<add-persons
|
||||
buttonTitle="persons_associated.add_persons"
|
||||
modalTitle="add_persons.title"
|
||||
v-bind:key="addPersons.key"
|
||||
v-bind:options="addPersons.options"
|
||||
@addNewPersons="addNewPersons"
|
||||
ref="addPersons"> <!-- to cast child method -->
|
||||
</add-persons>
|
||||
<div>
|
||||
<add-persons
|
||||
buttonTitle="persons_associated.add_persons"
|
||||
modalTitle="add_persons.title"
|
||||
v-bind:key="addPersons.key"
|
||||
v-bind:options="addPersons.options"
|
||||
@addNewPersons="addNewPersons"
|
||||
ref="addPersons"> <!-- to cast child method -->
|
||||
</add-persons>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -43,22 +43,28 @@
|
||||
<dt>{{ $t('requestor.location') }}</dt>
|
||||
<dd>{{ accompanyingCourse.requestor.address.postcode.name }}</dd>
|
||||
</div>
|
||||
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<button class="sc-button bt-remove"
|
||||
:title="$t('action.remove')"
|
||||
@click="removeRequestor">
|
||||
{{ $t('action.remove') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<add-persons v-if="accompanyingCourse.requestor === null"
|
||||
buttonTitle="requestor.add_requestor"
|
||||
modalTitle="requestor.add_requestor"
|
||||
v-bind:key="addPersons.key"
|
||||
v-bind:options="addPersons.options"
|
||||
@addNewPersons="addNewPersons"
|
||||
ref="addPersons"> <!-- to cast child method -->
|
||||
</add-persons>
|
||||
</div>
|
||||
|
||||
<button v-if="accompanyingCourse.requestor !== null"
|
||||
class="sc-button bt-remove"
|
||||
:title="$t('action.remove')"
|
||||
@click="removeRequestor">
|
||||
</button>
|
||||
|
||||
<add-persons v-if="accompanyingCourse.requestor === null"
|
||||
buttonTitle="requestor.add_requestor"
|
||||
modalTitle="requestor.add_requestor"
|
||||
v-bind:key="addPersons.key"
|
||||
v-bind:options="addPersons.options"
|
||||
@addNewPersons="addNewPersons"
|
||||
ref="addPersons"> <!-- to cast child method -->
|
||||
</add-persons>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -3,8 +3,11 @@
|
||||
|
||||
<h2><a name="section-50"></a>{{ $t('resources.title')}}</h2>
|
||||
|
||||
<label>{{ $tc('resources.counter', counter) }}</label>
|
||||
<table class="rounded">
|
||||
<div>
|
||||
<label>{{ $tc('resources.counter', counter) }}</label>
|
||||
</div>
|
||||
|
||||
<table class="rounded" v-if="resources.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="chill-orange">{{ $t('resources.text') }}</th>
|
||||
@ -22,14 +25,16 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<add-persons
|
||||
buttonTitle="resources.add_resources"
|
||||
modalTitle="resources.add_resources"
|
||||
v-bind:key="addPersons.key"
|
||||
v-bind:options="addPersons.options"
|
||||
@addNewPersons="addNewPersons"
|
||||
ref="addPersons"> <!-- to cast child method -->
|
||||
</add-persons>
|
||||
<div>
|
||||
<add-persons
|
||||
buttonTitle="resources.add_resources"
|
||||
modalTitle="resources.add_resources"
|
||||
v-bind:key="addPersons.key"
|
||||
v-bind:options="addPersons.options"
|
||||
@addNewPersons="addNewPersons"
|
||||
ref="addPersons"> <!-- to cast child method -->
|
||||
</add-persons>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="vue-component">
|
||||
<h2><a name="section-30"></a>{{ $t('social_issue.title') }}</h2>
|
||||
|
||||
<div>
|
||||
<div class="my-4">
|
||||
<!--label for="selectIssues">{{ $t('social_issue.label') }}</label-->
|
||||
<VueMultiselect
|
||||
name="selectIssues"
|
||||
@ -55,6 +55,6 @@ export default {
|
||||
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
||||
<style lang="scss" scoped>
|
||||
div.vue-component > div {
|
||||
margin: 3em;
|
||||
//margin: 3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,7 +28,7 @@ const appMessages = {
|
||||
},
|
||||
persons_associated: {
|
||||
title: "Usagers concernés",
|
||||
counter: "Pas d'usager | 1 usager | {count} usagers",
|
||||
counter: "Il n'y a pas encore d'usager | 1 usager | {count} usagers",
|
||||
firstname: "Prénom",
|
||||
lastname: "Nom",
|
||||
startdate: "Date d'entrée",
|
||||
@ -61,7 +61,7 @@ const appMessages = {
|
||||
},
|
||||
resources: {
|
||||
title: "Interlocuteurs privilégiés",
|
||||
counter: "Pas d'interlocuteur | 1 interlocuteur | {count} interlocuteurs",
|
||||
counter: "Il n'y a pas encore d'interlocuteur | 1 interlocuteur | {count} interlocuteurs",
|
||||
text: "Dénomination",
|
||||
description: "Description",
|
||||
add_resources: "Ajouter des interlocuteurs",
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<button class="sc-button bt-create centered mt-4" @click="openModal">
|
||||
{{ $t(buttonTitle) }}
|
||||
</button>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<button class="sc-button bt-create" @click="openModal">
|
||||
{{ $t(buttonTitle) }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<teleport to="body">
|
||||
<modal v-if="modal.showModal"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user