altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions6 Packages Projects Releases Wiki Activity

fix: Improve the layout of the photo pages ()

Browse source
This commit is contained in:
Lars Eggert 2022-04-12 18:02:16 +03:00 committed by GitHub
parent f98cb8a4cd
commit 09a898e88e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 9 deletions
ietf
static/css
ietf.scss
templates
group
all_photos.htmlgroup_photos.html
person
photo.html

8
ietf/static/css/ietf.scss
View file

@ -151,7 +151,7 @@ table tbody.meta {
// Style the photo cards
.photo {
width: 13em;
width: 12em;
.card-img-top {
object-fit: cover;
@ -160,7 +160,11 @@ table tbody.meta {
.photo-placeholder {
height: 15em;
font-size: 12em;
.bi {
font-size: 10em;
color: $gray-300;
}
}
}

5
ietf/templates/group/all_photos.html
View file

@ -10,10 +10,11 @@
{% for letter in alphabet_blocks %}
<h2 class="mt-4" id="{{ letter.grouper }}">{{ letter.grouper }}</h2>
{% regroup letter.list by person as person_groups %}
<div class="mt-0 row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-2 row-cols-xl-3 row-cols-xxl-3 g-3">
{# keep in sync with group_photos.html #}
<div class="mt-0 row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-4 row-cols-xxl-5 g-2">
{% for person_with_groups in person_groups %}
<div class="col">{% include "person/photo.html" with person=person_with_groups.grouper groups=person_with_groups.list%}</div>
{% endfor %}
</div>
{% endfor %}
{% endblock %}
{% endblock %}

5
ietf/templates/group/group_photos.html
View file

@ -11,7 +11,8 @@
<div class="row" id="{{ role_name.grouper|urlencode }}">
<h3 class="mt-4">{{ role_name.grouper }}{{ role_name.list|pluralize }}</h3>
{% regroup role_name.list by person as person_groups %}
<div class="mt-0 row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-2 row-cols-xl-3 row-cols-xxl-3 g-3">
{# keep in sync with all_photos.html #}
<div class="mt-0 row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-4 row-cols-xxl-5 g-2">
{% for person_with_groups in person_groups %}
<div class="col">
{% include "person/photo.html" with person=person_with_groups.grouper groups=person_with_groups.list %}
@ -20,4 +21,4 @@
</div>
</div>
{% endfor %}
{% endblock %}
{% endblock %}

7
ietf/templates/person/photo.html
View file

@ -11,19 +11,20 @@
alt="Photo of {{ person.name }}">
{% else %}
<div class="photo-placeholder">
<i class="bi bi-person text-muted"></i>
<i class="bi bi-person"></i>
</div>
{% endif %}
{% if name or email %}</a>{% endif %}
<div class="card-body">
<p class="lead mb-1">
<p class="mb-1">
{% person_link person with_email=False %}
</p>
{% for role in groups %}
<a title="{{ role.group.name }} {{ role.group.type | upper }}"
class="small"
href="{% url 'ietf.group.views.group_home' acronym=role.group.acronym %}">
{{ role.group.acronym }}
</a>
{% endfor %}
</div>
</div>
</div>