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/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 +++++++++++++++++----- 4 files changed, 157 insertions(+), 24 deletions(-) (limited to 'frontend/site/projects/museum/views') 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