From 2ba6da3f554de8b58992ffc2145e2db17bc86d01 Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Tue, 1 Oct 2024 18:13:32 -0400
Subject: [PATCH 1/3] re-order components and address components loading at
 different point

---
 components/FeaturedData/FeaturedData.vue              |  2 +-
 components/HomepageNews/HomepageNews.vue              |  6 +++---
 components/PortalFeatures/PortalFeatures.vue          |  4 ++--
 .../ProjectsAndDatasets/ProjectsAndDatasets.vue       |  4 ++--
 components/SparcNumbers/SparcNumbers.vue              |  2 +-
 components/StayConnected/StayConnected.vue            |  4 ++--
 pages/index.vue                                       | 11 ++++++-----
 7 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/components/FeaturedData/FeaturedData.vue b/components/FeaturedData/FeaturedData.vue
index ec5a6c56..950f7be3 100644
--- a/components/FeaturedData/FeaturedData.vue
+++ b/components/FeaturedData/FeaturedData.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="featured-data container py-32">
+  <div class="featured-data container py-24">
     <div class="categories-container mb-8">
       <h2 class="heading2 mt-0 mr-12">Find by</h2>
       <el-select class="categories-select" v-model="selectedCategory">
diff --git a/components/HomepageNews/HomepageNews.vue b/components/HomepageNews/HomepageNews.vue
index ea70b9c1..133c3e71 100644
--- a/components/HomepageNews/HomepageNews.vue
+++ b/components/HomepageNews/HomepageNews.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="featured-datasets container pt-32">
-    <h2 class="heading2 title mt-0 mb-32">
+  <div class="featured-datasets container pt-24">
+    <h2 class="heading2 title mt-0 mb-24">
       News &amp; Upcoming Events
     </h2>
     <sparc-card
@@ -244,7 +244,7 @@ h2 a:not(:hover) {
 :deep(div.sparc-card) {
   padding-bottom: 1.5rem;
   @media (min-width: $tablet-small) {
-    padding-bottom: 2.5rem;
+    padding-bottom: 1.5rem;
   }
   .sparc-card__content-wrap {
     flex: 7 0 0rem;
diff --git a/components/PortalFeatures/PortalFeatures.vue b/components/PortalFeatures/PortalFeatures.vue
index 91ecdfb2..7dfdf27f 100644
--- a/components/PortalFeatures/PortalFeatures.vue
+++ b/components/PortalFeatures/PortalFeatures.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="section-container container py-32">
-    <div class="heading2 mb-32">{{ title }}</div>
+  <div class="section-container container pt-24 pb-48">
+    <div class="heading2 mb-24">{{ title }}</div>
     <div v-if="maxSet" class="max-set-row" :style="`grid-template-columns: repeat(${maxPerRow}, 1fr)`">
       <div 
         v-for="(item, index) in features"
diff --git a/components/ProjectsAndDatasets/ProjectsAndDatasets.vue b/components/ProjectsAndDatasets/ProjectsAndDatasets.vue
index 5a0aa89e..4c3552e9 100644
--- a/components/ProjectsAndDatasets/ProjectsAndDatasets.vue
+++ b/components/ProjectsAndDatasets/ProjectsAndDatasets.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="section-container container py-32">
-    <div v-if="isProject" class="heading2 mb-32">Projects &amp; Datasets</div>
+  <div class="section-container container py-24">
+    <div v-if="isProject" class="heading2 mb-24">Projects &amp; Datasets</div>
     <div v-else class="heading2 mb-32">Resources &amp; Datasets</div>
     <div class="row">
       <div class="col p-16">
diff --git a/components/SparcNumbers/SparcNumbers.vue b/components/SparcNumbers/SparcNumbers.vue
index b6cac4c9..3ab09d8d 100644
--- a/components/SparcNumbers/SparcNumbers.vue
+++ b/components/SparcNumbers/SparcNumbers.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container p-32">
+  <div class="container p-24">
     <div class="heading2">
       SPARC by the numbers
     </div>
diff --git a/components/StayConnected/StayConnected.vue b/components/StayConnected/StayConnected.vue
index 7af3e546..438dd5dd 100644
--- a/components/StayConnected/StayConnected.vue
+++ b/components/StayConnected/StayConnected.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container py-32">
-    <h2 class="heading2 subheader mb-32 mt-0">Stay Connected</h2>
+  <div class="container py-24">
+    <h2 class="heading2 subheader mb-24 mt-0">Stay Connected</h2>
     <div class="subpage py-16">
       <el-row :gutter="32">
         <el-col :xs="24" :sm="12" class="newsletter-wrap">
diff --git a/pages/index.vue b/pages/index.vue
index fc7122c5..16d27a46 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -15,14 +15,15 @@
         />
       </template>
     </page-hero>
-    <div class="secondary-background">
-      <client-only><sparc-numbers :explore-data="exploreData"/></client-only>
-    </div>
     <hr />
-    <portal-features :features="portalFeatures" />
+    <portal-features class="secondary-background" :features="portalFeatures" />
+    <hr />
+    <div>
+      <sparc-numbers :explore-data="exploreData"/>
+    </div>
     <hr />
     <div class="secondary-background">
-      <client-only><featured-data :featured-data="featuredData" /></client-only>
+      <featured-data :featured-data="featuredData" />
     </div>
     <hr />
     <projects-and-datasets :datasetSectionTitle="datasetSectionTitle" :projectOrResource="featuredProject" :dataset="featuredDataset" />

From 7bdd7a6617a395c1fa2a953cd7096e9df22da30d Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Tue, 1 Oct 2024 18:37:21 -0400
Subject: [PATCH 2/3] updated failing tests

---
 tests/cypress/e2e/homepage.cy.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/cypress/e2e/homepage.cy.js b/tests/cypress/e2e/homepage.cy.js
index 5057b96a..af761fa3 100644
--- a/tests/cypress/e2e/homepage.cy.js
+++ b/tests/cypress/e2e/homepage.cy.js
@@ -33,7 +33,7 @@ describe('Homepage', { testIsolation: false }, function () {
 
   it('SPARC by the numbers', function () {
     // Check for content title
-    cy.get('.container.p-32 > .heading2').should('exist').and('contain', 'SPARC by the numbers')
+    cy.get('.container.p-24 > .heading2').should('exist').and('contain', 'SPARC by the numbers')
 
     // Check for consortia
     cy.get('.container.p-32 > .body1 > b > .heading2').first().should('exist').then(($el) => {
@@ -93,7 +93,7 @@ describe('Homepage', { testIsolation: false }, function () {
 
   it('Resources and datasets', function () {
     // Check for content title
-    cy.get('.section-container.py-32 > .heading2').should('contain', 'Resources & Datasets')
+    cy.get('.section-container.py-24 > .heading2').should('contain', 'Resources & Datasets')
 
     // Check for card description
     cy.get('.row > :nth-child(1) > .mb-16').should('contain', 'Here is a resource you might be interested in:')

From cfa94458663aa770c9300771bf00e910de20ad50 Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Wed, 2 Oct 2024 08:28:04 -0400
Subject: [PATCH 3/3] update tests

---
 tests/cypress/e2e/homepage.cy.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/tests/cypress/e2e/homepage.cy.js b/tests/cypress/e2e/homepage.cy.js
index af761fa3..cd41af29 100644
--- a/tests/cypress/e2e/homepage.cy.js
+++ b/tests/cypress/e2e/homepage.cy.js
@@ -36,20 +36,20 @@ describe('Homepage', { testIsolation: false }, function () {
     cy.get('.container.p-24 > .heading2').should('exist').and('contain', 'SPARC by the numbers')
 
     // Check for consortia
-    cy.get('.container.p-32 > .body1 > b > .heading2').first().should('exist').then(($el) => {
+    cy.get('.container.p-24 > .body1 > b > .heading2').first().should('exist').then(($el) => {
       const numberOfConsortia = parseInt($el.text())
 
-      cy.get('.container.p-32 > .data-wrap.py-16 > .consortia-item').should('have.length', numberOfConsortia)
-      cy.get('.container.p-32 > .data-wrap.py-16 > .consortia-item').should('have.attr', 'href').and('contain', '/about/consortia/')
+      cy.get('.container.p-24 > .data-wrap.py-16 > .consortia-item').should('have.length', numberOfConsortia)
+      cy.get('.container.p-24 > .data-wrap.py-16 > .consortia-item').should('have.attr', 'href').and('contain', '/about/consortia/')
     })
 
     // Check for contributor
-    cy.get('.container.p-32 > .body1 > b > .heading2').last().should('exist').then(($el) => {
+    cy.get('.container.p-24 > .body1 > b > .heading2').last().should('exist').then(($el) => {
       const numberOfContributor = parseInt($el.text())
       expect(numberOfContributor).to.be.greaterThan(0)
 
-      cy.get('.container.p-32 > .data-wrap.pt-16 > .consortia-item').should('have.length.above', 0)
-      cy.get('.container.p-32 > .data-wrap.pt-16 > .consortia-item').should('have.attr', 'href').and('contain', '/data?type=')
+      cy.get('.container.p-24 > .data-wrap.pt-16 > .consortia-item').should('have.length.above', 0)
+      cy.get('.container.p-24 > .data-wrap.pt-16 > .consortia-item').should('have.attr', 'href').and('contain', '/data?type=')
     })
   })