Mobile project page: funder sizing, info-list spacing, former leads (#1271)

Three post-release tweaks to the 2.23.0 mobile project-page redesign:

1. Funding logos rendered at wildly different sizes — wide wordmarks (e.g.
   Mapillary) were squished into the square cropped thumbnail and shrank to a
   sliver. Generate the funder thumbnail aspect-preserving (drop crop=True) and
   pin a uniform 30px display height, so badges and wordmarks read at consistent
   weight.

2. On metadata-light projects (e.g. homesound), the info-list's first top
   border crowded the description because the block had no top margin when it
   followed the prose directly (no featured video between). Add margin-top.

3. Team now surfaces former leads: current leads render inline and former
   (ended-role) leads collapse into the "+N former lead(s)" <details>. The view
   splits leadership into project_leads_current / project_leads_former.

Regression tests updated for the current-vs-former split.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: jonfroehlich

website/static/website/css/project.css

@@ -762,6 +762,13 @@
 
 /* --- Labeled info-list (Links / Team / Funding) ---------------------------- */
 
+/* Space above the info-list so its first row's top border doesn't crowd the
+   preceding prose on metadata-light projects where it follows the description
+   directly (no featured video between them) (#1271). */
+.project-meta-info {
+  margin-top: var(--space-6);
+}
+
 .project-info-list {
   margin: 0;
 }
@@ -955,9 +962,14 @@
   justify-content: center;
 }
 
+/* Uniform display height with aspect preserved (the thumbnail is generated
+   un-cropped), so badge logos and wide wordmarks read at consistent weight and
+   the wide ones aren't shrunk. max-width keeps an unusually wide logo from
+   overflowing the column. */
 .project-funder-img {
-  max-height: 38px;
+  height: 30px;
   width: auto;
+  max-width: 100%;
   object-fit: contain;
 }
 

website/templates/website/project.html

@@ -185,12 +185,12 @@ <h1 class="sr-only">{{ project.name }}</h1>
 
       {% comment %}
       Mobile-only metadata info-list (#1271): Links (as clickable chips), Team
-      (leads, with "+N more" collapsed into a native <details>), and Funding.
-      Placed below the description + featured video so this supporting context no
-      longer sits above the description (the core complaint in #1271). Hidden
-      ≥992px, where the desktop sidebar renders the same data.
+      (current leads inline, former leads collapsed into a native <details>),
+      and Funding. Placed below the description + featured video so this
+      supporting context no longer sits above the description (the core complaint
+      in #1271). Hidden ≥992px, where the desktop sidebar renders the same data.
       {% endcomment %}
-      {% if website or featured_code_repo_url or data_url or active_leads_ordered or sponsors %}
+      {% if website or featured_code_repo_url or data_url or project_leads_current or project_leads_former or sponsors %}
       <div class="project-mobile-meta project-meta-info">
         <dl class="project-info-list">
 
@@ -219,21 +219,21 @@ <h1 class="sr-only">{{ project.name }}</h1>
           </div>
           {% endif %}
 
-          {% if active_leads_ordered %}
+          {% if project_leads_current or project_leads_former %}
           <div class="project-info-row">
             <dt class="project-info-label">Team</dt>
             <dd class="project-info-value">
-              {% for lead in active_leads_ordered|slice:":4" %}
+              {% for lead in project_leads_current %}
               {% include "snippets/display_project_team_member_mobile.html" with lead=lead %}
               {% endfor %}
-              {% if active_leads_ordered|length > 4 %}
+              {% if project_leads_former %}
               <details class="project-team-more">
                 <summary class="project-team-more-summary">
                   <span class="project-team-more-caret" aria-hidden="true">›</span>
-                  <span class="project-team-more-show">+ {{ active_leads_ordered|length|add:"-4" }} more</span>
+                  <span class="project-team-more-show">{{ project_leads_former|length }} former lead{{ project_leads_former|length|pluralize }}</span>
                   <span class="project-team-more-hide">Show fewer</span>
                 </summary>
-                {% for lead in active_leads_ordered|slice:"4:" %}
+                {% for lead in project_leads_former %}
                 {% include "snippets/display_project_team_member_mobile.html" with lead=lead %}
                 {% endfor %}
               </details>
@@ -251,8 +251,14 @@ <h1 class="sr-only">{{ project.name }}</h1>
                 {% if sponsor.icon %}
                 <div class="project-funder">
                   {% if sponsor.url %}<a href="{{ sponsor.url }}" aria-label="Visit {{ sponsor.name }} website">{% endif %}
-                    <img class="project-funder-img"
-                         src="{% thumbnail sponsor.icon sponsor.get_thumbnail_size_as_str box=sponsor.icon_cropping crop=True upscale=True %}"
+                    {% comment %}
+                  Aspect-preserving (no crop=True): scale each logo to fit within
+                  the box so wide wordmarks (e.g. Mapillary) render full-width
+                  instead of being squished into a square and shrinking. CSS pins
+                  a uniform display height (#1271).
+                  {% endcomment %}
+                  <img class="project-funder-img"
+                         src="{% thumbnail sponsor.icon '600x60' box=sponsor.icon_cropping upscale=True %}"
                          alt="{{ sponsor.get_icon_alt_text }}"
                          title="{{ sponsor.name }}">
                   {% if sponsor.url %}</a>{% endif %}

website/tests/test_project_page.py

@@ -27,10 +27,6 @@
 class ProjectPageMobileMetaTests(DatabaseTestCase):
     """Renders a fully-populated, visible project and asserts the mobile blocks."""
 
-    # The Team list shows this many leads before collapsing the rest into
-    # <details>. Kept in sync with project.html's slice value.
-    VISIBLE_LEADS = 4
-
     def setUp(self):
         # Ongoing (no end_date) → "Active"; start in 2021 → date range "2021–Present".
         self.project = self.make_project(
@@ -42,22 +38,30 @@ def setUp(self):
             data_url="https://example.org/sidewalk/data",
         )
 
-        # 1 PI + 6 student leads = 7 leads, which exceeds VISIBLE_LEADS so the
-        # "+N more" <details> overflow is exercised.
+        # Current leads (ongoing roles) render inline; former leads (ended roles)
+        # collapse into the "+N former" <details>. 1 PI + 2 active student leads
+        # are current; 3 ended student-lead roles are former.
         self.pi = self.make_person(first_name="Jon", last_name="Froehlich")
         ProjectRole.objects.create(
             person=self.pi, project=self.project,
             lead_project_role=LeadProjectRoleTypes.PI, start_date=date(2021, 1, 1),
         )
-        self.leads = []
-        for i in range(6):
-            person = self.make_person(first_name=f"Lead{i}", last_name="Student")
+        for i in range(2):
+            person = self.make_person(first_name=f"Current{i}", last_name="Lead")
             ProjectRole.objects.create(
                 person=person, project=self.project,
                 lead_project_role=LeadProjectRoleTypes.STUDENT_LEAD,
                 start_date=date(2021, 1, 1),
             )
-            self.leads.append(person)
+        self.former_leads = []
+        for i in range(3):
+            person = self.make_person(first_name=f"Former{i}", last_name="Lead")
+            ProjectRole.objects.create(
+                person=person, project=self.project,
+                lead_project_role=LeadProjectRoleTypes.STUDENT_LEAD,
+                start_date=date(2018, 1, 1), end_date=date(2019, 1, 1),
+            )
+            self.former_leads.append(person)
 
         # One sponsor via a grant so the Funding row renders.
         sponsor = Sponsor.objects.create(
@@ -99,13 +103,16 @@ def test_links_render_as_clickable_chips(self):
         self.assertIn("https://example.org/sidewalk", html)
         self.assertIn("https://example.org/sidewalk/data", html)
 
-    def test_team_overflow_collapses_into_details(self):
+    def test_current_leads_render_and_former_collapse_into_details(self):
         html = self._get()
-        # The PI is among the always-visible leads.
+        # Current leads (PI + active student leads) render inline.
         self.assertIn("Jon Froehlich", html)
-        # With 7 leads > VISIBLE_LEADS, the overflow disclosure must appear.
+        # Former leads collapse into the "+N former" <details> disclosure.
         self.assertIn("project-team-more", html)
         self.assertIn("<details", html)
+        self.assertIn("former lead", html.lower())
+        # A specific former lead is present (inside the disclosure).
+        self.assertIn("Former0 Lead", html)
 
     def test_funding_row_renders_sponsor(self):
         html = self._get()

website/views/project.py

@@ -99,29 +99,39 @@ def project(request, project_name):
     project_leadership = project.get_project_leadership()
     _logger.debug(f"The project leadership for {project_name}: {project_leadership}")
 
-    # Flat, de-duplicated, seniority-ordered list of active leads for the mobile
-    # "Team" list (#1271). The desktop sidebar still renders each lead group
-    # separately; this convenience list lets the mobile template show the first
-    # few leads and collapse the rest into a <details> without per-group logic.
-    # Order mirrors the sidebar: PIs → Co-PIs → research scientists → postdocs →
-    # student leads. Each role carries a short inline label ("PI"/"Co-PI"/"Lead").
+    # Flat, de-duplicated, seniority-ordered lead lists for the mobile "Team"
+    # list (#1271). The desktop sidebar still renders each lead group separately;
+    # these convenience lists let the mobile template show current leads inline
+    # and collapse former leads into a <details> without per-group logic. Order
+    # within each list mirrors the sidebar: PIs → Co-PIs → research scientists →
+    # postdocs → student leads. Each role carries a short inline label.
     _lead_labels = {
         LeadProjectRoleTypes.PI: 'PI',
         LeadProjectRoleTypes.CO_PI: 'Co-PI',
     }
-    active_leads_ordered = []
+    _active_lead_groups = ('active_PIs', 'active_CoPIs',
+                           'active_research_scientist_leads',
+                           'active_postdoc_leads', 'active_student_leads')
+    _inactive_lead_groups = ('inactive_PIs', 'inactive_CoPIs',
+                             'inactive_research_scientist_leads',
+                             'inactive_postdoc_leads', 'inactive_student_leads')
+
+    def _flatten_leads(group_keys, seen):
+        leads = []
+        for _key in group_keys:
+            for _role in project_leadership[_key]:
+                if _role.person_id in seen:
+                    continue
+                seen.add(_role.person_id)
+                # Transient attribute read by the mobile team snippet; not persisted.
+                _role.mobile_role_label = _lead_labels.get(_role.lead_project_role, 'Lead')
+                leads.append(_role)
+        return leads
+
     _seen_lead_person_ids = set()
-    for _role in (project_leadership['active_PIs']
-                  + project_leadership['active_CoPIs']
-                  + project_leadership['active_research_scientist_leads']
-                  + project_leadership['active_postdoc_leads']
-                  + project_leadership['active_student_leads']):
-        if _role.person_id in _seen_lead_person_ids:
-            continue
-        _seen_lead_person_ids.add(_role.person_id)
-        # Transient attribute read by the mobile team snippet; not persisted.
-        _role.mobile_role_label = _lead_labels.get(_role.lead_project_role, 'Lead')
-        active_leads_ordered.append(_role)
+    project_leads_current = _flatten_leads(_active_lead_groups, _seen_lead_person_ids)
+    # Former leads are collapsed behind the "+N former" disclosure on mobile.
+    project_leads_former = _flatten_leads(_inactive_lead_groups, _seen_lead_person_ids)
 
     # Query for related projects. Limit to top 5
     # Get all candidates first
@@ -157,7 +167,8 @@ def project(request, project_name):
                'inactive_student_leads': project_leadership["inactive_student_leads"],
                'active_postdoc_leads': project_leadership["active_postdoc_leads"],
                'active_research_scientist_leads': project_leadership["active_research_scientist_leads"],
-               'active_leads_ordered': active_leads_ordered,
+               'project_leads_current': project_leads_current,
+               'project_leads_former': project_leads_former,
                'related_projects': related_projects,
                'has_videos_beyond_featured_video': has_videos_beyond_featured_video,
                'debug': settings.DEBUG}