Add authors to impact report (#206)

* Add authors to the impact report, and rename the work-page-authors component now that it is used elsewhere * Update the pattern library * Catch another ref to work-page-authors
torchbox · Apr 12, 2024 · e61fe45 · e61fe45
1 parent aacf1bc
commit e61fe45
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 23 deletions.
diff --git a/tbx/impact_reports/models.py b/tbx/impact_reports/models.py
@@ -1,4 +1,5 @@
 from django.db import models
+from django.utils.functional import cached_property
 from django.utils.text import slugify
 
 from tbx.core.utils.fields import StreamField
@@ -86,3 +87,10 @@ def headings(self):
                     }
                 )
         return headings
+
+    @cached_property
+    def first_author(self):
+        """Safely return the first author if one exists."""
+        if author := self.authors.first():
+            return author.author
+        return None
diff --git a/tbx/project_styleguide/templates/patterns/pages/impact_reports/impact_report_page.html b/tbx/project_styleguide/templates/patterns/pages/impact_reports/impact_report_page.html
@@ -49,6 +49,18 @@
 
     <div class="grid grid--spacer-large streamfield">
         {% include_block page.body %}
+
+        <div class="authors-wide">
+            {% for item in page.authors.all %}
+                {% if page.first_author == item.author %}
+                    {% include "patterns/molecules/author/author.html" with author=item.author author_attribution="by" avatar_size="tiny" %}
+                {% else %}
+                    {% include "patterns/molecules/author/author.html" with author=item.author author_attribution="and" avatar_size="tiny" %}
+                {% endif %}
+            {% endfor %}
+        </div>
     </div>
 
+
+
 {% endblock %}
diff --git a/tbx/project_styleguide/templates/patterns/pages/impact_reports/impact_report_page.yaml b/tbx/project_styleguide/templates/patterns/pages/impact_reports/impact_report_page.yaml
@@ -17,6 +17,9 @@ context:
     hero_image: true
     hero_caption: Caption for image
     hero_attribution: By David Bloggs
+    first_author:
+      name: Juan dela Cruz
+      role: Director
     authors:
       all:
         - author:
@@ -49,3 +52,12 @@ tags:
       raw:
         alt: 'mobile image retina'
         url: 'https://source.unsplash.com/800x450?trees'
+
+  srcset_image:
+    # avatar image for authors
+    'avatar format-webp saturation-0.6 fill-{72x72,144x144,286x286} sizes="(max-width: 598px) 72px, (min-width: 599px) 145px" alt="" loading="lazy" class="avatar__image"':
+      raw: |
+        <img alt="" class="avatar__image" height="72" loading="lazy" sizes="(max-width: 598px) 72px, (min-width: 599px) 145px" src="https://source.unsplash.com/72x72?face" srcset="https://source.unsplash.com/72x72?face 72w, https://source.unsplash.com/144x144?face 144w, https://source.unsplash.com/286x286?face 286w" width="72">
+    'avatar format-webp saturation-0.6 fill-{72x72,144x144,286x286} sizes="(max-width: 598px) 72px, (min-width: 599px) 145px" alt="" class="avatar__image"':
+      raw: |
+        <img alt="" class="avatar__image" height="72" sizes="(max-width: 598px) 72px, (min-width: 599px) 145px" src="https://source.unsplash.com/72x72?face" srcset="https://source.unsplash.com/72x72?face 72w, https://source.unsplash.com/144x144?face 144w, https://source.unsplash.com/286x286?face 286w" width="72">
diff --git a/tbx/project_styleguide/templates/patterns/pages/work/work_page_base.html b/tbx/project_styleguide/templates/patterns/pages/work/work_page_base.html
@@ -71,7 +71,7 @@
             {% endfor %}
         {% endblock %}
 
-        <div class="work-page-authors">
+        <div class="authors-wide">
             {% for item in page.authors.all %}
                 {% if page.first_author == item.author %}
                     {% include "patterns/molecules/author/author.html" with author=item.author author_attribution="by" avatar_size="tiny" %}

diff --git a/tbx/static_src/sass/components/_author.scss b/tbx/static_src/sass/components/_author.scss
@@ -26,7 +26,7 @@
         display: block;
     }
 
-    .work-page-authors & {
+    .authors-wide & {
         @include media-query(large) {
             display: flex;
             margin-bottom: $spacer-small;
@@ -40,7 +40,7 @@
             margin-top: $spacer-medium;
         }
 
-        .work-page-authors & {
+        .authors-wide & {
             @include media-query(large) {
                 margin-top: 0;
             }
@@ -51,15 +51,15 @@
         @include media-query(large) {
             margin-bottom: $spacer-small;
         }
-        .work-page-authors & {
+        .authors-wide & {
             @include media-query(large) {
                 margin-bottom: 0;
             }
         }
     }
 
     &__attribution {
-        .work-page-authors & {
+        .authors-wide & {
             @include media-query(large) {
                 display: inline;
             }
@@ -71,7 +71,7 @@
         font-weight: $weight--semibold;
         color: var(--color--heading);
 
-        .work-page-authors & {
+        .authors-wide & {
             @include media-query(large) {
                 display: inline;
                 margin-left: 5px;
@@ -87,7 +87,7 @@
         @include font-size(body-two);
         color: var(--color--heading);
 
-        .work-page-authors & {
+        .authors-wide & {
             color: var(--color--text);
 
             @include media-query(large) {

diff --git a/tbx/static_src/sass/components/_authors-wide.scss b/tbx/static_src/sass/components/_authors-wide.scss
@@ -0,0 +1,22 @@
+@use 'config' as *;
+
+// Authors component is wider than on the blog page and sits at the bottom
+// Used on the work page and impact report page
+// See also author.scss which includes variations when the authors-wide parent class is present
+
+.authors-wide {
+    grid-column: 2 / span 4;
+    margin-bottom: $spacer-medium;
+
+    @include media-query(large) {
+        grid-column: 5 / span 7;
+
+        .template-historical-work-page & {
+            grid-column: 2 / span 8;
+        }
+
+        .template-impact-report-page & {
+            grid-column: 6 / span 7;
+        }
+    }
+}
diff --git a/tbx/static_src/sass/components/_avatar.scss b/tbx/static_src/sass/components/_avatar.scss
@@ -73,7 +73,7 @@
     }
 
     // Make sure avatars don't get squashed on small screens
-    .work-page-authors &,
+    .authors-wide &,
     .author & {
         flex-shrink: 0;
     }

diff --git a/tbx/static_src/sass/components/_work-page-author.scss b/tbx/static_src/sass/components/_work-page-author.scss
diff --git a/tbx/static_src/sass/main.scss b/tbx/static_src/sass/main.scss
@@ -9,6 +9,7 @@
 // Components
 @use 'components/icon'; // Icon at the top to be able to override
 @use 'components/author';
+@use 'components/authors-wide';
 @use 'components/avatar';
 @use 'components/button';
 @use 'components/blog-meta';
@@ -61,7 +62,6 @@
 @use 'components/title-filters';
 @use 'components/values';
 @use 'components/work-hero';
-@use 'components/work-page-author';
 @use 'components/work-sections';
 @use 'components/youtube-embed';