artists/credits/essay/nav css and functionality

1 files changed, 68 insertions, 6 deletions

diff --git a/frontend/site/projects/museum/views/artists.js b/frontend/site/projects/museum/views/artists.js
index 8677d0c..989d3f7 100644
--- a/frontend/site/projects/museum/views/artists.js
+++ b/frontend/site/projects/museum/views/artists.js
@@ -3,26 +3,88 @@ import actions from 'site/actions'
 
 import "./artists.css"
 
+import { ARTISTS, ARTIST_ORDER } from "site/projects/museum/constants"
+import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
+
 export default class Artists extends Component {
+  state = {
+    currentIndex: 0,
+    detail: true,
+  }
+
   constructor(props) {
     super(props)
-    this.handleClick = this.handleClick.bind(this)
-    this.state = {
-    }
+    this.showArtist = this.showArtist.bind(this)
+    this.previousArtist = this.previousArtist.bind(this)
+    this.nextArtist = this.nextArtist.bind(this)
   }
 
   componentDidMount() {
     actions.site.interact()
   }
 
-  handleClick(e) {
-    e && e.preventDefault()
+  showArtist(currentIndex) {
+    this.setState({ detail: true, currentIndex })
+  }
+
+  previousArtist() {
+    this.go(-1)
+  }
+
+  nextArtist() {
+    this.go(1)
+  }
+
+  go(step) {
+    const currentIndex = (this.state.currentIndex + step + ARTIST_ORDER.length) % ARTIST_ORDER.length
+    this.setState({ currentIndex })
   }
 
   render() {
+    const { currentIndex, detail } = this.state
     return (
-      <div className="page-artists">
+      <div className="page page-artists">
+        <div className="artist-list">
+          <div className="artists-heading">ARTISTS</div>
+          {ARTIST_ORDER.map((key, index) => {
+            const artist = ARTISTS[key]
+            return (
+              <div key={key} className="artist-big-name" onClick={() => this.showArtist(currentIndex)}>
+                {artist.name}
+              </div>
+            )
+          })}
+        </div>
+        <div className={detail ? "artist-gallery visible" : "artist-gallery"}>
+          {ARTIST_ORDER.map((key, index) => (
+            <ArtistDetail
+              artist={ARTISTS[key]}
+              key={key}
+              index={index}
+              isCurrent={currentIndex === index}
+            />
+          ))}
+          <div className="nav-arrow arrow-left" onClick={this.previousArtist}>{ArrowLeft}</div>
+          <div className="nav-arrow arrow-right" onClick={this.nextArtist}>{ArrowRight}</div>
+        </div>
       </div>
     )
   }
 }
+
+const ArtistDetail = ({ artist, index, isCurrent }) => {
+  return (
+    <div className={isCurrent ? "artist-detail visible" : "artist-detail"}>
+      <div className="artist-right" style={{ backgroundImage: `url(${artist.image})`}} />
+      <div className="artist-content">
+        <div className="artist-left">
+          <span dangerouslySetInnerHTML={{ __html: artist.bio }} />
+        </div>
+      </div>
+      <div className="artist-detail-name">
+        {artist.name}
+      </div>
+      <div className="artist-location">{artist.location}</div>
+    </div>
+  )
+}