Merge pull request #208 from nih-sparc/re-order-homepage-components

re-order components and address components loading at different point

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">

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;

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"

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">

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>

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">

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" />

tests/cypress/e2e/homepage.cy.js

@@ -33,23 +33,23 @@ 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) => {
+    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=')
     })
   })
 
@@ -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:')