From aaf646b552ffd088e1f67e0e9ea9f9188984eee1 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 22 Apr 2021 18:19:59 +0200
Subject: custom roadblock

---
 frontend/site/app.js                            | 36 -----------------
 frontend/site/app/index.js                      | 34 +++++++++++++++++
 frontend/site/app/roadblock.js                  | 14 +++++++
 frontend/site/projects/museum/app.js            | 51 -------------------------
 frontend/site/projects/museum/app/index.js      | 51 +++++++++++++++++++++++++
 frontend/site/projects/museum/app/roadblock.css | 36 +++++++++++++++++
 frontend/site/projects/museum/app/roadblock.js  | 14 +++++++
 frontend/site/projects/museum/views/mobile.css  | 45 ++++++++++++++++++++++
 frontend/site/viewer/viewer.container.js        | 10 +----
 9 files changed, 196 insertions(+), 95 deletions(-)
 delete mode 100644 frontend/site/app.js
 create mode 100644 frontend/site/app/index.js
 create mode 100644 frontend/site/app/roadblock.js
 delete mode 100644 frontend/site/projects/museum/app.js
 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

diff --git a/frontend/site/app.js b/frontend/site/app.js
deleted file mode 100644
index 2c72bf1..0000000
--- a/frontend/site/app.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { Component } from 'react'
-import { ConnectedRouter } from 'connected-react-router'
-import { Route } from 'react-router'
-
-import ViewerContainer from 'site/viewer/viewer.container'
-import actions from 'site/actions'
-
-export default class App extends Component {
-  componentDidMount() {
-    const path_partz = window.location.pathname.split('/')
-    const graph_name = path_partz[1]
-    // let path_name = null
-    // if (path_partz.length > 2) {
-      // path_name = path_partz[2]
-    // }
-    console.log('loading', graph_name)
-    actions.site.loadSite(graph_name)
-  }
-  
-  render() {
-    return (
-      <ConnectedRouter history={this.props.history}>
-        <div className='app'>
-          <Route path={'/:graph_name/:page_name'} component={ViewerContainer} exact />
-          <Route path={'/:graph_name'} component={ViewerContainer} exact />
-          <Route exact key='root' path='/' render={() => {
-            // setTimeout(() => this.props.history.push('/'), 10)
-            return null
-          }} />
-        </div>
-      </ConnectedRouter>
-    )
-  }
-}
-/*
-*/
diff --git a/frontend/site/app/index.js b/frontend/site/app/index.js
new file mode 100644
index 0000000..880c1bd
--- /dev/null
+++ b/frontend/site/app/index.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import { ConnectedRouter } from 'connected-react-router'
+import { Route } from 'react-router'
+
+import ViewerContainer from 'site/viewer/viewer.container'
+import actions from 'site/actions'
+
+export default class App extends Component {
+  componentDidMount() {
+    const path_partz = window.location.pathname.split('/')
+    const graph_name = path_partz[1]
+    // let path_name = null
+    // if (path_partz.length > 2) {
+      // path_name = path_partz[2]
+    // }
+    console.log('loading', graph_name)
+    actions.site.loadSite(graph_name)
+  }
+  
+  render() {
+    return (
+      <ConnectedRouter history={this.props.history}>
+        <div className='app'>
+          <Route path={'/:graph_name/:page_name'} component={ViewerContainer} exact />
+          <Route path={'/:graph_name'} component={ViewerContainer} exact />
+          <Route exact key='root' path='/' render={() => {
+            // setTimeout(() => this.props.history.push('/'), 10)
+            return null
+          }} />
+        </div>
+      </ConnectedRouter>
+    )
+  }
+}
diff --git a/frontend/site/app/roadblock.js b/frontend/site/app/roadblock.js
new file mode 100644
index 0000000..c9ec0b5
--- /dev/null
+++ b/frontend/site/app/roadblock.js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+import "./roadblock.css"
+
+export default function Roadblock ({ onClick, title }) {
+  return (
+    <div className='roadblock' onClick={onClick}>
+      <div>
+        <h2>{title}</h2>
+        <button>Enter</button>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/site/projects/museum/app.js b/frontend/site/projects/museum/app.js
deleted file mode 100644
index 2506591..0000000
--- a/frontend/site/projects/museum/app.js
+++ /dev/null
@@ -1,51 +0,0 @@
-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 Essay from './views/essay'
-import Artists from './views/artists'
-import Credits from './views/credits'
-import NavOverlay from './views/nav.overlay'
-import StlOverlay from './views/stl.overlay'
-
-import "./views/mobile.css"
-
-import { loadMuseum } from './museum.actions'
-
-class App extends Component {
-  componentDidMount() {
-    loadMuseum()
-  }
-  
-  render() {
-    if (!this.props.ready) {
-      return <div />
-    }
-    return (
-      <ConnectedRouter history={this.props.history}>
-        <div className='app'>
-          <Route path={'/last-museum/:page_name'} component={ViewerContainer} exact />
-          <Route path={'/last-museum/start'} component={Home} exact />
-          <Route path={'/last-museum/essay'} component={Essay} exact />
-          <Route path={'/last-museum/artists'} component={Artists} exact />
-          <Route path={'/last-museum/credits'} component={Credits} exact />
-          <Route path={'/last-museum/:page_name'} component={StlOverlay} exact />
-          <Route path={'/last-museum/:page_name'} component={NavOverlay} exact />
-          <Route path='/last-museum/' exact render={() => {
-            setTimeout(() => this.props.history.push('/last-museum/start'), 10)
-            return null
-          }} />
-        </div>
-      </ConnectedRouter>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  ready: state.site.ready,
-})
-
-export default connect(mapStateToProps)(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 <div />
+    }
+    return (
+      <ConnectedRouter history={this.props.history}>
+        <div className='app'>
+          <Route path={'/last-museum/:page_name'} component={ViewerContainer} exact />
+          <Route path={'/last-museum/start'} component={Home} exact />
+          <Route path={'/last-museum/essay'} component={Essay} exact />
+          <Route path={'/last-museum/artists'} component={Artists} exact />
+          <Route path={'/last-museum/credits'} component={Credits} exact />
+          <Route path={'/last-museum/:page_name'} component={StlOverlay} exact />
+          <Route path={'/last-museum/:page_name'} component={NavOverlay} exact />
+          <Route path='/last-museum/' exact render={() => {
+            setTimeout(() => this.props.history.push('/last-museum/start'), 10)
+            return null
+          }} />
+        </div>
+      </ConnectedRouter>
+    )
+  }
+}
+
+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 (
+    <div className='roadblock' onClick={onClick}>
+      <div className="roadblock-byline">KW PRESENTS</div>
+      <div className="roadblock-title">THE L<span>AST</span></div>
+      <div className="roadblock-title">MUSEUM</div>
+      <div className="roadblock-byline">ENTER SITE</div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/site/projects/museum/views/mobile.css b/frontend/site/projects/museum/views/mobile.css
index c9574ee..688fa2a 100644
--- a/frontend/site/projects/museum/views/mobile.css
+++ b/frontend/site/projects/museum/views/mobile.css
@@ -1,4 +1,14 @@
 @media only screen and (max-device-height: 500px) {
+  /* site container */
+  .container {
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  
   /* main nav */
   .page .home-link,
   .museum-nav .home-link {
@@ -59,6 +69,41 @@
   .page-artists .artist-location {
     bottom: 0.5rem;
   }
+  .page-artists .artist-left {
+    width: 100vw;
+    padding-left: 5rem;
+    padding-right: 5rem;
+    font-size: 1.1rem;
+    line-height: 1.4;
+  }
+  .page-artists .artist-right {
+    width: 100vw;
+    left: 0;
+    opacity: 0.25;
+  }
+  .page-artists .artist-location {
+    bottom: 0;
+    background: #111111;
+    padding: 0.75rem;
+    margin: 0;
+  }
+
+  /* essay */
+  .page-essay .page-content {
+    width: 100vw;
+    padding: 0 5rem;
+    margin: 0;
+  }
+  .page-essay.page-artists .artist-location {
+    bottom: 0;
+    padding: 0.75rem 0;
+  }
+  .page-essay p {
+    font-size: 1.1rem;
+  }
+  .page-essay.page-artists .page-title {
+    margin: 1rem 0;
+  }
 
   /* charles */
   .charles-text {
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 3138a5a..d536ac5 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -7,6 +7,7 @@ import { history } from 'site/store'
 import actions from 'site/actions'
 import { Loader } from 'app/common/loader.component'
 import TileHandle from 'app/views/tile/components/tile.handle'
+import Roadblock from '../APP_TARGET/roadblock'
 
 import 'app/views/page/page.css'
 
@@ -253,14 +254,7 @@ class ViewerContainer extends Component {
   
   renderRoadblock() {
     const { title } = this.props.graph
-    return (
-      <div className='roadblock' onClick={this.removeRoadblock}>
-        <div>
-          <h2>{title}</h2>
-          <button>Enter</button>
-        </div>
-      </div>
-    )
+    return <Roadblock onClick={this.removeRoadblock} title={title} />
   }
 }
 
-- 
cgit v1.2.3-70-g09d2