artists/credits/essay/nav css and functionality

7 files changed, 215 insertions, 17 deletions

diff --git a/frontend/site/projects/museum/views/artists.css b/frontend/site/projects/museum/views/artists.css
index 45cb8f3..fb3a863 100644
--- a/frontend/site/projects/museum/views/artists.css
+++ b/frontend/site/projects/museum/views/artists.css
@@ -1 +1,129 @@
-.page-artists {}
+.app > div.page.page-artists {
+  overflow: hidden;
+}
+
+/* main artists list */
+
+.page-artists .artists-heading {
+  text-align: center;
+  font-family: 'Druk Wide', sans-serif;
+  text-transform: uppercase;
+  font-style: italic;
+  font-size: 2.5vh;
+  margin: 1.5vh 0 0.5vh;
+  cursor: default;
+  user-select: none;
+}
+.page-artists .artist-detail-name,
+.page-artists .artist-big-name {
+  font-family: 'Druk';
+  font-style: italic;
+  text-transform: uppercase;
+  font-size: 14.5vh;
+  text-align: center;
+  line-height: 0.9;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.1s;
+}
+.page-artists .artist-big-name:hover {
+  /*color: white;*/
+  text-shadow: 0 0 5px #FF790D;
+}
+
+/* artist sub-pages */
+
+.page-artists .artist-gallery {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100vw;
+  height: 100vh;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+  background: #0f0f0f;
+}
+.page-artists .artist-gallery.visible {
+  pointer-events: auto;
+  opacity: 1;
+}
+.page-artists .artist-detail {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #0f0f0f;
+  opacity: 0;
+  transition: opacity 0.2s;
+  pointer-events: none;
+}
+.page-artists .artist-detail.visible {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+.page-artists .artist-detail-name {
+  position: absolute;
+  top: 2vh;
+  left: 0;
+  width: 100%;
+  text-shadow: 0 0 5px #FF790D;
+  pointer-events: none;
+}
+.page-artists .nav-arrow {
+  transform: translateZ(0);
+}
+.page-artists .nav-arrow path {
+  stroke: #FF790D;
+  fill: transparent;
+}
+
+.page-artists .artist-content {
+  position: absolute;
+  top: 16vh; left: 0;
+  width: 100vw;
+  height: 78vh;
+  overflow-y: auto;
+}
+.page-artists .artist-content::-webkit-scrollbar {
+  display: none;
+}
+.page-artists .artist-left {
+  padding-top: 0vh;
+  padding-bottom: 4vh;
+  padding-left: 2vw;
+  padding-right: 2vw;
+  width: 50vw;
+  font-size: 1.5vw;
+  line-height: 1.4;
+}
+.page-artists .artist-left p {
+  margin: 0 0 2vw 0;
+}
+.page-artists .artist-right {
+  position: absolute;
+  top: 0;
+  left: 50vw;
+  background-size: cover;
+  background-position: center right;
+  width: 50vw;
+  height: 100vh;
+  background: blue;
+  pointer-events: none;
+}
+.page-artists .artist-location {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  font-family: 'Druk Wide', sans-serif;
+  text-transform: uppercase;
+  font-style: italic;
+  font-size: 2.5vh;
+  text-shadow: 0 0 3px #FF790D;
+  margin: 0 0 1vh;
+  cursor: default;
+  pointer-events: none;
+}
\ No newline at end of file
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>
+  )
+}
diff --git a/frontend/site/projects/museum/views/credits.css b/frontend/site/projects/museum/views/credits.css
index 7e24fdc..8f9bec5 100644
--- a/frontend/site/projects/museum/views/credits.css
+++ b/frontend/site/projects/museum/views/credits.css
@@ -47,7 +47,7 @@
 }
 .page-subtitle,
 .page-credits .curated-by,
-.page-artists div {
+.page-credits-artists div {
   text-align: center;
   font-family: 'Druk Wide', sans-serif;
   text-transform: uppercase;
diff --git a/frontend/site/projects/museum/views/credits.js b/frontend/site/projects/museum/views/credits.js
index 5230d04..1a0a553 100644
--- a/frontend/site/projects/museum/views/credits.js
+++ b/frontend/site/projects/museum/views/credits.js
@@ -28,7 +28,7 @@ export default class Credits extends Component {
         <div className="page-title">The L<span>ast Museum</span></div>
         <div className="page-content">
           <div className="page-left">
-            <div className="page-artists">
+            <div className="page-credits-artists">
               {ARTIST_ORDER.map(key => (
                 <div key={key}>
                   {ARTISTS[key].name}
diff --git a/frontend/site/projects/museum/views/essay.js b/frontend/site/projects/museum/views/essay.js
index b0bd996..fbaa977 100644
--- a/frontend/site/projects/museum/views/essay.js
+++ b/frontend/site/projects/museum/views/essay.js
@@ -8,7 +8,7 @@ import { Globe } from "site/projects/museum/icons"
 
 import { history } from "site/store"
 
-export default class Artists extends Component {
+export default class Essay extends Component {
   constructor(props) {
     super(props)
     this.handleClick = this.handleClick.bind(this)
diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css
index a44758f..05b9658 100644
--- a/frontend/site/projects/museum/views/nav.css
+++ b/frontend/site/projects/museum/views/nav.css
@@ -6,6 +6,11 @@
   font-family: 'Helvetica', sans-serif;
   font-size: 1.2rem;
   cursor: pointer;
+  user-select: none;
+  transition: color 0.1s;
+}
+.museum-nav .home-link:hover {
+  color: white;
 }
 
 /* footer */
@@ -26,7 +31,7 @@
   transform: translateY(2rem);
   transition: transform 0.15s;
 }
-.footer .arrow {
+.nav-arrow {
   position: absolute;
   bottom: 0;
   height: 3rem;
@@ -38,10 +43,13 @@
   transition: transform 0.15s;
   transform: translateY(3rem);
 }
-.footer .arrow-left {
+.nav-arrow path {
+  fill: transparent;
+}
+.nav-arrow.arrow-left {
   left: 0;
 }
-.footer .arrow-right {
+.nav-arrow.arrow-right {
   right: 0;
 }
 .footer .artist-desc {
@@ -71,7 +79,7 @@
   cursor: default;
 }
 
-.footer.with-artist:hover .arrow,
+.footer.with-artist:hover .nav-arrow,
 .footer.with-artist:hover .artist-desc {
   transform: translateY(0);
 }
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index 0173b93..6cc3e7b 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -51,7 +51,7 @@ export default class NavOverlay extends Component {
     else if (PROJECT_PAGE_SET.has(pathkey)) {
       this.setState({
         showHome: true,
-        showFooter: true,
+        showFooter: false,
         showArtist: false,
       })
     }
@@ -112,8 +112,8 @@ export default class NavOverlay extends Component {
                 <span className="artist-name">{artist.name}</span>
                 <span className="artist-location">{artist.location}</span>
               </div>
-              <div className="arrow arrow-left" onClick={this.previousArtist}>{ArrowLeft}</div>
-              <div className="arrow arrow-right" onClick={this.nextArtist}>{ArrowRight}</div>
+              <div className="nav-arrow arrow-left" onClick={this.previousArtist}>{ArrowLeft}</div>
+              <div className="nav-arrow arrow-right" onClick={this.nextArtist}>{ArrowRight}</div>
             </div>
           ) : (
             <div className="footer no-artist" />