Commit 5e98d034 authored by Huste, Tobias (FWCC) - 111645's avatar Huste, Tobias (FWCC) - 111645 Committed by Erxleben, Fredo (FWCC) - 136987
Browse files

Restyle team card mini

- Remove title
- Remove affiliation
- Add photo of person, if available. Otherwise show a fontawesome icon
parent a72d6f65
Pipeline #19189 passed with stages
in 6 minutes
......@@ -16,7 +16,7 @@
| append: person.image %}
<img class="portrait"
src="{{ image-url | strip | absolute_url }}"
alt="Picture of {{person.name }}">
alt="Picture of {{ person.name }}">
{% else %}
<div class="portrait"> </div>
{% endif %}
......
{% comment %}
TODO make "person" an include parameter
This is a template for the mini version of a team card.
It contains the name, title and organization abbreviation.
It is expected that a liquid object "person" is defined before usage
which has the attributes "name", "title"(optional), "organization"(optional)
The "organization" is expected to be a reference into hifis_organization.yml
It contains the name and a picture of the person, if available.
{% endcomment %}
{% assign person = include.person %}
{% if person %}
<span class="team-card-mini">
<a href="{{ person.id | prepend: 'members/' | absolute_url }}">
<i class="fas fa-user"></i>&nbsp;
{% include team_card/organization_short.html person=person %}
{% include team_card/title.html person=person %}
{% if person.image %}
{% assign image-url = site.directory.images
| append: "members/"
| append: person.image %}
<img src="{{ image-url | strip | absolute_url }}" alt="Picture of {{ person.name }}">
{% else %}
<i class="fas fa-user"></i>
{% endif %}
{% include team_card/name.html person=person %}
</a>
</span>
{% else %}
<!--
<!--
WARNING: team_card_mini.html was included,
but parameter person was not defined
-->
......
......@@ -13,6 +13,36 @@
padding-left: 0.5rem;
padding-right: 0.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
img {
@include respond-to-medium(width, 1.5rem);
@include respond-to-medium(height, 2rem);
@include respond-to-medium(min-width, 1.5rem);
@include respond-to-medium(min-height, 2rem);
@include respond-to-medium(max-width, 1.5rem);
@include respond-to-medium(max-height, 2rem);
@include drop-shadow();
flex-shrink: 0; /* Don't shrink */
object-fit: cover;
object-position: center;
vertical-align: middle;
border-radius: $border-radius;
}
.fas {
@include respond-to-medium(width, 1.5rem);
@include respond-to-medium(font-size, 1.5rem);
text-align: center;
vertical-align: middle;
}
/*
The following are included to remind of the enclosed structure
even though they have no specific CSS at the moment.
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment