IOS scroll updates

rowanhogan · Sep 11, 2018 · 83b2fb8 · 83b2fb8
1 parent 968eba7
commit 83b2fb8
Show file tree

Hide file tree

Showing 11 changed files with 176 additions and 228 deletions.
diff --git a/package.json b/package.json
@@ -12,9 +12,9 @@
     "node-sass-chokidar": "^1.3.0",
     "npm-run-all": "^4.1.3",
     "react": "^16.4.0",
+    "react-click-outside": "^3.0.1",
     "react-dom": "^16.4.0",
     "react-fastclick": "^3.0.2",
-    "react-outside-click-handler": "^1.2.2",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.4"
   },

diff --git a/src/components/header/index.js b/src/components/header/index.js
@@ -30,16 +30,18 @@ class Header extends Component {
       return
     }
 
-    this.setState({ scroll: Math.max(scrollY, 0), hidden })
+    this.setState({ scroll: Math.max(scrollY, 20), hidden })
   }
 
   render() {
-    const { hidden } = this.state
+    const { hidden, scroll } = this.state
 
     return window === window.top ? (
       <header
         ref="header"
-        className={['header', hidden ? 'hidden' : undefined].join(' ')}>
+        className={['header', hidden && 'hidden', scroll > 20 && 'scrolled']
+          .filter(Boolean)
+          .join(' ')}>
         <Link className="logo" to="/">
           Home
         </Link>

diff --git a/src/components/search/index.js b/src/components/search/index.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react'
 import debounce from 'lodash/debounce'
+import withClickOutside from 'react-click-outside'
 import { fetchPages } from '../../lib/api'
 
-import OutsideClickHandler from 'react-outside-click-handler'
-
 class Search extends Component {
   constructor(props) {
     super(props)
@@ -79,49 +78,54 @@ class Search extends Component {
       .catch(() => this.setState({ error: true, loading: false }))
   }
 
+  handleClickOutside(event) {
+    if (this.state.open) {
+      event.preventDefault()
+      this.handleClose()
+    }
+  }
+
   render() {
     const { error, loading, open, results, selected } = this.state
 
     return (
-      <OutsideClickHandler onOutsideClick={this.handleClose}>
-        <div className="search">
-          <form className="search-form" onSubmit={e => e.preventDefault()}>
-            <input
-              ref="input"
-              type="search"
-              placeholder="Search..."
-              onKeyDown={this.handleSelection}
-              onKeyUp={e => this.handleSearch(e.which)}
-            />
-          </form>
-          {open && (
-            <div className="search-results">
-              {loading && <div className="spinner">Loading&hellip;</div>}
-              {error && <div className="search-error">No results found</div>}
-              {results.map((result, index) => (
-                <a
-                  href={result.link}
-                  className={[
-                    'search-result',
-                    selected === index ? 'active' : undefined
-                  ].join(' ')}
-                  key={index}>
-                  <h3 className="search-result-title">{result.title}</h3>
-                  <p className="search-result-description">
-                    {result.description}
-                  </p>
-                  <div
-                    className="search-result-thumb"
-                    style={{ backgroundImage: `url(${result.thumb})` }}
-                  />
-                </a>
-              ))}
-            </div>
-          )}
-        </div>
-      </OutsideClickHandler>
+      <div className="search">
+        <form className="search-form" onSubmit={e => e.preventDefault()}>
+          <input
+            ref="input"
+            type="search"
+            placeholder="Search..."
+            onKeyDown={this.handleSelection}
+            onKeyUp={e => this.handleSearch(e.which)}
+          />
+        </form>
+        {open && (
+          <div className="search-results">
+            {loading && <div className="spinner">Loading&hellip;</div>}
+            {error && <div className="search-error">No results found</div>}
+            {results.map((result, index) => (
+              <a
+                href={result.link}
+                className={[
+                  'search-result',
+                  selected === index ? 'active' : undefined
+                ].join(' ')}
+                key={index}>
+                <h3 className="search-result-title">{result.title}</h3>
+                <p className="search-result-description">
+                  {result.description}
+                </p>
+                <div
+                  className="search-result-thumb"
+                  style={{ backgroundImage: `url(${result.thumb})` }}
+                />
+              </a>
+            ))}
+          </div>
+        )}
+      </div>
     )
   }
 }
 
-export default Search
+export default withClickOutside(Search)
diff --git a/src/components/sections/index.js b/src/components/sections/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import OutsideClickHandler from 'react-outside-click-handler'
+import withClickOutside from 'react-click-outside'
 
 class Sections extends Component {
   constructor(props) {
@@ -10,45 +10,46 @@ class Sections extends Component {
     }
   }
 
+  handleClickOutside(event) {
+    if (this.state.open) {
+      event.preventDefault()
+      this.setState({ open: false })
+    }
+  }
+
   render() {
     const { sections } = this.props
     const { open } = this.state
 
     return (
-      <OutsideClickHandler
-        onOutsideClick={() => this.setState({ open: false })}>
-        <div
-          className={['page-sections', open ? 'active' : undefined].join(' ')}>
-          <button
-            className="page-sections-button"
-            onClick={() => this.setState({ open: !open })}>
-            Table of contents
-          </button>
-          {open && (
-            <nav className="page-sections-nav">
-              {sections.map((section, index) => (
-                <a
-                  key={index}
-                  href={`#${section.anchor}`}
-                  onClick={() => this.setState({ open: false })}>
-                  <span
-                    className={`section-level section-level-${
-                      section.toclevel
-                    }`}>
-                    {section.number}.
-                  </span>
-                  <span
-                    className="section-label"
-                    dangerouslySetInnerHTML={{ __html: section.line }}
-                  />
-                </a>
-              ))}
-            </nav>
-          )}
-        </div>
-      </OutsideClickHandler>
+      <div className={['page-sections', open ? 'active' : undefined].join(' ')}>
+        <button
+          className="page-sections-button"
+          onClick={() => this.setState({ open: !open })}>
+          Table of contents
+        </button>
+        {open && (
+          <nav className="page-sections-nav">
+            {sections.map((section, index) => (
+              <a
+                key={index}
+                href={`#${section.anchor}`}
+                onClick={() => this.setState({ open: false })}>
+                <span
+                  className={`section-level section-level-${section.toclevel}`}>
+                  {section.number}.
+                </span>
+                <span
+                  className="section-label"
+                  dangerouslySetInnerHTML={{ __html: section.line }}
+                />
+              </a>
+            ))}
+          </nav>
+        )}
+      </div>
     )
   }
 }
 
-export default Sections
+export default withClickOutside(Sections)
diff --git a/src/index.js b/src/index.js
@@ -4,6 +4,13 @@ import { BrowserRouter } from 'react-router-dom'
 import registerServiceWorker from './registerServiceWorker'
 import App from './routes/app'
 import './styles/styles.css'
+import initReactFastclick from 'react-fastclick'
+
+if ('ontouchstart' in document.documentElement) {
+  document.body.style.cursor = 'pointer'
+}
+
+initReactFastclick()
 
 ReactDOM.render(
   <BrowserRouter>

diff --git a/src/routes/media/index.js b/src/routes/media/index.js
@@ -46,35 +46,32 @@ export default class extends Component {
     console.log(content)
 
     return (
-      <div className="container">
+      <div className="media container">
         {loading ? (
-          <Loading title={title} />
+          <Loading title={`File:${title}`} />
         ) : content ? (
-          <div className="media">
+          <div>
             <h1 className="page-title">{title}</h1>
-
-            <div>
-              <a href={content.descriptionshorturl} target="_blank">
-                <img src={content.url} alt={title} />
-              </a>
-              <dl className="media-list">
-                {keys(content.extmetadata).map(key => {
-                  return (
-                    <div key={key}>
-                      <dt>{key}</dt>
-                      <dd
-                        dangerouslySetInnerHTML={{
-                          __html: content.extmetadata[key].value
-                        }}
-                      />
-                    </div>
-                  )
-                })}
-              </dl>
-              <a href={content.descriptionshorturl} target="_blank">
-                View more
-              </a>
-            </div>
+            <a href={content.descriptionshorturl} target="_blank">
+              <img src={content.url} alt={title} />
+            </a>
+            <dl className="media-list">
+              {keys(content.extmetadata).map(key => {
+                return (
+                  <div key={key}>
+                    <dt>{key}</dt>
+                    <dd
+                      dangerouslySetInnerHTML={{
+                        __html: content.extmetadata[key].value
+                      }}
+                    />
+                  </div>
+                )
+              })}
+            </dl>
+            <a href={content.descriptionshorturl} target="_blank">
+              View more
+            </a>
           </div>
         ) : error ? (
           <div>

diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
@@ -13,15 +13,21 @@
   position: sticky;
   top: 0;
   height: $header-height;
-  background-color: white;
+  background-color: rgba(white, 0.975);
   border-bottom: thin solid rgba(black, 0.1);
   transition: all 350ms ease;
   display: flex;
   justify-content: space-between;
   z-index: 5;
   padding-right: $header-height - 0.5rem;
 
+  &.scrolled {
+    box-shadow: 0 0 1rem rgba(black, 0.1);
+    border-color: transparent;
+  }
+
   &.hidden {
+    box-shadow: none;
     transform: translateY(-100%);
   }
 
@@ -71,8 +77,8 @@
     background: transparent;
     appearance: none;
     height: $header-height;
-    line-height: $header-height;
-    padding: 0 1rem;
+    line-height: $header-height / 2;
+    padding: ($header-height / 4) 1rem;
     font-size: 1rem;
 
     &:focus {
@@ -263,3 +269,16 @@ $bar-height: 0.166rem;
     }
   }
 }
+
+.media {
+  text-align: center;
+
+  .page-title {
+    font-size: 1.5rem;
+  }
+
+  img {
+    display: block;
+    margin: auto;
+  }
+}
diff --git a/src/styles/_page.scss b/src/styles/_page.scss
@@ -103,7 +103,6 @@ h2 {
   text-align: center;
   font-size: 2em;
   margin: 0 0 1.5em;
-  cursor: pointer;
 }
 
 div.hatnote {

diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
@@ -6,6 +6,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(black, 0);
 
   @media (min-width: 36rem) {
     font-size: 120%;
@@ -18,15 +19,16 @@ body {
 }
 
 a {
-  color: #1565c0;
+  color: hsl(210, 90%, 40%);
+  -webkit-tap-highlight-color: hsla(210, 90%, 40%, 0.25);
 
   &:visited {
-    color: #673ab7;
+    color: hsl(250, 90%, 40%);
   }
 
   &:focus,
   &:active {
-    color: #0d47a1;
+    color: hsl(210, 90%, 20%);
     outline: 0;
   }
 }