Merge pull request #1394 from makeabilitylab/1271-mobile-project-page-sidebar

Redesign mobile project-page sidebar with chips + info-list (#1271)

Author: jonfroehlich

.pa11yci.json

@@ -40,6 +40,10 @@
     "http://website:8000/news/1/",
     "http://website:8000/news/2/",
     "http://website:8000/news/3/",
-    "http://website:8000/awards/"
+    "http://website:8000/awards/",
+    {
+      "url": "http://website:8000/project/sidewalk/",
+      "viewport": { "width": 414, "height": 896 }
+    }
   ]
 }

website/management/commands/seed_demo_projects.py

@@ -83,18 +83,27 @@ class Command(BaseCommand):
     help = "Seed three demo projects (see file docstring) for visual testing of project page layouts."
 
     def handle(self, *args, **opts):
-        from website.models import Person, Project, Publication
+        from website.models import Grant, Person, Project, Publication, Sponsor
         from website.models.project_role import LeadProjectRoleTypes, ProjectRole
 
-        self._wipe_prior(Person, Project, Publication)
-        self.stdout.write(self.style.NOTICE("Creating demo people, projects, and publications…"))
+        self._wipe_prior(Person, Project, Publication, Grant, Sponsor)
+        self.stdout.write(self.style.NOTICE("Creating demo people, sponsors, projects, and publications…"))
 
         people = self._make_demo_people(Person)
-        self._make_demo_active_small(Project, ProjectRole, LeadProjectRoleTypes, people)
+        sponsors = self._make_demo_sponsors(Sponsor)
+
+        small = self._make_demo_active_small(Project, ProjectRole, LeadProjectRoleTypes, people)
         active_tall = self._make_demo_active_tall(Project, ProjectRole, LeadProjectRoleTypes, people)
         ended_tall = self._make_demo_ended_tall(Project, ProjectRole, LeadProjectRoleTypes, people)
         tall_main = self._make_demo_tall_main_short_sidebar(Project, ProjectRole, LeadProjectRoleTypes, people)
 
+        # Sponsor coverage: small gets 1 sponsor; the others get the full 4 to
+        # exercise multi-logo wrapping and verify the funding row layout.
+        self._attach_grant(Grant, small, sponsors[:1], year=2024)
+        self._attach_grant(Grant, active_tall, sponsors, year=2019)
+        self._attach_grant(Grant, ended_tall, sponsors[:3], year=2018)
+        self._attach_grant(Grant, tall_main, sponsors[:2], year=2024)
+
         self._make_demo_publications(Publication, active_tall, people, count=15, start_year=2019, end_year=2025)
         self._make_demo_publications(Publication, ended_tall, people, count=15, start_year=2018, end_year=2022)
         self._make_demo_publications(Publication, tall_main, people, count=15, start_year=2024, end_year=2025)
@@ -111,17 +120,22 @@ def handle(self, *args, **opts):
     # ------------------------------------------------------------------
     # Cleanup
 
-    def _wipe_prior(self, Person, Project, Publication):
+    def _wipe_prior(self, Person, Project, Publication, Grant, Sponsor):
         """Delete any prior demo data so the command is safe to re-run."""
         n_projects = Project.objects.filter(short_name__startswith="demo-").count()
         n_people = Person.objects.filter(first_name="Demo").count()
         n_pubs = Publication.objects.filter(title__startswith="Demo Paper:").count()
-        if n_projects or n_people or n_pubs:
+        n_grants = Grant.objects.filter(title__startswith="Demo Grant:").count()
+        n_sponsors = Sponsor.objects.filter(name__startswith="Demo ").count()
+        if n_projects or n_people or n_pubs or n_grants or n_sponsors:
             self.stdout.write(self.style.WARNING(
-                f"Removing prior demo data: {n_projects} projects, {n_people} people, {n_pubs} publications."
+                f"Removing prior demo data: {n_projects} projects, {n_people} people, "
+                f"{n_pubs} publications, {n_grants} grants, {n_sponsors} sponsors."
             ))
             Publication.objects.filter(title__startswith="Demo Paper:").delete()
+            Grant.objects.filter(title__startswith="Demo Grant:").delete()
             Project.objects.filter(short_name__startswith="demo-").delete()
+            Sponsor.objects.filter(name__startswith="Demo ").delete()
             Person.objects.filter(first_name="Demo").delete()
 
     # ------------------------------------------------------------------
@@ -164,13 +178,48 @@ def _make_demo_people(self, Person):
             people[last_name] = p
         return people
 
+    # --- Sponsors / Grants -------------------------------------------------
+
+    _SPONSORS = [
+        ("Demo Science Foundation", "DSF", "https://example.org/dsf"),
+        ("Demo Research Council", "DRC", "https://example.org/drc"),
+        ("Demo Tech Institute", "DTI", "https://example.org/dti"),
+        ("Demo Industry Partner", "DIP", "https://example.org/dip"),
+    ]
+
+    def _make_demo_sponsors(self, Sponsor):
+        sponsors = []
+        for name, short_name, url in self._SPONSORS:
+            s = Sponsor.objects.create(
+                name=name,
+                short_name=short_name,
+                url=url,
+                alt_text=f"{name} logo",
+                icon=_img(f"{short_name.lower()}_icon.gif"),
+            )
+            sponsors.append(s)
+        return sponsors
+
+    def _attach_grant(self, Grant, project, sponsors, *, year):
+        """Create one Grant per sponsor and link it to the project."""
+        from datetime import date as _date
+        for idx, sponsor in enumerate(sponsors):
+            grant = Grant.objects.create(
+                title=f"Demo Grant: {project.short_name} / {sponsor.short_name} #{idx + 1}",
+                sponsor=sponsor,
+                date=_date(year, 1, 1),
+                funding_amount=100000 * (idx + 1),
+                grant_id=f"DEMO-{idx + 1}",
+            )
+            grant.projects.add(project)
+
     # --- Project 1: short sidebar, active ----------------------------------
 
     def _make_demo_active_small(self, Project, ProjectRole, Roles, people):
         proj = Project.objects.create(
             name="Demo Project: Active (Short Sidebar)",
             short_name="demo-active-small",
-            is_visible=True,  # demo projects are public so they render for visual testing
+            is_visible=True,  # demo projects exist for visual testing; make them public
             start_date=date(2024, 1, 1),
             end_date=None,
             summary="A small active demo project for visual testing of the short-sidebar case.",
@@ -196,9 +245,11 @@ def _make_demo_active_tall(self, Project, ProjectRole, Roles, people):
         proj = Project.objects.create(
             name="Demo Project: Active (Tall Sidebar — Sidewalk-like)",
             short_name="demo-active-tall",
-            is_visible=True,  # demo projects are public so they render for visual testing
+            is_visible=True,  # demo projects exist for visual testing; make them public
             start_date=date(2019, 1, 1),
             end_date=None,
+            website="https://example.org/demo-sidewalk",
+            data_url="https://example.org/demo-sidewalk/data",
             summary="A large active demo project with lots of current and former members — sidebar exceeds viewport height.",
             about="This project is intentionally large. Use it to confirm sidebar behavior when the sidebar is taller than the viewport. The 'Former Student Lead' and 'Former PI' headers should still include 'Former' because the project itself is active (only individual members' roles ended).",
         )
@@ -248,7 +299,7 @@ def _make_demo_ended_tall(self, Project, ProjectRole, Roles, people):
         proj = Project.objects.create(
             name="Demo Project: Ended (Tall Sidebar)",
             short_name="demo-ended-tall",
-            is_visible=True,  # demo projects are public so they render for visual testing
+            is_visible=True,  # demo projects exist for visual testing; make them public
             start_date=date(2018, 1, 1),
             end_date=proj_end,
             summary="A completed demo project for testing the 'Former-prefix-dropped' branch (#1245).",
@@ -288,7 +339,7 @@ def _make_demo_tall_main_short_sidebar(self, Project, ProjectRole, Roles, people
         proj = Project.objects.create(
             name="Demo Project: Tall Main + Short Sidebar",
             short_name="demo-tall-main-short-sidebar",
-            is_visible=True,  # demo projects are public so they render for visual testing
+            is_visible=True,  # demo projects exist for visual testing; make them public
             start_date=date(2024, 1, 1),
             end_date=None,
             summary="A project with only a few sidebar entries but lots of publications, so the main content is much taller than the sidebar.",

website/static/website/css/design-tokens.css

@@ -111,6 +111,13 @@
   --color-badge-text: #0d5a8c;           /* 5.0:1 on badge-bg - AA ✓ */
   --color-badge-text-hover: #083854;
 
+  /* Project status chip (#1271) — "Active" badge on project pages.
+     Dark green text on a light green fill; the border is decorative (the
+     text + fill convey state, so it isn't held to the 3:1 UI threshold). */
+  --color-status-active-text: #1b5e20;   /* 6.9:1 on --color-status-active-bg - AA ✓ */
+  --color-status-active-bg: #e7f3e8;
+  --color-status-active-border: #bfe0c1;
+
   /* Awards */
   --color-award: #c25059;                /* legacy red; used by the publications award label */