styling fixed with proper class cascade

This commit is contained in:
Julie Lenaerts 2021-08-13 14:57:56 +02:00
parent 166144e57e
commit 438134690f
2 changed files with 26 additions and 11 deletions

View File

@ -2,11 +2,11 @@
<person-render-box <person-render-box
:options="{ :options="{
addInfo : false, addInfo : true,
addId : true, addId : true,
addEntity: false, addEntity: false,
addLink: false, addLink: false,
addAltNames: false, addAltNames: true,
addAge : false, addAge : false,
hLevel : 1 hLevel : 1
}" }"

View File

@ -1,4 +1,7 @@
<template> <template>
<div class="flex-table mb-3">
<div class="item-bloc">
<section class="chill-entity entity-person">
<!-- ENTIRE RENDER_BOX --> <!-- ENTIRE RENDER_BOX -->
<div class="item-row entity-bloc"> <div class="item-row entity-bloc">
@ -7,7 +10,7 @@
<div class="entity-label"> <div class="entity-label">
<!-- NAME TAG --> <!-- NAME TAG -->
<div class="denomination **h_level**"> <div class="denomination h3">
<!-- NAME IF ADD LINK AND PERMISSION GRANTED --> <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
<a v-if="this.options.addLink == true" href="#"> <a v-if="this.options.addLink == true" href="#">
@ -40,12 +43,13 @@
<!-- BIRTHDATE / DEATHDATE AND AGE --> <!-- BIRTHDATE / DEATHDATE AND AGE -->
<p v-if="this.options.addInfo == true" class="moreinfo"> <p v-if="this.options.addInfo == true" class="moreinfo">
<i class="fa fa-fw **gender**" title="**gender title**"></i> <i :class="'fa fa-fw' + this.gender" title="{{this.gender}}"></i>
<time datetime="13/05/1867" title="**birthdate**"> <time datetime="13/05/1867" title="**birthdate**">
{{ participation.person.birthdate }} {{ participation.person.birthdate }}
</time> </time>
<span class="age">{{ participation.person.age }}</span> <span class="age">{{ participation.person.age }}</span>
</p> </p>
<p>{{this.gender}}</p>
<!-- END BIRTH/DEATH AND AGE --> <!-- END BIRTH/DEATH AND AGE -->
</div> </div>
@ -61,10 +65,15 @@
<!-- PHONENUMBER --> <!-- PHONENUMBER -->
<li> <li>
<i class="fa fa-li fa-mobile"></i><a href="#">{{ participation.person.mobilenumber }}</a> <div v-if="this.participation.person.mobilenumber">
<i class="fa fa-li fa-phone"></i> <i class="fa fa-li fa-mobile"></i>
<a href="#">{{ participation.person.phonenumber }}</a> <a href="#">{{ participation.person.mobilenumber }}</a>
<span class="chill-no-data-statement">**no phonenumber**</span> </div>
<div v-else-if="this.participation.person.phonenumber">
<i class="fa fa-li fa-phone"></i>
<a href="#">{{ participation.person.phonenumber }}</a>
</div>
<span v-else class="chill-no-data-statement">No phonenumber listed</span>
</li> </li>
</ul> </ul>
<!-- END ADDRESS AND PHONE NUMBER --> <!-- END ADDRESS AND PHONE NUMBER -->
@ -81,19 +90,25 @@
<!-- END EXTRA INFO AND ACTIONS --> <!-- END EXTRA INFO AND ACTIONS -->
</div> </div>
</section>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: "PersonRenderBox", name: "PersonRenderBox",
props: ['participation', 'options'], props: ['participation', 'options'],
computed: {
}
} }
</script> </script>
<style> <style>
.item-row{ .lastname:before{
border: 1px solid black; content: " "
} }
</style> </style>