Merge pull request #1645 from Princeton-CDH/feature/1644-person-events

Implement events on person detail page (#1644)
Princeton-CDH · Sep 26, 2024 · 2e4dba3 · 2e4dba3
2 parents 6d29b97 + d8a46aa
commit 2e4dba3
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 0 deletions.
diff --git a/geniza/entities/templates/entities/person_detail.html b/geniza/entities/templates/entities/person_detail.html
@@ -68,6 +68,22 @@ <h2>
                 <p>{{ person.description }}</p>
             </section>
         {% endif %}
+        {% if person.events.all|length %}
+            <section class="events">
+                <h2>
+                    {# Translators: label for person's life events timeline #}
+                    {% translate 'Life events' %}
+                </h2>
+                <ol>
+                    {% for event in person.events.all %}
+                        <li>
+                            <h3>{{ event.name }} {% if event.date_str %}(<time>{{ event.date_str }}</time>){% endif %}</h3>
+                            {% if event.description %}<p>{{ event.description }}</p>{% endif %}
+                        </li>
+                    {% endfor %}
+                </ol>
+            </section>
+        {% endif %}
         {% if person.footnotes.all|length %}
             <section class="description bibliography">
                 <h2>

diff --git a/sitemedia/scss/pages/_person.scss b/sitemedia/scss/pages/_person.scss
@@ -138,8 +138,48 @@ main.place {
             }
         }
 
+        section.events {
+            border-top: 1px solid var(--disabled);
+            padding-top: 2rem;
+            margin-top: spacing.$spacing-md;
+            @include breakpoints.for-tablet-landscape-up {
+                padding-top: 3rem;
+                margin-top: spacing.$spacing-lg;
+            }
+            ol {
+                margin-top: 0.75rem;
+                li {
+                    position: relative;
+                    list-style-type: none;
+                    margin-left: 2.875rem;
+                    h3 {
+                        @include typography.headline-error;
+                        &::before {
+                            content: "\2022";
+                            color: var(--secondary);
+                            font-size: 1.85rem;
+                            position: absolute;
+                            left: -28px;
+                            top: -8px;
+                        }
+                    }
+                    p {
+                        min-height: 1.25rem;
+                        padding: 0 0 0 1.5rem;
+                        margin: 0.5rem 0 0.5rem -1.5rem;
+                        border-left: 2px solid var(--tertiary);
+                        @include breakpoints.for-tablet-landscape-up {
+                            margin-top: 0;
+                            font-size: typography.$text-size-xl;
+                        }
+                    }
+                }
+            }
+        }
+
         section.metadata dt,
         section.description h2,
+        section.events h2,
         section.notes h2 {
             margin-bottom: spacing.$spacing-xs;
             @include typography.meta-bold;