From ae6b2cb1f2aa9c96f0d4ecff00158dbb4e6d5ed7 Mon Sep 17 00:00:00 2001
From: Liam Johnston <liam.johnston@springload.co.nz>
Date: Tue, 11 Jun 2024 16:47:31 +1200
Subject: [PATCH] Person page FED updates

---
 .../global/components/person-hero.scss        | 10 ++-
 templates/includes/person_hero.html           | 77 ++++++++++---------
 templates/people/person_page.html             | 61 ++++++++++-----
 3 files changed, 86 insertions(+), 62 deletions(-)

diff --git a/cdhweb/static_src/global/components/person-hero.scss b/cdhweb/static_src/global/components/person-hero.scss
index f809b8df..3b6cf848 100644
--- a/cdhweb/static_src/global/components/person-hero.scss
+++ b/cdhweb/static_src/global/components/person-hero.scss
@@ -31,19 +31,21 @@ Person hero. Similar to standard hero. Key differences:
   }
   @include lg {
     --title-top-space: 80px;
-
     grid-template-areas:
       '. h h h h h h h h h h .'
-      '. .  c c c c c c c c .';
+      '. . c c c c c c c c c .';
   }
   @include xl {
     --title-top-space: 104px;
+    grid-template-areas:
+      '. h h h h h h h h . . .'
+      '. . c c c c c c c . . .';
   }
   @include xxl {
     --title-top-space: 160px;
     grid-template-areas:
-      '. h h h h h h h h h . .'
-      '. . c c c c c c c c . .';
+      '. h h h h h h h h . . .'
+      '. . c c c c c c c . . .';
   }
 
   // Different layout if the hero has an image:
diff --git a/templates/includes/person_hero.html b/templates/includes/person_hero.html
index d128bfa3..98852b1f 100644
--- a/templates/includes/person_hero.html
+++ b/templates/includes/person_hero.html
@@ -6,45 +6,48 @@
         <h1>{{ self.title}}</h1>
         <p class="person-hero__job">{{ person.current_title }}</p>
         <div class="person-hero__education">{{ page.education|richtext }}</div>
-        {% if self.tags %}
-        <div class="tag-list">
-            {% for tag in self.tags.all %}
-                <div class="tag">{{ tag }}</div>    
-            {% endfor %}
-        </div>
+        {% if self.tags.all %}
+            <div class="tag-list">
+                {% for tag in self.tags.all %}
+                    <div class="tag">{{ tag }}</div>    
+                {% endfor %}
+            </div>
         {% endif %}
     </div>
-    <div class="person-hero__contact">
-        <ul class="person-hero__contact-links">
-            {% if person.email %}
-                <li>
-                    {% include 'includes/svg.html' with sprite="two-tone" svg="email" classes="person-hero__icon person-hero__icon--email" %}
-                    <a href="mailto:{{ page.person.email }}">
-                        <span>{{ person.email }}</span>
-                    </a>
-                </li>
-            {% endif %}
-            {% if person.phone_number %}
-                <li>
-                    {% include 'includes/svg.html' with sprite="two-tone" svg="phone" classes="person-hero__icon person-hero__icon--phone" %}
-                    <a href="tel:{{ person.phone_number|slugify }}">
-                        <span>{{ person.phone_number }}</span>
-                    </a>
-                </li>
-            {% endif %}
-            {% if person.office_location %}
-                <li>
-                    {% include 'includes/svg.html' with sprite="two-tone" svg="pin" classes="person-hero__icon person-hero__icon--location" %}
-                    <span>{{ person.office_location }}</span>
-                </li>
-            {% endif %}
-        </ul>
-        <ul class="person-hero__contact-links">
-            {% for link in page.person.related_links.all %}
-                <li><a href="{{ link.url }}">{{ link.type.name }}</a></li>
-            {% endfor %}
-        </ul>
-    </div>
+    
+    {% if person.email or person.phone_number or person.office_location %}
+        <div class="person-hero__contact">
+            <ul class="person-hero__contact-links">
+                {% if person.email %}
+                    <li>
+                        {% include 'includes/svg.html' with sprite="two-tone" svg="email" classes="person-hero__icon person-hero__icon--email" %}
+                        <a href="mailto:{{ page.person.email }}">
+                            <span>{{ person.email }}</span>
+                        </a>
+                    </li>
+                {% endif %}
+                {% if person.phone_number %}
+                    <li>
+                        {% include 'includes/svg.html' with sprite="two-tone" svg="phone" classes="person-hero__icon person-hero__icon--phone" %}
+                        <a href="tel:{{ person.phone_number|slugify }}">
+                            <span>{{ person.phone_number }}</span>
+                        </a>
+                    </li>
+                {% endif %}
+                {% if person.office_location %}
+                    <li>
+                        {% include 'includes/svg.html' with sprite="two-tone" svg="pin" classes="person-hero__icon person-hero__icon--location" %}
+                        <span>{{ person.office_location }}</span>
+                    </li>
+                {% endif %}
+            </ul>
+            <ul class="person-hero__contact-links">
+                {% for link in page.person.related_links.all %}
+                    <li><a href="{{ link.url }}">{{ link.type.name }}</a></li>
+                {% endfor %}
+            </ul>
+        </div>
+    {% endif %}
 
     {% if page.image %}
         {% comment %}    
diff --git a/templates/people/person_page.html b/templates/people/person_page.html
index 8edf298b..9b9ff4c0 100644
--- a/templates/people/person_page.html
+++ b/templates/people/person_page.html
@@ -12,29 +12,48 @@
             {% if page.body %}
                 {% include_block page.body %}
             {% endif %}
+
+            {% if recent_projects %}
+                <div class="block-tile_block">
+                    <div class="tiles__title-wrapper">
+                        <h2>Recent projects</h2>
+                    </div>
+                    <div class="tiles__list">
+                        {% for project in recent_projects %}
+                            {% include 'cdhpages/blocks/tile.html' with internal_page=project tile_type='internal_page_tile' %}
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
+
+            {% if recent_events %}
+                <div class="block-tile_block">
+                    <div class="tiles__title-wrapper">
+                        <h2>Recent events</h2>
+                    </div>
+                    <div class="tiles__list">
+                        {% for event in recent_events %}
+                            {% include 'cdhpages/blocks/tile.html' with internal_page=event tile_type='internal_page_tile' %}
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
+
+            {# TODO - when blog page exists #}
+            {% if recent_posts %}
+                <div class="block-tile_block">
+                    <div class="tiles__title-wrapper">
+                        <h2>Recent posts</h2>
+                    </div>
+                    <div class="tiles__list">
+                        {% for post in recent_posts %}
+                            {% include 'cdhpages/blocks/tile.html' with internal_page=post tile_type='internal_page_tile' %}
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
         </div>
     </div>
 </div>
-{% if recent_projects %}
-    <h3>Recent Projects</h3>
-    {% for project in recent_projects %}
-        {% include 'cdhpages/blocks/tile.html' with internal_page=project tile_type='internal_page_tile' %}
-    {% endfor %}
-{% endif %}
-
-{% if recent_events %}
-    <h3>Recent Events</h3>
-    {% for event in recent_events %}
-        {% include 'cdhpages/blocks/tile.html' with internal_page=event tile_type='internal_page_tile' %}
-    {% endfor %}
-{% endif %}
-
-{# TODO - when blog page exists #}
-{% if recent_posts %}
-    <h3>Recent Posts</h3>
-    {% for post in recent_posts %}
-        {% include 'cdhpages/blocks/tile.html' with internal_page=post tile_type='internal_page_tile' %}
-    {% endfor %}
-{% endif %}
 
 {% endblock %}
\ No newline at end of file