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 * FLOATBUTTON
* pas convaincant:
* conflits avec les fa-ul > li, lien non cliquables, text qui ne se place pas correctement
*/ */
div.floatbutton { div.floatbutton {
@ -302,6 +304,6 @@ div.floatbutton {
// avoid a position relative that make links unclickable // avoid a position relative that make links unclickable
.fa-ul > li { .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", add_persons: "Ajouter des usagers",
date_start_to_end: "Participation du {start} au {end}", date_start_to_end: "Participation du {start} au {end}",
leave_course: "L'usager quitte le parcours", 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" show_household: "Voir le ménage"
}, },
requestor: { requestor: {

View File

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

View File

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