fix: Improve the layout of the photo pages (ietf-tools#3807)

Author: larseggert

ietf/static/css/ietf.scss

@@ -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;
+        }
     }
 }
 

ietf/templates/group/all_photos.html

@@ -10,10 +10,11 @@ <h1>{{ group_type | upper }} {{ role }} photos</h1>
     {% 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 %}

ietf/templates/group/group_photos.html

@@ -11,7 +11,8 @@ <h2 class="my-3">{{ group }} ({{ group.acronym }}) photos</h2>
         <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 @@ <h3 class="mt-4">{{ role_name.grouper }}{{ role_name.list|pluralize }}</h3>
             </div>
         </div>
     {% endfor %}
-{% endblock %}
+{% endblock %}

ietf/templates/person/photo.html

@@ -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>