Merge pull request #770 from fedspendingtransparency/dev-stable

Promote dev-stable to staging
fedspendingtransparency · May 8, 2018 · 8d29cde · 8d29cde
2 parents c5fd248 + 1b04c9a
commit 8d29cde
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 2 deletions.
diff --git a/src/_scss/pages/homepage/features/_featurePane.scss b/src/_scss/pages/homepage/features/_featurePane.scss
@@ -0,0 +1,129 @@
+.feature-pane {
+    .feature-pane__wrapper {
+        display: block; 
+        margin: rem(60) 0 rem(100);
+        width: 100%;
+
+        @include media($medium-screen) {
+            margin: rem(120) 0 rem(60);
+        }
+    }
+
+    .feature-pane__title {
+        @include display(flex);
+        @include justify-content(center);
+        text-align: center;
+        font-size: rem(16);
+        margin: 0;
+        padding: 0;
+        color: #717171;
+        text-transform: uppercase;
+
+        &::before, &::after {
+            background-color: rgba(214,215,217,0.4);
+            content: '\a0';
+            @include flex(1 0 0);
+            height: 2px;
+            position: relative;
+            top: rem(26);
+        }
+
+        &::before {
+            margin-right: 15px;
+        }
+
+        &::after {
+            margin-left: 15px;
+        }
+    }
+
+    .feature-pane__content-wrapper {
+        @include display(flex);
+        @include justify-content(space-around);
+        margin-bottom: rem(20);
+        @include flex-wrap(wrap);
+    }
+
+    .feature-pane__content {
+        display: block;
+        text-align: center;
+        font-size: rem(14);
+        line-height: rem(17);
+
+        @include media($medium-screen) {
+            @include flex(1 1 1);
+            max-width: 30%;
+        }
+    }
+
+    .feature-pane__content-text {
+        min-height: rem(50);
+    }
+
+    .feature-pane__content-divider {
+        display: none;
+        @include media($medium-screen) {
+            display: block;
+            border: 1px solid rgba(214,215,217,0.4);
+            height: 180px;
+            align-self: center;
+        }
+
+    }
+
+    .feature-pane__content-title {
+        font-size: rem(24);
+        font-weight: bold;
+        text-align: center;
+        color: #5B616B;
+        margin: 0;
+        line-height: 1;
+        margin: rem(20) 0 0 0;
+    } 
+
+    .feature-pane__button-wrapper {
+        @include display(flex);
+        @include justify-content(center);
+        margin: rem(20) 0 0 0;
+    }
+
+    .feature-pane__bottom-divider {
+        border: 1px solid rgba(214,215,217,0.4);
+    }
+
+    .feature-pane__mobile-content-divider {
+        display: block;
+        width: 100%;
+        margin-top: rem(30);
+        border: 1px solid rgba(214,215,217,0.4);
+        @include media($medium-screen) {
+            display: none;
+        }
+    }
+
+    .feature-pane__button {
+        color: #0071BC;
+        background-color: transparent;
+        border: 1px solid #0071BC;
+        padding: rem(10) rem(20) rem(10) rem(20);
+        text-decoration: none;
+        font-weight: 600;
+
+        &:hover {
+            color: #ffffff;
+            background-color: #0071bc;
+            font-weight: 600;
+        }
+
+        &:active {
+            box-shadow: inset 0 0 0 2px #112e51;
+            color: #112e51;
+        }
+
+        &:focus {
+            outline: 2px dotted #aeb0b5;
+            outline-offset: 3px;
+        }
+    }
+
+}
diff --git a/src/_scss/pages/homepage/features/features.scss b/src/_scss/pages/homepage/features/features.scss
@@ -32,4 +32,5 @@
     @import "./_spendingExplorer";
     @import "./_search";
     @import "./_profile";
+    @import "./_featurePane";
 }
diff --git a/src/js/components/award/subawards/SubawardsTable.jsx b/src/js/components/award/subawards/SubawardsTable.jsx
@@ -133,7 +133,7 @@ export default class SubawardsTable extends React.Component {
 
         let message = null;
         if (this.props.subawards.length === 0 && !this.props.inFlight) {
-            message = (<SummaryPageTableMessage message="No subawards found" />);
+            message = (<SummaryPageTableMessage message="No sub-awards found." />);
         }
 
         return (

diff --git a/src/js/components/homepage/features/Features.jsx b/src/js/components/homepage/features/Features.jsx
@@ -7,6 +7,7 @@ import React from 'react';
 
 import SpendingExplorerFeature from './SpendingExplorerFeature';
 import SearchFeature from './SearchFeature';
+import PaneFeature from './PaneFeature';
 import ProfileFeature from './ProfileFeature';
 
 const Features = () => (
@@ -15,6 +16,7 @@ const Features = () => (
         className="homepage-features"
         aria-label="Web site features">
         <div className="homepage-features__content">
+            <PaneFeature />
             <SpendingExplorerFeature />
             <SearchFeature />
             <ProfileFeature />

diff --git a/src/js/components/homepage/features/PaneFeature.jsx b/src/js/components/homepage/features/PaneFeature.jsx
@@ -0,0 +1,44 @@
+/**
+ * PaneFeature.jsx
+ * Created by David Trinh 4/19/18
+ */
+
+import React from 'react';
+
+const PaneFeature = () => (
+    <div className="feature-pane">
+        <div className="feature-pane__wrapper">
+            <h2 className="feature-pane__title">Featured Content</h2>
+            <div className="feature-pane__content-wrapper">
+                <div className="feature-pane__content">
+                    <h3 className="feature-pane__content-title">Discover the Data Lab</h3>
+                    <p className="feature-pane_content-text">Data visualizations to help you understand government spending. See what our data can do.</p>
+                    <div className="feature-pane__button-wrapper">
+                        <a href="https://datalab.usaspending.gov/" target="_blank" rel="noopener noreferrer" className="feature-pane__button">Visit the Data Lab</a>
+                    </div>
+                </div>
+                <div className="feature-pane__content-divider" />
+                <hr className="feature-pane__mobile-content-divider" />
+                <div className="feature-pane__content">
+                    <h3 className="feature-pane__content-title">Tour the New USAspending.gov</h3>
+                    <p className="feature-pane_content-text">We have a new look with more data than ever before. Take a quick tour of the new site.</p>
+                    <div className="feature-pane__button-wrapper">
+                        <a href="https://www.youtube.com/watch?v=kaVhkZd3S5w" target="_blank" rel="noopener noreferrer" className="feature-pane__button">Watch the Video</a>
+                    </div>
+                </div>
+                <hr className="feature-pane__mobile-content-divider" />
+                <div className="feature-pane__content-divider" />
+                <div className="feature-pane__content">
+                    <h3 className="feature-pane__content-title">Stay in touch with us!</h3>
+                    <p className="feature-pane_content-text" >Receive updates on our new site. We will provide release notes and API updates, as well as share opportunities to engage with us.</p>
+                    <div className="feature-pane__button-wrapper">
+                        <a href="mailto:join-usaspending@lists.fiscal.treasury.gov?subject=Yes!%20I'd%20like%20to%20receive%20updates." className="feature-pane__button">Sign Up</a>
+                    </div>
+                </div>
+            </div>
+            <hr className="feature-pane__bottom-divider" />
+        </div>
+    </div>
+);
+
+export default PaneFeature;
diff --git a/src/js/dataMapping/bulkDownload/bulkDownloadOptions.js b/src/js/dataMapping/bulkDownload/bulkDownloadOptions.js
@@ -14,7 +14,7 @@ export const awardDownloadOptions = {
         },
         {
             name: 'subAwards',
-            label: 'Sub Awards',
+            label: 'Sub-Awards',
             apiName: 'sub_awards'
         }
     ],