artists/credits/essay/nav css and functionality

9 files changed, 238 insertions, 18 deletions

diff --git a/frontend/site/projects/museum/constants.js b/frontend/site/projects/museum/constants.js
index 4a91c3a..9c76234 100644
--- a/frontend/site/projects/museum/constants.js
+++ b/frontend/site/projects/museum/constants.js
@@ -3,6 +3,12 @@ export const ARTISTS = {
     name: "Nora Al-Badri",
     location: "C-Base, Berlin, Germany",
     start: "nora-1",
+    bio: `
+      <p>
+        Nora Al-Badri is a multi-disciplinary and conceptual media artist with a German-Iraqi background. She graduated in political sci- ences at Johann Wolfgang Goethe University in Frankfurt/Main and is currently the first artist-in-residence at the Swiss Federal Institute for Technology (EPFL) and its Laboratory for Experi- mental Museology (eM+). Her practice focuses on the politics and the emancipatory potential of new technologies such as machine intelligence or data sculpting, non-human agency and transcendence. She has exhibited in the Viktoria and Albert Mu- seums’ Applied Arts Pavilion at La Biennale di Venezia, 3rd De- sign Biennal Istanbul, ZKM Karlsruhe, Science Gallery, Dublin. Berliner Herbstsalon - Gorki Theater, Ars Electronica, Abandon Normal Devices, The Influencers, etc. Al-Badri regularly gives classes and lectures at universities and museums all over the world such as Techne Institute at University of Buffalo, MassArt Boston, UDK university Berlin, Hochschule Weissensee Berlin, KTH Royal Institute of Technology Stockholm, University of Hal- le and IRIBA Center for Multimedia Heritage and different Kigali, Warburg Institute and Central Saint Martins College London, UCL London, Einstein Center for Digital Future Berlin. Haus der elektronischen Künste Basel, Mozilla Festival and many more. She is acting as jury member for the Chaos Communication Congress’ Arts & Culture Track, the jury of Berlinale Peace Price from Heinrich Böll Foundation (2019) and the jury of the Digital Academy Dortmund (2019).
+      </p>
+    `,
+    image: "",
     globePosition: {
       top: "15.1%",
       left: "47.7%",
@@ -12,6 +18,14 @@ export const ARTISTS = {
     name: "Juliana Cerqueria Leite",
     location: "Santa Ifigênia, São Paolo, Brazil",
     start: "leite-chapter-1",
+    bio: `
+      <p>
+        Juliana Cerqueira Leite (b. 1981) is a Brazilian/American sculptor based in New York and Sao Paolo. Cerqueira Leite received the 2019 Pollock-Krasner Foundation Grant for her exhibition Oro- genesis at the National Archaeological Museum in Naples, Italy. She was awarded the 2016 Furla Art Prize for her contribution to the 5th Moscow Young Art Biennale. She has exhibited her work in sculpture, drawing, photography and video internationally in solo shows in venues including Instituto Tomie Ohtake in São Paulo, Arsenal Contemporary in New York and Montreal, Galeria Casa Triângulo in São Paulo, Alma Zevi gallery in Venice, Gal- leria Lorcan O’Neill in Rome, TJ Boulting in London and Regina Rex Gallery in New York. 
+      </p><p>
+        She has also exhibited her work in group shows and biennials including Hordaland Kunstsenter for Bergen Assembly, Sculpture Center in New York, Ilmin Museum in Seoul, Marres House for Contemporary Culture in Maastricht, and Saatchi Gallery in London. Her work has been commis- sioned by international Biennials and Triennials including The Antarctic Pavilion of the 2017 Venice Biennale, Bergen Assem- bly 2019, Moscow Young Art Biennale, Marrakech Biennale and the 2014 Vancouver Sculpture Biennial. Cerqueira Leite gradu- ated from the Slade School of Fine Art (UCL) Graduate Sculp- ture program in 2006, London, as the inaugural recipient of the Kenneth Armitage Sculpture Prize.
+      </p>
+    `,
+    image: "",
     globePosition: {
       top: "59%",
       left: "32%",
@@ -21,6 +35,8 @@ export const ARTISTS = {
     name: "Nicole Foreshew",
     location: "Australia",
     start: "foreshew-1",
+    bio: `<p>Bio coming soon</p>`,
+    image: "",
     globePosition: {
       top: "68%",
       left: "83%",
@@ -30,6 +46,8 @@ export const ARTISTS = {
     name: "Charles Stankievech",
     location: "Canada",
     start: "stankievech-1",
+    bio: `<p>Bio coming soon</p>`,
+    image: "",
     globePosition: {
       top: "15%",
       left: "22%",
@@ -39,6 +57,8 @@ export const ARTISTS = {
     name: "Jakrawal Nilthamrong",
     location: "Thailand",
     start: "nilthamrong-home",
+    bio: `<p>Bio coming soon</p>`,
+    image: "",
     globePosition: {
       top: "39%",
       left: "72%",
@@ -48,6 +68,8 @@ export const ARTISTS = {
     name: "Zohra Opoku",
     location: "Mortuary (Unfinished), Accra, Ghana",
     start: "opoku-1-hail-to-you",
+    bio: `<p>Bio coming soon</p>`,
+    image: "",
     globePosition: {
       top: "44%",
       left: "44.4%",
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" />
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 4135586..d8279e8 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -33,7 +33,7 @@ class ViewerContainer extends Component {
   }
 
   componentDidMount() {
-    if (this.props.graph && this.props.interactive) {
+    if (this.props.graph) {
       this.load()
     }
   }