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;
display: flex;
flex-direction: row;
& > h5 {
& > h4, & > h5 {
margin-top: 0;
margin-bottom: 0.3em;
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>
<div v-if="accompanyingCourse.requestor">
<div v-if="accompanyingCourse.requestor" class="flex-table">
<label>
<input type="checkbox" v-model="isAnonymous" :value="value" />
{{ $t('requestor.is_anonymous') }}
</label>
<dt>{{ $t('requestor.type') }}</dt>
<dd>{{ accompanyingCourse.requestor.type }}</dd>
<dt>{{ $t('requestor.text') }}</dt>
<dd>{{ accompanyingCourse.requestor.text }}</dd>
<dt>{{ $t('requestor.is_anonymous') }}</dt>
<dd>{{ accompanyingCourse.requestorAnonymous }}</dd>
<div class="item-bloc">
<h4>
<span class="badge badge-pill badge-secondary">{{ accompanyingCourse.requestor.type }}</span>
{{ accompanyingCourse.requestor.text }}
</h4>
<div v-if="accompanyingCourse.requestor.type === 'person'">
<dt>{{ $t('requestor.person_id') }}</dt>
<dd>{{ accompanyingCourse.requestor.person_id }}</dd>
<dt>{{ $t('requestor.birthdate') }}</dt>
<dd>{{ $d(accompanyingCourse.requestor.birthdate.datetime, 'short') }}</dd>
<dt>{{ $t('requestor.center') }}</dt>
<dd>{{ accompanyingCourse.requestor.center.name }}</dd>
<dt>{{ $t('requestor.firstName') }}</dt>
<dd>{{ accompanyingCourse.requestor.firstName }}</dd>
<dt>{{ $t('requestor.lastName') }}</dt>
<dd>{{ accompanyingCourse.requestor.lastName }}</dd>
<dt>{{ $t('requestor.phonenumber') }}</dt>
<dd>{{ accompanyingCourse.requestor.phonenumber }}</dd>
<dt>{{ $t('requestor.mobilenumber') }}</dt>
<dd>{{ accompanyingCourse.requestor.mobilenumber }}</dd>
<dt>{{ $t('requestor.altNames') }}</dt>
<dd>{{ accompanyingCourse.requestor.altNames }}</dd>
</div>
<div v-if="accompanyingCourse.requestor.type === 'thirdparty'">
<dt>{{ $t('requestor.person_id') }}</dt>
<dd>{{ accompanyingCourse.requestor.thirdparty_id }}</dd>
<dt>{{ $t('requestor.address') }}</dt>
<dd>{{ accompanyingCourse.requestor.address.text }}</dd>
<dt>{{ $t('requestor.location') }}</dt>
<dd>{{ accompanyingCourse.requestor.address.postcode.name }}</dd>
<dl class="content-bloc" v-if="accompanyingCourse.requestor.type === 'person'">
<dt>{{ $t('requestor.birthdate') }}</dt>
<dd>{{ $d(accompanyingCourse.requestor.birthdate.datetime, 'short') }}</dd>
<dt>{{ $t('requestor.center') }}</dt>
<dd>{{ accompanyingCourse.requestor.center.name }}</dd>
<dt>{{ $t('requestor.phonenumber') }}</dt>
<dd>{{ accompanyingCourse.requestor.phonenumber }}</dd>
<dt>{{ $t('requestor.mobilenumber') }}</dt>
<dd>{{ accompanyingCourse.requestor.mobilenumber }}</dd>
</dl>
<dl class="content-bloc" v-if="accompanyingCourse.requestor.type === 'thirdparty'">
<dt>{{ $t('requestor.address') }}</dt>
<dd>{{ accompanyingCourse.requestor.address.text }}</dd>
<dt>{{ $t('requestor.location') }}</dt>
<dd>{{ accompanyingCourse.requestor.address.postcode.name }}</dd>
</dl>
<ul class="record_actions">
<li>
<a class="sc-button bt-show" :title="$t('action.show')" target="_blank" :href="url.show"></a>
</li>
</ul>
</div>
<ul class="record_actions">
@ -53,6 +55,7 @@
</button>
</li>
</ul>
</div>
<div v-else>
<label>{{ $t('requestor.counter') }}</label>
@ -104,6 +107,13 @@ export default {
get() {
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: {
@ -120,3 +130,28 @@ export default {
}
}
</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) {
div.sticky-section {
div#navmap {
display: none;
}
}