From a5edc770771479532f6e4af08e71b242744625d2 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 2 Apr 2021 15:54:30 +0200 Subject: mitigating some weird nav issues and FOUC --- frontend/site/projects/museum/app.js | 21 ++++-- frontend/site/projects/museum/constants.js | 17 +++-- frontend/site/projects/museum/museum.actions.js | 21 ++++++ frontend/site/projects/museum/views/home.css | 12 ++++ frontend/site/projects/museum/views/home.js | 24 +++++-- frontend/site/projects/museum/views/nav.css | 71 ++++++++++++++++++++- frontend/site/projects/museum/views/nav.overlay.js | 74 +++++++++++++++++----- 7 files changed, 206 insertions(+), 34 deletions(-) create mode 100644 frontend/site/projects/museum/museum.actions.js (limited to 'frontend/site/projects') diff --git a/frontend/site/projects/museum/app.js b/frontend/site/projects/museum/app.js index 12dab41..44070b7 100644 --- a/frontend/site/projects/museum/app.js +++ b/frontend/site/projects/museum/app.js @@ -1,27 +1,30 @@ import React, { Component } from 'react' import { ConnectedRouter } from 'connected-react-router' import { Route } from 'react-router' +import { connect } from 'react-redux' import ViewerContainer from 'site/viewer/viewer.container' import Home from './views/home' import NavOverlay from './views/nav.overlay' -import actions from 'site/actions' -export default class App extends Component { +import { loadMuseum } from './museum.actions' + +class App extends Component { componentDidMount() { - const path_partz = window.location.pathname.split('/') - const graph_name = path_partz[1] - actions.site.loadSite(graph_name) + loadMuseum() } render() { + if (!this.props.ready) { + return
+ } return (
- { + { setTimeout(() => this.props.history.push('/last-museum/start'), 10) return null }} /> @@ -30,3 +33,9 @@ export default class App extends Component { ) } } + +const mapStateToProps = state => ({ + ready: state.site.ready, +}) + +export default connect(mapStateToProps)(App) diff --git a/frontend/site/projects/museum/constants.js b/frontend/site/projects/museum/constants.js index 0bb98ba..3676f2b 100644 --- a/frontend/site/projects/museum/constants.js +++ b/frontend/site/projects/museum/constants.js @@ -2,26 +2,35 @@ export const ARTISTS = { nora: { name: "Nora Al-Badri", location: "C-Base, Berlin, Germany", + start: "nora-1", }, leite: { name: "Juliana Cerqueria Leite", location: "Santa Ifigênia, São Paolo, Brazil", + start: "leite-chapter-1", }, foreshew: { name: "Nicole Foreshew", location: "Australia", + start: "foreshew-1", }, - stankievich: { - name: "Charles Stankievich", + stankievech: { + name: "Charles Stankievech", location: "Canada", + start: "stankievech-1", }, nilthamrong: { name: "Jakrawal Nilthamrong", location: "Thailand", + start: "nilthamrong-home", }, - opoko: { - name: "Zohra Opoko", + opoku: { + name: "Zohra Opoku", location: "Mortuary (Unfinished), Accra, Ghana", + start: "opoku-1-hail-to-you", } } +export const ARTIST_ORDER = [ + "nora", "foreshew", "leite", "opoku", "nilthamrong", "stankievech", +] \ No newline at end of file diff --git a/frontend/site/projects/museum/museum.actions.js b/frontend/site/projects/museum/museum.actions.js new file mode 100644 index 0000000..7f9867a --- /dev/null +++ b/frontend/site/projects/museum/museum.actions.js @@ -0,0 +1,21 @@ +import * as types from 'site/types' +import FontFaceObserver from 'fontfaceobserver' +import actions from 'site/actions' +import { dispatch } from 'site/store' + +export const loadMuseum = () => { + Promise.all([ + loadFonts, + actions.site.loadGraph('last-museum'), + ]) + .then(() => dispatch({ type: types.site.load_site })) +} + +const loadFonts = () => { + const fonts = [ + new FontFaceObserver('Gruk'), + new FontFaceObserver('Gruk Wide', { style: 'italic' }), + new FontFaceObserver('Gruk Medium'), + ] + return Promise.all(fonts.map(font => font.load())) +} diff --git a/frontend/site/projects/museum/views/home.css b/frontend/site/projects/museum/views/home.css index 597c66b..188840b 100644 --- a/frontend/site/projects/museum/views/home.css +++ b/frontend/site/projects/museum/views/home.css @@ -113,3 +113,15 @@ html { .home.open .home-byline { opacity: 0; } + +.curtain { + position: fixed; + top: 0; left: 0; + width: 100%; height: 100%; + background: #111111; + transition: opacity 0.2s; + opacity: 1.0; +} +.curtain.hidden { + opacity: 0; +} \ No newline at end of file diff --git a/frontend/site/projects/museum/views/home.js b/frontend/site/projects/museum/views/home.js index e3c44d5..1520c11 100644 --- a/frontend/site/projects/museum/views/home.js +++ b/frontend/site/projects/museum/views/home.js @@ -1,22 +1,27 @@ import React, { Component } from 'react' +import { connect } from 'react-redux' import actions from 'site/actions' import "./home.css" -export default class Home extends Component { - state = { - open: false, - } - +class Home extends Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this) + this.state = { + open: false, + hidden: this.props.interactive, + showCurtain: true, + } } componentDidMount() { const roadblock = document.querySelector('.roadblock') if (roadblock) roadblock.style.display = "none" + setTimeout(() => { + this.setState({ showCurtain: false }) + }, 100) } handleClick(e) { @@ -44,13 +49,20 @@ export default class Home extends Component {
CHARLES STANKIEVECH
JAKRAWAL NILTHAMRONG
- ZOHRA OPOKO + ZOHRA OPOKU
CURATED BY NADIM SAMMAN
Lorem ipsum dolor sit amet, pro ea errem nonumes, gubergren deterruisset sit eu. Quo nostrud definitiones ex, sea dicant accommodare ei, te vix habeo minim voluptatum.
+
) } } + +const mapStateToProps = state => ({ + interactive: state.site.interactive, +}) + +export default connect(mapStateToProps)(Home) diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css index 2b6d75a..a44758f 100644 --- a/frontend/site/projects/museum/views/nav.css +++ b/frontend/site/projects/museum/views/nav.css @@ -1,13 +1,80 @@ +.museum-nav .home-link { + position: fixed; + top: 0; left: 0; + padding: 1rem; + color: rgba(255, 121, 13, 1.0); + font-family: 'Helvetica', sans-serif; + font-size: 1.2rem; + cursor: pointer; +} + +/* footer */ + .footer { position: fixed; bottom: 0; width: 100%; - background: linear-gradient(90deg, rgba(255, 121, 13, 0.0), rgba(255, 121, 13, 1.0)); + height: 5rem; + color: black; +} +.footer-gradient { + position: absolute; + bottom: 0rem; + width: 100%; + height: 5rem; + background: linear-gradient(180deg, rgba(255, 121, 13, 0.0), rgba(255, 121, 13, 1.0) 70%); + transform: translateY(2rem); + transition: transform 0.15s; +} +.footer .arrow { + position: absolute; + bottom: 0; + height: 3rem; + width: 4rem; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + transition: transform 0.15s; + transform: translateY(3rem); +} +.footer .arrow-left { + left: 0; +} +.footer .arrow-right { + right: 0; +} +.footer .artist-desc { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + white-space: nowrap; + text-align: center; + padding-bottom: 0.5rem; + transition: transform 0.15s; + transform: translateY(3rem); } .footer .artist-name { font-family: "Druk Wide"; font-style: italic; + text-transform: uppercase; + margin-right: 1rem; + font-size: 28px; + line-height: 28px; + cursor: default; } .footer .artist-location { font-family: "Helvetica", sans-serif; -} \ No newline at end of file + font-size: 21px; + line-height: 21px; + cursor: default; +} + +.footer.with-artist:hover .arrow, +.footer.with-artist:hover .artist-desc { + transform: translateY(0); +} +.footer.with-artist:hover .footer-gradient { + transform: translateY(0); +} diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js index 36af7db..ed6a0f5 100644 --- a/frontend/site/projects/museum/views/nav.overlay.js +++ b/frontend/site/projects/museum/views/nav.overlay.js @@ -4,7 +4,9 @@ import actions from 'site/actions' import "./nav.css" -import { ARTISTS } from "site/projects/museum/constants" +import { ARTISTS, ARTIST_ORDER } from "site/projects/museum/constants" +import { ArrowLeft, ArrowRight } from "site/projects/museum/icons" +import { history } from "site/store" export default class NavOverlay extends Component { state = { @@ -16,58 +18,98 @@ export default class NavOverlay extends Component { constructor(props) { super(props) + this.previousArtist = this.previousArtist.bind(this) + this.nextArtist = this.nextArtist.bind(this) + this.goHome = this.goHome.bind(this) } componentDidMount() { this.load() } - componentDidUpdate() { + + componentDidUpdate(prevProps) { + // console.log(this.props.location.pathname, prevProps.location.pathname) if (this.props.location.pathname !== prevProps.location.pathname) { this.load() } } load() { - const { pathname } = this.props.location - const pathPartz = pathname.split("-") + const { page_name } = this.props.match.params + const pathPartz = page_name.split("-") const pathkey = pathPartz[0] + // console.log(pathkey) if (pathkey === 'start') { this.setState({ showFooter: true, showArtist: false, - artist: {} + currentArtist: null, + artist: {}, }) } else if (pathkey in ARTISTS) { this.setState({ + showHome: true, showFooter: true, showArtist: true, - artist: ARTISTS[pathkey] + currentArtist: pathkey, + artist: ARTISTS[pathkey], }) } else { this.setState({ showFooter: false, showArtist: false, - artist: {} + currentArtist: null, + artist: {}, }) } } + previousArtist() { + this.go(-1) + } + + nextArtist() { + this.go(1) + } + + go(step) { + if (!this.state.currentArtist) return + const index = ARTIST_ORDER.indexOf(this.state.currentArtist) + const nextIndex = (index + step + ARTIST_ORDER.length) % ARTIST_ORDER.length + const currentArtist = ARTIST_ORDER[nextIndex] + const artist = ARTISTS[currentArtist] + this.setState({ currentArtist, artist }) + history.push(`/last-museum/${artist.start}`) + } + + goHome() { + history.push(`/last-museum/`) + } + render() { - const { showArtist, showHome, artist } = this.state + const { showArtist, showHome, showFooter, artist } = this.state return (
+ {showHome && ( +
+ Home +
+ )} {showFooter && ( showArtist ? ( -
- {ArrowLeft} - {artist.name} - {artist.location} - {ArrowRight} +
+
+
+ {artist.name} + {artist.location} +
+
{ArrowLeft}
+
{ArrowRight}
- } : ( -
+ ) : ( +
) - ))} + )}
) } -- cgit v1.2.3-70-g09d2