ch/design tweaks (#461)

* trying out new design mobile

* tweaked side nav to work on scroll

* added correct file for arrow svg and tweaked padding

* added arrow to graphic

* refactored to export out side nav

* ran yarn format

* refactored to use state to add classname

* refactored to store a map that holds DOM elements

* refactored json file to be used for side nav

packages/microcosm-www-next/src/components/graphic.js

@@ -2,6 +2,7 @@ import React from 'react'
 
 const Graphic = ({ section, graphicUrl }) => (
   <figure
+    id={'graphic-' + section}
     className="section__graphic__figure"
     data-module="ObserveGraphic"
     data-section={section}

packages/microcosm-www-next/src/components/side-nav.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import data from '../data/index.json'
+
+const SideNav = ({ graphics, currentSection }) => {
+  const scrollToElement = (e, elem) => {
+    e.preventDefault()
+
+    window.scroll({
+      top: elem.offsetTop - 400,
+      left: 0,
+      behavior: 'smooth'
+    })
+  }
+
+  return (
+    <aside className="section-nav">
+      <nav>
+        <ol className="section-nav__list">
+          {graphics.map(({ num, elem }) => (
+            <li
+              key={num}
+              className={
+                'section-nav__list__link' +
+                (num === currentSection ? ' -active' : '')
+              }
+            >
+              <a
+                href={'#graphic-' + num}
+                onClick={e => {
+                  scrollToElement(e, elem)
+                }}
+              >
+                {data[num].heading}
+              </a>
+            </li>
+          ))}
+        </ol>
+      </nav>
+    </aside>
+  )
+}
+
+export default SideNav

packages/microcosm-www-next/src/data/index.json

@@ -1,20 +1,23 @@
 {
   "1": {
-    "heading": "<span>01.</span> Rendering a View",
+    "num": "01.",
+    "heading": "Rendering a View",
     "microcosmText": "The <a href='TODO'>Domains</a> are in charge of keeping state organized, and provide whatever data is necessary to the Presenter. A Presenter at its core is a React Component, so it uses the data it pulls from the Domains to render the appropriate view.",
     "browserText": "A user fires up the browser to take a quiz.",
-    "microcosmUrl": "http://via.placeholder.com/600x600",
+    "microcosmUrl": "../static/images/v.png",
     "browserUrl": "http://via.placeholder.com/400x400"
   },
   "2": {
-    "heading": "<span>02.</span> Creating an Action",
+    "num": "02.",
+    "heading": "Creating an Action",
     "microcosmText": "The <a href='TODO'>Presenter</a> creates a new <a href='TODO'>Action</a> in response to the user's click. This particular Action's job will be to fetch some data from an external API on cats. Cool cats.",
     "browserText": "A user selects an option from the quiz list.",
     "microcosmUrl": "http://via.placeholder.com/500x500",
     "browserUrl": "http://via.placeholder.com/300x300"
   },
   "3": {
-    "heading": "<span>03.</span> The Repository",
+    "num": "03.",
+    "heading": "The Repository",
     "microcosmText": "The Repository (typically called the Repo) oversees everything that has to do with actions, history, and state. The Repo knows which domains care about what actions, and also has access to the History of actions. Let's see what that looks like... ",
     "browserText": "Lorem Ipsum.",
     "microcosmUrl": "http://via.placeholder.com/400x400",

packages/microcosm-www-next/src/pages/index.js

@@ -1,21 +1,19 @@
 import React from 'react'
 import data from '../data/index.json'
+import SideNav from '../components/side-nav'
 import Graphic from '../components/graphic'
 
 export default class IndexPage extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      numSections: 3,
       currentSection: 1,
-      microcosmView: true
+      graphicsMap: [],
+      microcosmView: true,
+      numSections: Object.keys(data)
     }
   }
 
-  componentWillMount() {
-    this.sections = this.createSectionsArray()
-  }
-
   componentDidMount() {
     this.setVars()
     this.beginObserve()
@@ -24,21 +22,26 @@ export default class IndexPage extends React.Component {
   setVars() {
     this.body = document.body
     this.graphics = document.querySelectorAll('[data-module="ObserveGraphic"]')
+    this.intersectionThreshold = 1.0
     this.observeOptions = {
-      root: null,
-      rootMargin: '0px 0px 100px',
-      threshold: 1.0
+      rootMargin: '0px 0px 0px',
+      threshold: this.intersectionThreshold
     }
+
+    this.setGraphicsMap()
   }
 
-  createSectionsArray() {
-    let arr = []
+  setGraphicsMap() {
+    let graphicsMap = [].slice.call(this.graphics).reduce((map, graphic) => {
+      map.push({
+        num: parseInt(graphic.dataset.section),
+        elem: graphic
+      })
 
-    for (let i = 0; i < this.state.numSections; i++) {
-      arr.push(i + 1)
-    }
+      return map
+    }, [])
 
-    return arr
+    this.setState({ graphicsMap })
   }
 
   beginObserve() {
@@ -57,9 +60,10 @@ export default class IndexPage extends React.Component {
   onIntersection = observed => {
     let entry = observed[0]
     let section = parseInt(entry.target.dataset.section)
+    let isIntersecting = entry.intersectionRatio >= this.intersectionThreshold
     let notAlreadyVisible = section !== this.state.currentSection
 
-    if (entry.isIntersecting && notAlreadyVisible) {
+    if (isIntersecting && notAlreadyVisible) {
       this.changeBgColor(this.state.currentSection, section)
       this.setState({ currentSection: section })
     }
@@ -70,29 +74,44 @@ export default class IndexPage extends React.Component {
     this.body.classList.add(`bg-color-${newSection}`)
   }
 
-  switchView = e => {
+  switchView = () => {
     this.setState({ microcosmView: !this.state.microcosmView })
   }
 
   render() {
+    let microcosmView = this.state.microcosmView
     let sectionData = data[this.state.currentSection]
-    let text = this.state.microcosmView
+    let text = microcosmView
       ? sectionData.microcosmText
       : sectionData.browserText
-    let graphicUrl = this.state.microcosmView
-      ? sectionData.microcosmUrl
-      : sectionData.browserUrl
-    let browserClass = !this.state.microcosmView ? ' -browserView' : ''
+    let browserClass = !microcosmView ? ' -browserView' : ''
 
     return (
       <div className="wrapper">
+        <SideNav
+          currentSection={this.state.currentSection}
+          graphics={this.state.graphicsMap}
+        />
+
         <section className="section">
+          <div className="toggle-container -mobile">
+            <h3
+              className={'section__content__subheading -bottom' + browserClass}
+            >
+              Meanwhile, in
+            </h3>
+            <button
+              onClick={this.switchView}
+              className={'section__toggle-btn' + browserClass}
+            />
+          </div>
+
           <div className="section__content">
             <div className="text-container">
-              <h2
-                className="section__content__heading"
-                dangerouslySetInnerHTML={{ __html: sectionData.heading }}
-              />
+              <h2 className="section__content__heading">
+                <span>{sectionData.num}</span>
+                {sectionData.heading}
+              </h2>
               <h3
                 className={'section__content__subheading -top' + browserClass}
               >
@@ -104,7 +123,7 @@ export default class IndexPage extends React.Component {
               />
             </div>
 
-            <div className="toggle-container">
+            <div className="toggle-container -desktop">
               <h3
                 className={
                   'section__content__subheading -bottom' + browserClass
@@ -120,8 +139,14 @@ export default class IndexPage extends React.Component {
           </div>
 
           <div className="section__graphic">
-            {this.sections.map(num => (
-              <Graphic key={num} section={num} graphicUrl={graphicUrl} />
+            {this.state.numSections.map(num => (
+              <Graphic
+                key={num}
+                section={num}
+                graphicUrl={
+                  microcosmView ? data[num].microcosmUrl : data[num].browserUrl
+                }
+              />
             ))}
           </div>
         </section>

packages/microcosm-www-next/src/stylesheets/app.scss

@@ -21,6 +21,7 @@
 @import 'structure/body';
 @import 'structure/nav';
 @import 'structure/section';
+@import 'structure/aside';
 @import 'structure/footer';
 
 // components (page level blocks and components)

packages/microcosm-www-next/src/stylesheets/setup/_dimensions.scss

@@ -1,6 +1,7 @@
 // Variables
 
-$page-gutter: 20px;
+$page-gutter-mobile: 40px;
+$page-gutter-desktop: 20px;
 $nav-height: 76px;
 $footer-height: 145px;
 

packages/microcosm-www-next/src/stylesheets/structure/_aside.scss

@@ -0,0 +1,48 @@
+// SECTION NAV (ASIDE)
+
+.section-nav {
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  left: $page-gutter-mobile / 2;
+  position: fixed;
+  z-index: 1;
+
+  @include breakpoint(large-desktop-up) {
+    display: none;
+  }
+}
+
+.section-nav__list__link {
+  @include breakpoint(medium-desktop-down) {
+    border-radius: 2px;
+    border: 1px solid white;
+    height: 10px;
+    margin-top: 0.75rem;
+    width: 10px;
+
+    a {
+      color: transparent;
+      display: block;
+      font-size: 1rem;
+      line-height: 8px;
+      padding-left: 1rem;
+      text-decoration: none;
+      vertical-align: top;
+      width: 300px;
+    }
+
+    &.-active {
+      background-color: white;
+    }
+
+    &:hover {
+      background-color: white;
+
+      a {
+        color: white;
+        text-shadow: 0px 0px 0.3em rgba(0, 0, 0, 0.5);
+      }
+    }
+  }
+}

packages/microcosm-www-next/src/stylesheets/structure/_footer.scss

@@ -16,10 +16,14 @@ $cta-bottom-padding: 6px;
     }
   }
 
-  @include breakpoint(large-desktop-up) {
-    position: fixed;
+  @include breakpoint(medium-desktop-up) {  //from tablet up, if the screen is long enough (i.e. enough space), fix footer to bottom
+    @media (min-height: 901px) {
+      position: fixed;
+    }
+  }
 
-    @media (max-height: 900px) { // if browser is shorter than 900px, don't fix footer to bottom
+  @include breakpoint(large-desktop-up) {  //from desktop up, if there isn't enough space, make footer absolute so it goes over content and doesn't move elems around
+    @media (max-height: 900px) {
       position: absolute;
     }
   }