image card

Author: wpears

src/App.jsx

@@ -5,7 +5,7 @@ import Header from './Header'
 import Home from './Home'
 import NotFound from './common/NotFound'
 import Footer from './Footer'
-//import Subsets from './Subsets'
+import Subsets from './Subsets'
 
 import './app.css'
 
@@ -17,10 +17,12 @@ const App = () => {
         <Route exact path="/" component={Home} />
     {/*
         <Route path="/all-data/:year?" component={Subsets} />
+        */}
         <Route
           path="/subsets/:year?"
           component={Subsets}
         />
+    {/*
         <Route
           path="/maps-graphs/:year?"
           component={MapsGraphs}

src/Card.jsx

@@ -25,9 +25,6 @@
   margin: 0 auto 3rem;
   max-width: 1040px;
 }
-.home .header {
-  border-bottom: none;
-}
 .home .card-container {
   align-items: stretch;
   display: flex;

src/Home.css

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import ImageCard from './Card.jsx'
+import ImageCard from './ImageCard.jsx'
 import Header from './common/Header.jsx'
 import spreadsheet from './images/spreadsheet.png'
 import selector from './images/selector.png'
@@ -24,16 +24,38 @@ class Home extends Component {
         <div className="card-container">
           <ImageCard
             image={spreadsheet}
-            caption="Entire datasets"
-          />
+            caption="Entire datasets (coming soon)"
+            path="/all-data"
+          >
+            <ul>
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Mauris nec dolor id elit</li>
+              <li>Aliquam facilisis lorem eget</li>
+            </ul>
+          </ImageCard>
           <ImageCard
             image={selector}
             caption="Subsets of data"
-          />
+            path="subsets"
+            enabled
+          >
+            <ul>
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Mauris nec dolor id elit</li>
+              <li>Aliquam facilisis lorem eget</li>
+            </ul>
+          </ImageCard>
           <ImageCard
             image={map}
-            caption="Maps & Graphs"
-          />
+            caption="Maps & Graphs (coming soon)"
+            path="maps-graphs"
+          >
+            <ul>
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Mauris nec dolor id elit</li>
+              <li>Aliquam facilisis lorem eget</li>
+            </ul>
+          </ImageCard>
         </div>
       </div>
     )

src/Home.jsx

@@ -1,18 +1,28 @@
 .ImageCard {
-  border: 2px solid white;
   overflow: hidden;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.ImageCard.enabled {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ImageWrapper {
+  border: 2px solid white;
 }
 
-.ImageCard:hover {
+.ImageCard.enabled .ImageWrapper:hover {
   border-color: #0071bc;
   cursor: pointer;
 }
 
-.ImageCard:hover .imagechild {
+.ImageWrapper:hover .imagechild {
   transform: scale(1.1);
 }
 
-.ImageCard:hover > h4 {
+.ImageCard.enabled:hover h4 {
   color: #0071bc;
 }
 

src/Card.css src/ImageCard.css

@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import './ImageCard.css'
+
+const ImageCard = props => {
+  let cardClass='ImageCard card'
+  if(props.enabled) cardClass += ' enabled'
+
+  return (
+    <div className={cardClass}>
+      <Link
+        disabled={!props.enabled}
+        to={props.path}>
+        <div className="ImageWrapper">
+          <img src={props.image} alt={props.caption} className="imagechild"/>
+        </div>
+        <h4>{props.caption}</h4>
+      </Link>
+      {props.children}
+    </div>
+  )
+}
+
+export default ImageCard

src/ImageCard.jsx

@@ -0,0 +1,5 @@
+.Subsets {
+  max-width: 1040px;
+  margin: 0 auto;
+  padding: 0 3rem;
+}

src/Subsets.css

@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+import Select from 'react-select'
+import Header from './common/Header.jsx'
+import STATES from './constants/states.js'
+
+import './Subsets.css'
+
+const options = STATES.map(state => {
+  return { value: state.id, label: state.name }
+})
+
+class Subsets extends Component {
+  render() {
+    return (
+      <div className="Subsets">
+        <div className="intro">
+          <Header type={1} headingText="Subsets of HMDA data">
+            <p className="lead">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu varius orci. Nunc id augue justo. Fusce aliquam imperdiet lacus eu condimentum. Praesent et maximus ipsum. Fusce quis orci et lorem maximus maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+            </p>
+          </Header>
+        </div>
+        <>
+          <Header type={4} headingText="Select a state" />
+          <Select
+            onChange={this.handleChange}
+            placeholder="Select a state..."
+            searchable={true}
+            autoFocus
+            openOnFocus
+            simpleValue
+            options={options}
+          />
+        </>
+        <div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Subsets

src/Subsets.jsx

@@ -96,3 +96,7 @@ hr {
 .button-link:hover {
   color: #4c2c92;
 }
+
+.header {
+  border-bottom: none;
+}