From 09a898e88ec3e85854196aa90b26b11e94ae1031 Mon Sep 17 00:00:00 2001
From: Lars Eggert <lars@eggert.org>
Date: Tue, 12 Apr 2022 18:02:16 +0300
Subject: [PATCH] fix: Improve the layout of the photo pages (#3807)

---
 ietf/static/css/ietf.scss              | 8 ++++++--
 ietf/templates/group/all_photos.html   | 5 +++--
 ietf/templates/group/group_photos.html | 5 +++--
 ietf/templates/person/photo.html       | 7 ++++---
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
index b46dd5b68..5c8742767 100644
--- a/ietf/static/css/ietf.scss
+++ b/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;
+        }
     }
 }
 
diff --git a/ietf/templates/group/all_photos.html b/ietf/templates/group/all_photos.html
index b73163ba2..8d8512e75 100644
--- a/ietf/templates/group/all_photos.html
+++ b/ietf/templates/group/all_photos.html
@@ -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 %}
\ No newline at end of file
+{% endblock %}
diff --git a/ietf/templates/group/group_photos.html b/ietf/templates/group/group_photos.html
index c12f1673d..beb42ddc1 100644
--- a/ietf/templates/group/group_photos.html
+++ b/ietf/templates/group/group_photos.html
@@ -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 %}
\ No newline at end of file
+{% endblock %}
diff --git a/ietf/templates/person/photo.html b/ietf/templates/person/photo.html
index b4986e2e1..4cea8ccb1 100644
--- a/ietf/templates/person/photo.html
+++ b/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>
\ No newline at end of file
+</div>