From 2fb44e9ef9feef5179487d56a8a97699fa4b739e Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 22 Jun 2017 00:37:03 +0200
Subject: mobile css and slight refactor

---
 client/components/App.jsx       |  8 ++---
 client/components/Details.jsx   |  3 +-
 client/components/Header.jsx    | 17 ++++++++++
 client/components/Modal.jsx     |  7 +++-
 client/components/Paintings.jsx | 48 ++++++++++++++++++++++++++
 client/components/Scroller.jsx  | 75 -----------------------------------------
 6 files changed, 76 insertions(+), 82 deletions(-)
 create mode 100644 client/components/Header.jsx
 create mode 100644 client/components/Paintings.jsx
 delete mode 100644 client/components/Scroller.jsx

(limited to 'client/components')

diff --git a/client/components/App.jsx b/client/components/App.jsx
index 5ab98cb..fbe4d79 100644
--- a/client/components/App.jsx
+++ b/client/components/App.jsx
@@ -3,7 +3,8 @@ import { isMobile } from '../util'
 import db from '../db'
 import { Link, withRouter } from 'react-router-dom'
 
-import Scroller from './Scroller.jsx'
+import Header from './Header.jsx'
+import Paintings from './Paintings.jsx'
 import Details from './Details.jsx'
 import Modal from './Modal.jsx'
 
@@ -42,8 +43,8 @@ class App extends Component {
     })
     return (
       <div>
-        <div class='header'>Procedural Paintings by Pepper</div>
-        <Scroller data={this.state.data} />
+        <Header location={this.props.location} />
+        <Paintings data={this.state.data} />
         <Modal visible={this.props.location.pathname !== '/'}>
           <Details painting={painting} />
         </Modal>
@@ -52,5 +53,4 @@ class App extends Component {
   }
 }
 
-
 export default withRouter(App)
\ No newline at end of file
diff --git a/client/components/Details.jsx b/client/components/Details.jsx
index 4994a3b..b7d9496 100644
--- a/client/components/Details.jsx
+++ b/client/components/Details.jsx
@@ -16,14 +16,13 @@ export default class Details extends Component {
     const parameters = breakUpJSON(painting.parameters)
     return (
       <div class='details' onWheel={this.onWheel}>
-        <Link to="/">&lt; Go back</Link>
         <h1>{painting.title}</h1>
         <div class='stats'>
           {painting.medium}<br/>
           {painting.date}<br/>
           {painting.image.caption}
         </div>
-        <img src={painting.image.uri} />
+        <img src={painting.image.uri} key={painting.image.uri} />
         {painting.originalImage &&
           <div>
             <h2>Original Image</h2>
diff --git a/client/components/Header.jsx b/client/components/Header.jsx
new file mode 100644
index 0000000..0bf3681
--- /dev/null
+++ b/client/components/Header.jsx
@@ -0,0 +1,17 @@
+import { h, Component } from 'preact'
+import { Link } from 'react-router-dom'
+
+export default class Header extends Component {
+  render() {
+    return (
+      <div class='header'>
+        <Link to='/' class='back'>
+          &lt;
+        </Link>
+        <div class='inner'>
+          Procedural Paintings by Pepper
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/client/components/Modal.jsx b/client/components/Modal.jsx
index 9220e11..fded5e2 100644
--- a/client/components/Modal.jsx
+++ b/client/components/Modal.jsx
@@ -14,8 +14,10 @@ export default class Modal extends Component {
       ? 'modal visible'
       : 'modal'
     
+    const style = 'background-color:hsl(' + randint(360) + ',20%,95%)'
+    
     return (
-      <div class={className}>
+      <div class={className} style={style}>
         <div class='inner'>
           {this.props.children}
         </div>
@@ -23,3 +25,6 @@ export default class Modal extends Component {
     )
   }
 }
+
+function randint(n){ return (Math.random()*n)|0 }
+function randrange(n){ return (Math.random()*n)|0 }
\ No newline at end of file
diff --git a/client/components/Paintings.jsx b/client/components/Paintings.jsx
new file mode 100644
index 0000000..93b24eb
--- /dev/null
+++ b/client/components/Paintings.jsx
@@ -0,0 +1,48 @@
+import { h, Component } from 'preact'
+import { Link } from 'react-router-dom'
+import util from '../util'
+
+export default class Paintings extends Component {
+  constructor() {
+    super()
+  }
+  render() {
+    const paintings = this.props.data.painting.map( (painting, i) => {
+      return (
+        <div class='cell' key={i}>
+          <div class='painting'>
+            <div class='image' style={'background-image: url(' + painting.image.uri + ')'} />
+          </div>
+          <div class='about'>
+            <div>
+              <div>{painting.title}</div>
+              <div>{painting.medium}</div>
+              <div>{painting.date}</div>
+              <div>{painting.image.caption}</div>
+              <br/>
+              <Link to={'/painting/' + painting.id}>
+                More info &gt;
+              </Link>
+            </div>
+          </div>
+        </div>
+      )
+    })
+    const about = this.props.data.page[0]
+    const body = (about.body || '').replace(/\n/g,'<br>')
+    const page = (
+      <div class='cell'>
+        <div class='painting'>
+          <div class='image' style={'background-image: url(' + about.image.uri + ')'} />
+        </div>
+        <div class='about' dangerouslySetInnerHTML={{ __html: body }} />
+      </div>
+    )
+    return (
+      <div class='paintings'>
+        {paintings}
+        {page}
+      </div>
+    )
+  }
+}
diff --git a/client/components/Scroller.jsx b/client/components/Scroller.jsx
deleted file mode 100644
index 8958481..0000000
--- a/client/components/Scroller.jsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { h, Component } from 'preact'
-import { Lethargy } from 'lethargy'
-import { Link } from 'react-router-dom'
-import util from '../util'
-
-export default class Scroller extends Component {
-  constructor() {
-    super()
-    this.state = {
-      index: 0,
-    }
-    this.lastScroll = Date.now()
-    this.onWheel = this.onWheel.bind(this)
-    this.lethargy = new Lethargy(8, 100, 1.1, 1000)
-    document.body.addEventListener('wheel', this.onWheel)
-    document.body.addEventListener('DOMMouseScroll', this.onWheel)
-  }
-  onWheel(e) {
-    return
-    if (util.isMobile) return;
-    e.preventDefault()
-    e.stopPropagation()
-    const scrollDirection = this.lethargy.check(e)
-    const now = Date.now()
-    if (scrollDirection !== false && now - this.lastScroll > 600) {
-      this.lastScroll = now
-      const cellCount = this.props.data.painting.length + 1
-      const index = (this.state.index + cellCount - scrollDirection) % cellCount
-      this.setState({ index })
-    }
-  }
-  render() {
-    const paintings = this.props.data.painting.map( (painting, i) => {
-      return (
-        <div class='cell' key={i}>
-          <div class='painting'>
-            <div class='image' style={'background-image: url(' + painting.image.uri + ')'} />
-          </div>
-          <div class='about'>
-            <div>
-              <div>{painting.title}</div>
-              <div>{painting.medium}</div>
-              <div>{painting.date}</div>
-              <div>{painting.image.caption}</div>
-              <br/>
-              <Link to={'/painting/' + painting.id}>
-                More info &gt;
-              </Link>
-            </div>
-          </div>
-        </div>
-      )
-    })
-    const about = this.props.data.page[0]
-    const body = (about.body || '').replace(/\n/g,'<br>')
-    const page = (
-      <div class='cell'>
-        <div class='painting'>
-          <div class='image' style={'background-image: url(' + about.image.uri + ')'} />
-        </div>
-        <div class='about' dangerouslySetInnerHTML={{ __html: body }}>
-        </div>
-      </div>
-    )
-    const scrollPercentage = this.state.index * -100
-    return (
-      <div class='scroller'
-           style={'transform:translateY(' + scrollPercentage + 'vh)'}
-      >
-        {paintings}
-        {page}
-      </div>
-    )
-  }
-}
-- 
cgit v1.2.3-70-g09d2