household banner: badge-member and holder mark in person theme

This commit is contained in:
Mathieu Jaumotte 2021-09-03 10:59:44 +02:00
parent b14b27c110
commit 21630a37af
4 changed files with 29 additions and 18 deletions

View File

@ -157,12 +157,19 @@ div.banner {
span.badge-member {
flex-shrink: 0; flex-grow: 0; flex-basis: auto;
color: $white;
border: 1px solid #ffffff3b;
border: 1px solid transparentize($white, 0.75);
border-bottom: 3px solid transparentize( shade-color( $chill-green, 20%), 0.3);
border-radius: 8px;
padding: 0.4em 0.8em;
padding: 0.2em 0.7em;
margin-bottom: 0.2em;
margin-right: 0.3em;
&.holder { order: -1; }
&.holder {
order: -1;
.fa-holder .text-success {
color: transparentize( shade-color( $chill-green, 20%), 0.3) !important;
}
}
&.child { order: 2; }
}
}

View File

@ -49,3 +49,15 @@ span.badge-person {
span.badge-thirdparty {
border-bottom-color: shade-color($chill-pink, 10%);
}
// household holder mark
span.fa-holder {
width: 1em;
margin: -10px 0.3em -8px 0;
i:last-child {
font-weight: 900;
color: white;
font-size: 70%;
font-family: "Open Sans Extrabold";
}
}

View File

@ -160,17 +160,6 @@ export default {
<style lang='scss'>
span.fa-holder {
width: 1em;
margin: -10px 0.3em -8px 0;
i:last-child {
font-weight: 900;
color: white;
font-size: 70%;
font-family: "Open Sans Extrabold";
}
}
.lastname:before{
content: " "
}

View File

@ -21,16 +21,19 @@
</span>
{%- for m in members|slice(0, 5) -%}
<a href="{{ path('chill_person_view', { person_id: m.person.id}) }}">
<span
class="badge-member{%- if m.holder %} holder{% endif -%}{%- if m.position.ordering >= 2 %} child{% endif -%}"
title="{{ m.position.label.fr }}">
{%- if m.holder %}
<span class="badge bg-chill-light-gray text-chill-gray">
{{ 'household.holder'|trans }}
</span>
<span class="fa-stack fa-holder" title="{{ 'household.holder'|trans }}">
<i class="fa fa-circle fa-stack-1x text-success"></i>
<i class="fa fa-stack-1x">T</i>
</span>
{% endif -%}
{{- m.person|chill_entity_render_box({'addLink': false}) -}}
{{- m.person|chill_entity_render_box() -}}
</span>
</a>
{%- endfor -%}
{% if members|length > 5 %}