Improve the style of multi-entry info. blocks (on profiles).

This commit is contained in:
Daru13 2020-09-23 18:25:16 +02:00
parent aa3b1689d4
commit 8501f07956
3 changed files with 76 additions and 20 deletions

View file

@ -329,6 +329,24 @@ body {
background-color: #3b1e31;
box-shadow: 2px 2px 0 rgba(31, 14, 25, 0.3);
}
#content-view-profile .infos > *.multi-entry ul.value {
margin: 0;
padding: 0;
list-style-type: none;
}
#content-view-profile .infos > *.multi-entry ul.value li {
padding: 0;
}
#content-view-profile .infos > *.multi-entry ul.value li .type {
display: inline-block;
margin: 0 1em 0 0;
color: #DFDFDF;
font-style: italic;
}
#content-view-profile .infos > *.multi-entry ul.value li .value {
display: inline-block;
float: right;
}
#content-view-profile .free-text {
grid-area: free-text;
padding: 10px;

View file

@ -142,6 +142,28 @@
padding: 10px;
background-color: colors.$content-frame-background;
box-shadow: 2px 2px 0 colors.$shadow;
&.multi-entry ul.value {
margin: 0;
padding: 0;
list-style-type: none;
li {
padding: 0;
.type {
display: inline-block;
margin: 0 1em 0 0;
color: colors.$page-text-secondary;
font-style: italic;
}
.value {
display: inline-block;
float: right;
}
}
}
}
}

View file

@ -21,60 +21,76 @@
<div class="infos">
{% if profile.pronoun %}
<p class="pronouns">
<div class="pronouns">
<span class="label">{% trans "Pronom(s) utilisé(s)" %}</span>
<span class="separator"></span>
<span class="value">{{ profile.pronoun }}</span>
</p>
</div>
{% endif %}
{% if profile.department.exists %}
<p class="department">
<div class="department">
<span class="label">{% trans "Département" %}{{ profile.department.count|pluralize }}</span>
<span class="separator"></span>
<span class="value">{% for dep in profile.department.all %}{{ dep }}{% if not forloop.last %}, {% endif %}{% endfor %}</span>
</p>
</div>
{% endif %}
{% if profile.birth_date %}
<p class="birthdate">
<div class="birthdate">
<span class="label">{% trans "Date de naissance" %}</span>
<span class="separator"></span>
<span class="value">{{ profile.birth_date }}</span>
</p>
</div>
{% endif %}
{% if profile.thurne %}
<p class="room">
<div class="room">
<span class="label">{% trans "Thurne" %}</span>
<span class="separator"></span>
<span class="value">{{ profile.thurne }}</span>
</p>
</div>
{% endif %}
{% if profile.phone_set.exists %}
<p class="phone">
<div class="phone multi-entry">
<span class="label">{% trans "Téléphone" %}{{ profile.phone_set.count|pluralize }}</span>
<span class="separator"></span>
<span class="value">{% for p in profile.phone_set.all %}{{ p }}{% if not forloop.last %},<br>{% endif %}{% endfor %}</span>
</p>
<ul class="value">
{% for p in profile.phone_set.all %}
<li><span class="type">{{ p.name }}</span><span class="value">{{ p.number }}</span></li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if profile.social_set.exists %}
<p class="social">
<div class="social multi-entry">
<span class="label">{{ profile.social_set.count|pluralize:_("Réseau social,Réseaux sociaux") }}</span>
<span class="separator"></span>
<span class="value">{% for p in profile.social_set.all %}{{ p }}{% if not forloop.last %},<br>{% endif %}{% endfor %}</span>
</p>
<ul class="value">
{% for p in profile.social_set.all %}
<li><span class="type">{{ p.name }}</span><span class="value">{{ p.content }}</span></li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if profile.mail_set.exists %}
<p class="mail">
<div class="mail multi-entry">
<span class="label">{{ profile.mail_set.count|pluralize:_("Mail,Mails") }}</span>
<span class="separator"></span>
<span class="value">{% for p in profile.mail_set.all %}{{ p }}{% if not forloop.last %},<br>{% endif %}{% endfor %}</span>
</p>
<ul class="value">
{% for p in profile.mail_set.all %}
<li><span class="type">{{ p.name }}</span><span class="value">{{ p.mail }}</span></li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if profile.address_set.exists %}
<p class="address">
<div class="address multi-entry">
<span class="label">{{ profile.address_set.count|pluralize:_("Adresse,Adresses") }}</span>
<span class="separator"></span>
<span class="value">{% for p in profile.address_set.all %}{{ p }}{% if not forloop.last %},<br>{% endif %}{% endfor %}</span>
</p>
<ul class="value">
{% for p in profile.address_set.all %}
<li><span class="type">{{ p.name }}</span><span class="value">{{ p.content }}</span></li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>