Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

vue requestor component, flex-table design

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-05-25 21:44:15 +02:00
parent 2f27674e05
commit caeb75ce13
3 changed files with 70 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
View File

@ -151,7 +151,7 @@ div.flex-table {
padding: 1em; padding: 1em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
& > h5 { & > h4, & > h5 {
margin-top: 0; margin-top: 0;
margin-bottom: 0.3em; margin-bottom: 0.3em;
flex-grow: 0; flex-grow: 0;

101
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
View File

@ -3,45 +3,47 @@
<h2><a name="section-20"></a>{{ $t('requestor.title') }}</h2> <h2><a name="section-20"></a>{{ $t('requestor.title') }}</h2>
<div v-if="accompanyingCourse.requestor"> <div v-if="accompanyingCourse.requestor" class="flex-table">
<label> <label>
<input type="checkbox" v-model="isAnonymous" :value="value" /> <input type="checkbox" v-model="isAnonymous" :value="value" />
{{ $t('requestor.is_anonymous') }} {{ $t('requestor.is_anonymous') }}
</label> </label>
<dt>{{ $t('requestor.type') }}</dt> <div class="item-bloc">
<dd>{{ accompanyingCourse.requestor.type }}</dd> <h4>
<dt>{{ $t('requestor.text') }}</dt> <span class="badge badge-pill badge-secondary">{{ accompanyingCourse.requestor.type }}</span>
<dd>{{ accompanyingCourse.requestor.text }}</dd> {{ accompanyingCourse.requestor.text }}
<dt>{{ $t('requestor.is_anonymous') }}</dt> </h4>
<dd>{{ accompanyingCourse.requestorAnonymous }}</dd>
<div v-if="accompanyingCourse.requestor.type === 'person'"> <dl class="content-bloc" v-if="accompanyingCourse.requestor.type === 'person'">
<dt>{{ $t('requestor.person_id') }}</dt>
<dd>{{ accompanyingCourse.requestor.person_id }}</dd> <dt>{{ $t('requestor.birthdate') }}</dt>
<dt>{{ $t('requestor.birthdate') }}</dt> <dd>{{ $d(accompanyingCourse.requestor.birthdate.datetime, 'short') }}</dd>
<dd>{{ $d(accompanyingCourse.requestor.birthdate.datetime, 'short') }}</dd>
<dt>{{ $t('requestor.center') }}</dt> <dt>{{ $t('requestor.center') }}</dt>
<dd>{{ accompanyingCourse.requestor.center.name }}</dd> <dd>{{ accompanyingCourse.requestor.center.name }}</dd>
<dt>{{ $t('requestor.firstName') }}</dt>
<dd>{{ accompanyingCourse.requestor.firstName }}</dd> <dt>{{ $t('requestor.phonenumber') }}</dt>
<dt>{{ $t('requestor.lastName') }}</dt> <dd>{{ accompanyingCourse.requestor.phonenumber }}</dd>
<dd>{{ accompanyingCourse.requestor.lastName }}</dd> <dt>{{ $t('requestor.mobilenumber') }}</dt>
<dt>{{ $t('requestor.phonenumber') }}</dt> <dd>{{ accompanyingCourse.requestor.mobilenumber }}</dd>
<dd>{{ accompanyingCourse.requestor.phonenumber }}</dd> </dl>
<dt>{{ $t('requestor.mobilenumber') }}</dt>
<dd>{{ accompanyingCourse.requestor.mobilenumber }}</dd> <dl class="content-bloc" v-if="accompanyingCourse.requestor.type === 'thirdparty'">
<dt>{{ $t('requestor.altNames') }}</dt>
<dd>{{ accompanyingCourse.requestor.altNames }}</dd> <dt>{{ $t('requestor.address') }}</dt>
</div> <dd>{{ accompanyingCourse.requestor.address.text }}</dd>
<div v-if="accompanyingCourse.requestor.type === 'thirdparty'"> <dt>{{ $t('requestor.location') }}</dt>
<dt>{{ $t('requestor.person_id') }}</dt> <dd>{{ accompanyingCourse.requestor.address.postcode.name }}</dd>
<dd>{{ accompanyingCourse.requestor.thirdparty_id }}</dd> </dl>
<dt>{{ $t('requestor.address') }}</dt>
<dd>{{ accompanyingCourse.requestor.address.text }}</dd> <ul class="record_actions">
<dt>{{ $t('requestor.location') }}</dt> <li>
<dd>{{ accompanyingCourse.requestor.address.postcode.name }}</dd> <a class="sc-button bt-show" :title="$t('action.show')" target="_blank" :href="url.show"></a>
</li>
</ul>
</div> </div>
<ul class="record_actions"> <ul class="record_actions">
@ -53,6 +55,7 @@
</button> </button>
</li> </li>
</ul> </ul>
</div> </div>
<div v-else> <div v-else>
<label>{{ $t('requestor.counter') }}</label> <label>{{ $t('requestor.counter') }}</label>
@ -104,6 +107,13 @@ export default {
get() { get() {
return this.$store.state.accompanyingCourse.requestorAnonymous; return this.$store.state.accompanyingCourse.requestorAnonymous;
} }
},
url() {
return (this.accompanyingCourse.requestor.type === 'person') ? {
show: `/fr/person/${this.accompanyingCourse.requestor.id}/general`,
} : {
show: `/fr/thirdparty/thirdparty/${this.accompanyingCourse.requestor.id}/show`,
}
} }
}, },
methods: { methods: {
@ -120,3 +130,28 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
div.flex-table {
margin: 1em 0 0 !important;
& > label,
& > ul.record_actions {
margin: 1em 3em 0 !important;
}
div.item-bloc {
background-color: white !important;
border: 1px solid #000;
padding: 1em;
margin-top: 1em;
.content-bloc {
font-size: 100%;
}
ul.record_actions {
margin-right: 2em;
}
}
}
</style>

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
View File

@ -184,7 +184,7 @@ div#navmap {
} }
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
div.sticky-section { div#navmap {
display: none; display: none;
} }
} }