applying floatbutton logic on person/thirdparty vue renderbox

This commit is contained in:
Mathieu Jaumotte 2021-09-06 15:49:15 +02:00
parent 1a95b44577
commit 98b0b3beeb
4 changed files with 70 additions and 58 deletions

View File

@ -260,6 +260,8 @@ div.wrap-header {
/*
* FLOATBUTTON
* pas convaincant:
* conflits avec les fa-ul > li, lien non cliquables, text qui ne se place pas correctement
*/
div.floatbutton {
@ -302,6 +304,6 @@ div.floatbutton {
// avoid a position relative that make links unclickable
.fa-ul > li {
position: initial;
//position: initial; // in conflict with picto fa-ul !!
}
}

View File

@ -43,7 +43,7 @@ const appMessages = {
add_persons: "Ajouter des usagers",
date_start_to_end: "Participation du {start} au {end}",
leave_course: "L'usager quitte le parcours",
show_household_number: "Voir le ménage n° {id}",
show_household_number: "Voir le ménage (n° {id})",
show_household: "Voir le ménage"
},
requestor: {

View File

@ -41,54 +41,59 @@
</div>
<div class="item-col">
<ul class="list-content fa-ul">
<div class="floatbutton bottom">
<div class="box">
<div class="action">
<slot name="record-actions"></slot>
</div>
<ul class="list-content fa-ul">
<li v-if="person.current_household_address">
<i class="fa fa-li fa-map-marker"></i>
<address-render-box :address="person.current_household_address" :isMultiline="isMultiline"></address-render-box>
<a :href="getCurrentHouseholdUrl" :title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
<li v-if="person.current_household_address">
<i class="fa fa-li fa-map-marker"></i>
<address-render-box :address="person.current_household_address" :isMultiline="isMultiline"></address-render-box>
<a :href="getCurrentHouseholdUrl" :title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
<span class="badge rounded-pill bg-chill-beige">
<i class="fa fa-fw fa-home"></i>
<!--{{ $t('persons_associated.show_household') }}-->
</span>
</a>
<br>
</li>
<li v-else-if="options.addNoData">
<i class="fa fa-li fa-map-marker"></i>
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
</li>
</a>
<br>
</li>
<li v-else-if="options.addNoData">
<i class="fa fa-li fa-map-marker"></i>
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
</li>
<li v-if="person.mobilenumber">
<i class="fa fa-li fa-mobile"></i>
<a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
</li>
<li v-else-if="options.addNoData">
<i class="fa fa-li fa-mobile"></i>
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
</li>
<li v-if="person.phonenumber">
<i class="fa fa-li fa-phone"></i>
<a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
</li>
<li v-else-if="options.addNoData">
<i class="fa fa-li fa-phone"></i>
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
</li>
<li v-if="person.mobilenumber">
<i class="fa fa-li fa-mobile"></i>
<a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
</li>
<li v-else-if="options.addNoData">
<i class="fa fa-li fa-mobile"></i>
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
</li>
<li v-if="person.phonenumber">
<i class="fa fa-li fa-phone"></i>
<a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
</li>
<li v-else-if="options.addNoData">
<i class="fa fa-li fa-phone"></i>
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
</li>
<li v-if="person.center && options.addCenter">
<i class="fa fa-li fa-long-arrow-right"></i>
{{ person.center.name }}
</li>
<li v-else-if="options.addNoData">
<i class="fa fa-li fa-long-arrow-right"></i>
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
</li>
<slot name="custom-zone"></slot>
<li v-if="person.center && options.addCenter">
<i class="fa fa-li fa-long-arrow-right"></i>
{{ person.center.name }}
</li>
<li v-else-if="options.addNoData">
<i class="fa fa-li fa-long-arrow-right"></i>
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
</li>
<slot name="custom-zone"></slot>
</ul>
<slot name="record-actions"></slot>
</ul>
</div>
</div>
</div>
</div>

View File

@ -32,23 +32,28 @@
</div>
<div class="item-col">
<ul class="list-content fa-ul">
<li v-if="thirdparty.address">
<i class="fa fa-li fa-map-marker"></i>
<address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
</li>
<li v-if="thirdparty.telephone">
<i class="fa fa-li fa-mobile"></i>
<a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
</li>
<li v-if="thirdparty.email">
<i class="fa fa-li fa-envelope-o"></i>
<a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
</li>
<div class="floatbutton bottom">
<div class="box">
<div class="action">
<slot name="record-actions"></slot>
</div>
<ul class="list-content fa-ul">
<li v-if="thirdparty.address">
<i class="fa fa-li fa-map-marker"></i>
<address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
</li>
<li v-if="thirdparty.telephone">
<i class="fa fa-li fa-mobile"></i>
<a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
</li>
<li v-if="thirdparty.email">
<i class="fa fa-li fa-envelope-o"></i>
<a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
</li>
</ul>
</div>
</div>
</ul>
<slot name="record-actions"></slot>
</div>
</div>
</section>