From 186b5cd7d0dce5e1f1e6b64ed7333ba333cbb9d9 Mon Sep 17 00:00:00 2001
From: Robert Carter <r.carter@auckland.ac.nz>
Date: Tue, 21 Sep 2021 13:32:01 +1200
Subject: [PATCH 1/9] better image stack for webp

---
 .../src/app/components/shared/cards/cards.component.html | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/research-hub-web/src/app/components/shared/cards/cards.component.html b/research-hub-web/src/app/components/shared/cards/cards.component.html
index f9542ea15..88f967204 100644
--- a/research-hub-web/src/app/components/shared/cards/cards.component.html
+++ b/research-hub-web/src/app/components/shared/cards/cards.component.html
@@ -11,11 +11,10 @@ <h3 *ngIf="title">{{ title }}
 
       <!-- Templates -->
       <ng-template #image>
-        <img mat-card-image
-              srcset="{{ content.banner?.url }}?w=1000&fm=webp,
-                      {{ content.banner?.url }}?w=1000"
-              src="{{ content.banner?.url }}?w=1000"
-              alt="{{ content.title }}-banner">
+        <picture>
+          <source srcset="{{ content.banner?.url }}?w=1000&fm=webp" type="image/webp">
+          <img mat-card-image src="{{ content.banner?.url }}?w=1000" alt="{{ content.title }}">
+        </picture>
       </ng-template>
       <ng-template #noImage>
         <div style="margin-top: 12px;"></div>

From 1efdd61ede8ac98d647bb0e1918ed906e3706608 Mon Sep 17 00:00:00 2001
From: Robert Carter <r.carter@auckland.ac.nz>
Date: Tue, 21 Sep 2021 14:55:39 +1200
Subject: [PATCH 2/9] fix white padding above image

---
 research-hub-web/src/styles.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/research-hub-web/src/styles.scss b/research-hub-web/src/styles.scss
index 6784f0fc3..76e6e8088 100644
--- a/research-hub-web/src/styles.scss
+++ b/research-hub-web/src/styles.scss
@@ -172,6 +172,7 @@ mat-chip.mat-chip {
 mat-card.mat-card {
   margin: 8px 0;
   border-radius: 0%;
+  padding-top: 0px;
 }
 mat-icon,
 .mat-icon-button,

From e1c8fd030d596d1232d8584d09fec6c2eb8f5da5 Mon Sep 17 00:00:00 2001
From: Robert Carter <r.carter@auckland.ac.nz>
Date: Tue, 21 Sep 2021 15:00:48 +1200
Subject: [PATCH 3/9] research activity / image

---
 .../research-activity/research-activity.component.html    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/research-hub-web/src/app/components/home/research-activity/research-activity.component.html b/research-hub-web/src/app/components/home/research-activity/research-activity.component.html
index 0189bda32..d8dcf969f 100644
--- a/research-hub-web/src/app/components/home/research-activity/research-activity.component.html
+++ b/research-hub-web/src/app/components/home/research-activity/research-activity.component.html
@@ -27,10 +27,10 @@ <h3>{{ item.name }}</h3>
 
             <!-- Panel Image -->
             <div fxHide.lt-md class="research-category-img">
-                <img srcset="{{ item.image?.url }}?w=1000&fm=webp,
-                             {{ item.image?.url }}?w=1000"
-                     src="{{ item.image?.url }}?w=1000"
-                     alt="{{ item.name }}">
+              <picture>
+                <source srcset="{{ item.image?.url }}?w=1000&fm=webp" type="image/webp">
+                <img src="{{ item.image?.url }}?w=1000" alt="{{ item.name }}">
+              </picture>
             </div>
           </div>
         </div>

From bf8c3d4e661683b8dc15fb4c15467a4c1a169c4b Mon Sep 17 00:00:00 2001
From: Robert Carter <r.carter@auckland.ac.nz>
Date: Tue, 21 Sep 2021 15:42:48 +1200
Subject: [PATCH 4/9] revert

---
 research-hub-web/src/styles.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/research-hub-web/src/styles.scss b/research-hub-web/src/styles.scss
index 76e6e8088..6784f0fc3 100644
--- a/research-hub-web/src/styles.scss
+++ b/research-hub-web/src/styles.scss
@@ -172,7 +172,6 @@ mat-chip.mat-chip {
 mat-card.mat-card {
   margin: 8px 0;
   border-radius: 0%;
-  padding-top: 0px;
 }
 mat-icon,
 .mat-icon-button,

From d7ae421b16a09ef0eac57d5d1fd4b0a54a23341b Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Tue, 28 Sep 2021 11:42:36 +1300
Subject: [PATCH 5/9] fix top margin

---
 .../activities-page.component.html            | 40 +++++++++----------
 .../shared/cards/cards.component.html         |  4 +-
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/research-hub-web/src/app/components/activities-page/activities-page.component.html b/research-hub-web/src/app/components/activities-page/activities-page.component.html
index eeee8ee3e..c6f170ac8 100644
--- a/research-hub-web/src/app/components/activities-page/activities-page.component.html
+++ b/research-hub-web/src/app/components/activities-page/activities-page.component.html
@@ -1,44 +1,44 @@
 <div id="research-activities">
-    <h2>{{ title }}</h2>
-    <p>{{ description }}</p>
-    <div [ngClass]="'main-underline'"></div>
+  <h2>{{ title }}</h2>
+  <p>{{ description }}</p>
+  <div [ngClass]="'main-underline'"></div>
 </div>
 
 <div *ngIf="allStages$ | async as allStages">
-
   <!-- Research Acitivities Container -->
   <div class="research-activity-container">
-
     <!-- Research Activities Content -->
     <div fxLayout="column" fxLayoutGap="8px" class="research-activity-content">
       <div *ngFor="let item of allStages.items">
-
         <!-- Panel Container -->
         <div class="outer-panel" fxLayout="row">
-
           <!-- Panel Button -->
           <div class="inner-panel">
             <div>
-              <a routerLink="/search"
-              [queryParams]="
-                searchService.generateQueryParams('', {
-                  category: [],
-                  stage: [item.sys.id],
-                  relatedOrgs: []
-                })
-              ">
-              <h3>{{ item.name }}</h3>
-              <p>{{ item.description }}</p>
+              <a
+                routerLink="/search"
+                [queryParams]="
+                  searchService.generateQueryParams('', {
+                    category: [],
+                    stage: [item.sys.id],
+                    relatedOrgs: []
+                  })
+                "
+              >
+                <h3>{{ item.name }}</h3>
+                <p>{{ item.description }}</p>
               </a>
-
             </div>
           </div>
 
           <!-- Panel Image -->
           <div fxHide.lt-md class="research-category-img">
             <picture>
-              <source srcset="{{ item.image?.url }}?w=1000&fm=webp" type="image/webp">
-              <img src="{{ item.image?.url }}?w=1000" alt="{{ item.name }}">
+              <img src="{{ item.image?.url }}?w=1000" alt="{{ item.name }}" />
+              <source
+                srcset="{{ item.image?.url }}?w=1000&fm=webp"
+                type="image/webp"
+              />
             </picture>
           </div>
         </div>
diff --git a/research-hub-web/src/app/components/shared/cards/cards.component.html b/research-hub-web/src/app/components/shared/cards/cards.component.html
index 2297182fe..33ebfe731 100644
--- a/research-hub-web/src/app/components/shared/cards/cards.component.html
+++ b/research-hub-web/src/app/components/shared/cards/cards.component.html
@@ -12,8 +12,8 @@ <h3 *ngIf="title">{{ title }}
       <!-- Templates -->
       <ng-template #image>
         <picture>
-          <source srcset="{{ content.banner?.url }}?w=1000&fm=webp" type="image/webp">
           <img mat-card-image src="{{ content.banner?.url }}?w=1000" alt="{{ content.title }}">
+          <source srcset="{{ content.banner?.url }}?w=1000&fm=webp" type="image/webp">
         </picture>
       </ng-template>
       <ng-template #noImage>
@@ -112,4 +112,4 @@ <h4>
       <br />
     </mat-nav-list>
   </div>
-</div>
\ No newline at end of file
+</div>

From 62853962b043574cf660cbe177620263c4863d2a Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Wed, 29 Sep 2021 08:12:30 +1300
Subject: [PATCH 6/9] Revert "fix top margin"

This reverts commit d7ae421b16a09ef0eac57d5d1fd4b0a54a23341b.
---
 .../activities-page.component.html            | 40 +++++++++----------
 .../shared/cards/cards.component.html         |  4 +-
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/research-hub-web/src/app/components/activities-page/activities-page.component.html b/research-hub-web/src/app/components/activities-page/activities-page.component.html
index c6f170ac8..eeee8ee3e 100644
--- a/research-hub-web/src/app/components/activities-page/activities-page.component.html
+++ b/research-hub-web/src/app/components/activities-page/activities-page.component.html
@@ -1,44 +1,44 @@
 <div id="research-activities">
-  <h2>{{ title }}</h2>
-  <p>{{ description }}</p>
-  <div [ngClass]="'main-underline'"></div>
+    <h2>{{ title }}</h2>
+    <p>{{ description }}</p>
+    <div [ngClass]="'main-underline'"></div>
 </div>
 
 <div *ngIf="allStages$ | async as allStages">
+
   <!-- Research Acitivities Container -->
   <div class="research-activity-container">
+
     <!-- Research Activities Content -->
     <div fxLayout="column" fxLayoutGap="8px" class="research-activity-content">
       <div *ngFor="let item of allStages.items">
+
         <!-- Panel Container -->
         <div class="outer-panel" fxLayout="row">
+
           <!-- Panel Button -->
           <div class="inner-panel">
             <div>
-              <a
-                routerLink="/search"
-                [queryParams]="
-                  searchService.generateQueryParams('', {
-                    category: [],
-                    stage: [item.sys.id],
-                    relatedOrgs: []
-                  })
-                "
-              >
-                <h3>{{ item.name }}</h3>
-                <p>{{ item.description }}</p>
+              <a routerLink="/search"
+              [queryParams]="
+                searchService.generateQueryParams('', {
+                  category: [],
+                  stage: [item.sys.id],
+                  relatedOrgs: []
+                })
+              ">
+              <h3>{{ item.name }}</h3>
+              <p>{{ item.description }}</p>
               </a>
+
             </div>
           </div>
 
           <!-- Panel Image -->
           <div fxHide.lt-md class="research-category-img">
             <picture>
-              <img src="{{ item.image?.url }}?w=1000" alt="{{ item.name }}" />
-              <source
-                srcset="{{ item.image?.url }}?w=1000&fm=webp"
-                type="image/webp"
-              />
+              <source srcset="{{ item.image?.url }}?w=1000&fm=webp" type="image/webp">
+              <img src="{{ item.image?.url }}?w=1000" alt="{{ item.name }}">
             </picture>
           </div>
         </div>
diff --git a/research-hub-web/src/app/components/shared/cards/cards.component.html b/research-hub-web/src/app/components/shared/cards/cards.component.html
index 33ebfe731..2297182fe 100644
--- a/research-hub-web/src/app/components/shared/cards/cards.component.html
+++ b/research-hub-web/src/app/components/shared/cards/cards.component.html
@@ -12,8 +12,8 @@ <h3 *ngIf="title">{{ title }}
       <!-- Templates -->
       <ng-template #image>
         <picture>
-          <img mat-card-image src="{{ content.banner?.url }}?w=1000" alt="{{ content.title }}">
           <source srcset="{{ content.banner?.url }}?w=1000&fm=webp" type="image/webp">
+          <img mat-card-image src="{{ content.banner?.url }}?w=1000" alt="{{ content.title }}">
         </picture>
       </ng-template>
       <ng-template #noImage>
@@ -112,4 +112,4 @@ <h4>
       <br />
     </mat-nav-list>
   </div>
-</div>
+</div>
\ No newline at end of file

From 635fbd81f961e1d7863c8779fd5be1d8809cf4d7 Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Wed, 29 Sep 2021 08:22:51 +1300
Subject: [PATCH 7/9] fix top margin

---
 .../activities-page.component.html            | 40 +++++++++----------
 research-hub-web/src/styles.scss              | 16 +++++++-
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/research-hub-web/src/app/components/activities-page/activities-page.component.html b/research-hub-web/src/app/components/activities-page/activities-page.component.html
index eeee8ee3e..cfb8cd4b3 100644
--- a/research-hub-web/src/app/components/activities-page/activities-page.component.html
+++ b/research-hub-web/src/app/components/activities-page/activities-page.component.html
@@ -1,44 +1,44 @@
 <div id="research-activities">
-    <h2>{{ title }}</h2>
-    <p>{{ description }}</p>
-    <div [ngClass]="'main-underline'"></div>
+  <h2>{{ title }}</h2>
+  <p>{{ description }}</p>
+  <div [ngClass]="'main-underline'"></div>
 </div>
 
 <div *ngIf="allStages$ | async as allStages">
-
   <!-- Research Acitivities Container -->
   <div class="research-activity-container">
-
     <!-- Research Activities Content -->
     <div fxLayout="column" fxLayoutGap="8px" class="research-activity-content">
       <div *ngFor="let item of allStages.items">
-
         <!-- Panel Container -->
         <div class="outer-panel" fxLayout="row">
-
           <!-- Panel Button -->
           <div class="inner-panel">
             <div>
-              <a routerLink="/search"
-              [queryParams]="
-                searchService.generateQueryParams('', {
-                  category: [],
-                  stage: [item.sys.id],
-                  relatedOrgs: []
-                })
-              ">
-              <h3>{{ item.name }}</h3>
-              <p>{{ item.description }}</p>
+              <a
+                routerLink="/search"
+                [queryParams]="
+                  searchService.generateQueryParams('', {
+                    category: [],
+                    stage: [item.sys.id],
+                    relatedOrgs: []
+                  })
+                "
+              >
+                <h3>{{ item.name }}</h3>
+                <p>{{ item.description }}</p>
               </a>
-
             </div>
           </div>
 
           <!-- Panel Image -->
           <div fxHide.lt-md class="research-category-img">
             <picture>
-              <source srcset="{{ item.image?.url }}?w=1000&fm=webp" type="image/webp">
-              <img src="{{ item.image?.url }}?w=1000" alt="{{ item.name }}">
+              <source
+                srcset="{{ item.image?.url }}?w=1000&fm=webp"
+                type="image/webp"
+              />
+              <img src="{{ item.image?.url }}?w=1000" alt="{{ item.name }}" />
             </picture>
           </div>
         </div>
diff --git a/research-hub-web/src/styles.scss b/research-hub-web/src/styles.scss
index ae69cfd03..333c4184c 100644
--- a/research-hub-web/src/styles.scss
+++ b/research-hub-web/src/styles.scss
@@ -44,7 +44,7 @@ hr {
   }
   ul li {
     position: relative;
-    line-height:30px;
+    line-height: 30px;
     padding-left: 1em;
     list-style-type: disc;
     p {
@@ -388,3 +388,17 @@ h2.maori-proverb {
     }
   }
 }
+
+/**
+ * Fix picture tag on mat card top margin globally
+ * mat-card currently doesn't handle picture tags very nicely.
+ * By default, mat-card applied a style to an img element to remove top-margin.
+ * The style doesn't get applied automatically for img within picture so we apply it globally here.
+ * https://github.com/angular/components/blob/6e1f522d6a50d6f589d069775bc771b5590bff4c/src/material/card/card.scss#L191
+ * I created a bug report here https://github.com/angular/components/issues/23649
+ */
+mat-card picture img.mat-card-image {
+  margin-top: -16px;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}

From 1be97955a793fac32ff6616620edf533e2bdeeaf Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Wed, 29 Sep 2021 08:25:24 +1300
Subject: [PATCH 8/9] added first-child to picture tag selector

---
 research-hub-web/src/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/research-hub-web/src/styles.scss b/research-hub-web/src/styles.scss
index 333c4184c..297817aa9 100644
--- a/research-hub-web/src/styles.scss
+++ b/research-hub-web/src/styles.scss
@@ -397,7 +397,7 @@ h2.maori-proverb {
  * https://github.com/angular/components/blob/6e1f522d6a50d6f589d069775bc771b5590bff4c/src/material/card/card.scss#L191
  * I created a bug report here https://github.com/angular/components/issues/23649
  */
-mat-card picture img.mat-card-image {
+mat-card picture:first-child img.mat-card-image {
   margin-top: -16px;
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;

From 83f4af243bd805692543dbd69b3f3623181a8e66 Mon Sep 17 00:00:00 2001
From: Robert Carter <r.carter@auckland.ac.nz>
Date: Wed, 29 Sep 2021 15:05:51 +1300
Subject: [PATCH 9/9] add image stack for inline images

---
 .../components/shared/body-media/body-media.component.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/research-hub-web/src/app/components/shared/body-media/body-media.component.html b/research-hub-web/src/app/components/shared/body-media/body-media.component.html
index 10c19c99f..9ff3f28f6 100644
--- a/research-hub-web/src/app/components/shared/body-media/body-media.component.html
+++ b/research-hub-web/src/app/components/shared/body-media/body-media.component.html
@@ -6,9 +6,10 @@
             <ng-template #image>
                 <div class="embedded-asset-block section-2" ngClass.xs="embedded-asset-block-mobile">
                     <a href="{{ contentItem.url }}">
-                        <img *ngIf="contentItem.url" srcset="{{ contentItem.url }}?w=1500&fm=webp,
-                                     {{ contentItem.url }}?w=1500" src="{{ contentItem.url }}?w=1500"
-                            alt="{{ contentItem.title }}" />
+                        <picture *ngIf="contentItem.url">
+                            <source srcset="{{ contentItem.url }}?w=1500&fm=webp" type="image/webp">
+                            <img src="{{ contentItem.url }}?w=1500" alt="{{ contentItem.title }}" />
+                        </picture>
                     </a><br>{{ contentItem.title }}
                     <small class="asset-summary" *ngIf="contentItem.description">&nbsp;—&nbsp;{{ contentItem.description
                         }}</small>