From aaf646b552ffd088e1f67e0e9ea9f9188984eee1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 22 Apr 2021 18:19:59 +0200 Subject: custom roadblock --- frontend/site/projects/museum/app/index.js | 51 +++++++++++++++++++++++++ frontend/site/projects/museum/app/roadblock.css | 36 +++++++++++++++++ frontend/site/projects/museum/app/roadblock.js | 14 +++++++ 3 files changed, 101 insertions(+) create mode 100644 frontend/site/projects/museum/app/index.js create mode 100644 frontend/site/projects/museum/app/roadblock.css create mode 100644 frontend/site/projects/museum/app/roadblock.js (limited to 'frontend/site/projects/museum/app') diff --git a/frontend/site/projects/museum/app/index.js b/frontend/site/projects/museum/app/index.js new file mode 100644 index 0000000..a0a6b76 --- /dev/null +++ b/frontend/site/projects/museum/app/index.js @@ -0,0 +1,51 @@ +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 'site/projects/museum/views/home' +import Essay from 'site/projects/museum/views/essay' +import Artists from 'site/projects/museum/views/artists' +import Credits from 'site/projects/museum/views/credits' +import NavOverlay from 'site/projects/museum/views/nav.overlay' +import StlOverlay from 'site/projects/museum/views/stl.overlay' + +import "site/projects/museum/views/mobile.css" + +import { loadMuseum } from 'site/projects/museum/museum.actions' + +class App extends Component { + componentDidMount() { + loadMuseum() + } + + render() { + if (!this.props.ready) { + return
+ } + return ( + +
+ + + + + + + + { + setTimeout(() => this.props.history.push('/last-museum/start'), 10) + return null + }} /> +
+
+ ) + } +} + +const mapStateToProps = state => ({ + ready: state.site.ready, +}) + +export default connect(mapStateToProps)(App) diff --git a/frontend/site/projects/museum/app/roadblock.css b/frontend/site/projects/museum/app/roadblock.css new file mode 100644 index 0000000..73102af --- /dev/null +++ b/frontend/site/projects/museum/app/roadblock.css @@ -0,0 +1,36 @@ +.roadblock { + background: #111; + color: #ff790d; + position: absolute; + top: 0; left: 0; + width: 100vw; + height: 100vh; + padding: 1rem 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; +} +.roadblock-byline { + font-family: "Druk Wide"; + opacity: 1; + white-space: nowrap; + transition: opacity 0.2s; + font-size: 4.2vh; + width: 100vw; + text-align: center; + line-height: 1.1; +} +.roadblock-title { + font-family: "Druk"; + font-weight: 900; + font-style: italic; + white-space: nowrap; + font-size: 49vh; + text-align: center; + line-height: 0.7; + transition: top 0.2s cubic-bezier(0,0,0,1); +} +.roadblock-title span { + margin-left: -2vh; +} diff --git a/frontend/site/projects/museum/app/roadblock.js b/frontend/site/projects/museum/app/roadblock.js new file mode 100644 index 0000000..6ce1e3f --- /dev/null +++ b/frontend/site/projects/museum/app/roadblock.js @@ -0,0 +1,14 @@ +import React from 'react' + +import './roadblock.css' + +export default function Roadblock ({ onClick }) { + return ( +
+
KW PRESENTS
+
THE LAST
+
MUSEUM
+
ENTER SITE
+
+ ) +} \ No newline at end of file -- cgit v1.2.3-70-g09d2