From 3fa0dc95c76ac0fbe5e1d7dffcf53d7c812fd3d4 Mon Sep 17 00:00:00 2001 From: Chloe Hwang Date: Tue, 26 Dec 2017 12:45:46 -0800 Subject: [PATCH 1/9] trying out new design mobile --- .../microcosm-www-next/src/pages/index.js | 36 +++++++- .../src/stylesheets/structure/_footer.scss | 10 +- .../src/stylesheets/structure/_section.scss | 91 +++++++++++++++++-- 3 files changed, 121 insertions(+), 16 deletions(-) diff --git a/packages/microcosm-www-next/src/pages/index.js b/packages/microcosm-www-next/src/pages/index.js index 7f8dddf6..911d83e5 100644 --- a/packages/microcosm-www-next/src/pages/index.js +++ b/packages/microcosm-www-next/src/pages/index.js @@ -26,8 +26,8 @@ export default class IndexPage extends React.Component { this.graphics = document.querySelectorAll('[data-module="ObserveGraphic"]') this.observeOptions = { root: null, - rootMargin: '0px 0px 100px', - threshold: 1.0 + rootMargin: '0px 0px 0px', + threshold: 0.5, } } @@ -57,9 +57,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 >= 0.5 let notAlreadyVisible = section !== this.state.currentSection - if (entry.isIntersecting && notAlreadyVisible) { + if (isIntersecting && notAlreadyVisible) { this.changeBgColor(this.state.currentSection, section) this.setState({ currentSection: section }) } @@ -86,7 +87,34 @@ export default class IndexPage extends React.Component { return (
+
+
+

+ Meanwhile, in +

+
+

-
+

Date: Tue, 2 Jan 2018 15:06:42 -0500 Subject: [PATCH 2/9] tweaked side nav to work on scroll --- .../src/components/graphic.js | 1 + .../microcosm-www-next/src/data/index.json | 2 +- .../microcosm-www-next/src/pages/index.js | 50 ++++++++++++------ .../src/stylesheets/app.scss | 1 + .../src/stylesheets/structure/_aside.scss | 48 +++++++++++++++++ .../src/stylesheets/structure/_section.scss | 51 ------------------- 6 files changed, 85 insertions(+), 68 deletions(-) create mode 100644 packages/microcosm-www-next/src/stylesheets/structure/_aside.scss diff --git a/packages/microcosm-www-next/src/components/graphic.js b/packages/microcosm-www-next/src/components/graphic.js index 9c0a8aab..4b829dde 100644 --- a/packages/microcosm-www-next/src/components/graphic.js +++ b/packages/microcosm-www-next/src/components/graphic.js @@ -2,6 +2,7 @@ import React from 'react' const Graphic = ({ section, graphicUrl }) => (
01. Rendering a View", "microcosmText": "The Domains 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": { diff --git a/packages/microcosm-www-next/src/pages/index.js b/packages/microcosm-www-next/src/pages/index.js index 911d83e5..510bb052 100644 --- a/packages/microcosm-www-next/src/pages/index.js +++ b/packages/microcosm-www-next/src/pages/index.js @@ -71,32 +71,46 @@ export default class IndexPage extends React.Component { this.body.classList.add(`bg-color-${newSection}`) } - switchView = e => { + switchView = () => { this.setState({ microcosmView: !this.state.microcosmView }) } + scroll = (e, num) => { + e.preventDefault() + + this.oldLink = this.newLink ? this.newLink : document.getElementsByClassName('-active')[0] + this.newLink = e.target + + this.oldLink.classList.remove('-active') + this.newLink.classList.add('-active') + + window.scroll({ + top: document.getElementById(num).offsetTop - 400, + left: 0, + behavior: 'smooth' + }); + } + render() { + let microcosmView = this.state.microcosmView let sectionData = data[this.state.currentSection] - let text = this.state.microcosmView - ? sectionData.microcosmText - : sectionData.browserText - let graphicUrl = this.state.microcosmView - ? sectionData.microcosmUrl - : sectionData.browserUrl - let browserClass = !this.state.microcosmView ? ' -browserView' : '' + let text = microcosmView ? sectionData.microcosmText : sectionData.browserText + let browserClass = !microcosmView ? ' -browserView' : '' return (
@@ -149,7 +163,11 @@ export default class IndexPage extends React.Component {
{this.sections.map(num => ( - + ))}

diff --git a/packages/microcosm-www-next/src/stylesheets/app.scss b/packages/microcosm-www-next/src/stylesheets/app.scss index 56e9e65d..9065da9e 100644 --- a/packages/microcosm-www-next/src/stylesheets/app.scss +++ b/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) diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_aside.scss b/packages/microcosm-www-next/src/stylesheets/structure/_aside.scss new file mode 100644 index 00000000..e590714e --- /dev/null +++ b/packages/microcosm-www-next/src/stylesheets/structure/_aside.scss @@ -0,0 +1,48 @@ +// SECTION NAV (ASIDE) + +.section-nav { + position: fixed; + left: $page-gutter; + height: 100vh; + display: flex; + align-items: center; + z-index: 1; + + @include breakpoint(large-desktop-up) { + display: none; + } +} + +.section-nav__list__link { + @include breakpoint(medium-desktop-down) { + width: 10px; + height: 10px; + border-radius: 2px; + border: 1px solid white; + margin-top: 0.75rem; + + a { + color: transparent; + font-size: 1rem; + padding-left: 1rem; + vertical-align: top; + display: block; + width: 300px; + line-height: 8px; + text-decoration: none; + + // &.-active { + // background-color: white; + // } + } + + &:hover { + background-color: white; + + a { + color: white; + text-shadow: 0px 0px 0.3em rgba(0, 0, 0, 0.5); + } + } + } +} diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss index 37524593..1b72f1b0 100644 --- a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss +++ b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss @@ -221,54 +221,3 @@ $section-top-padding-desktop: $nav-height + 110px; width: 100%; } } - - - -// SECTION NAV (ASIDE) - -.section-nav { - position: fixed; - left: $page-gutter; - height: 100vh; - display: flex; - align-items: center; - z-index: 1; - - @include breakpoint(large-desktop-up) { - display: none; - } -} - -.section-nav__list__link { - @include breakpoint(medium-desktop-down) { - width: 10px; - height: 10px; - border-radius: 2px; - border: 1px solid white; - margin-top: 0.75rem; - - &:first-child { - background-color: white; - } - - a { - color: transparent; - font-size: 1rem; - padding-left: 1rem; - vertical-align: top; - display: block; - width: 300px; - line-height: 8px; - text-decoration: none; - } - - &:hover { - background-color: white; - - a { - color: white; - text-shadow: 0px 0px 0.3em rgba(0, 0, 0, 0.5); - } - } - } -} From e416e7db5636f7cca3ab6649ffacbd1f68add580 Mon Sep 17 00:00:00 2001 From: Chloe Hwang Date: Tue, 2 Jan 2018 17:07:25 -0500 Subject: [PATCH 3/9] added correct file for arrow svg and tweaked padding --- packages/microcosm-www-next/src/images/arrow.svg | 9 +++++---- packages/microcosm-www-next/src/pages/index.js | 2 +- .../src/stylesheets/setup/_dimensions.scss | 3 ++- .../src/stylesheets/structure/_aside.scss | 2 +- .../src/stylesheets/structure/_section.scss | 11 ++++------- .../src/stylesheets/utility/_wrapper.scss | 9 +++++++-- 6 files changed, 20 insertions(+), 16 deletions(-) diff --git a/packages/microcosm-www-next/src/images/arrow.svg b/packages/microcosm-www-next/src/images/arrow.svg index febb0c84..c02320c9 100644 --- a/packages/microcosm-www-next/src/images/arrow.svg +++ b/packages/microcosm-www-next/src/images/arrow.svg @@ -1,5 +1,6 @@ - - - - + + + + diff --git a/packages/microcosm-www-next/src/pages/index.js b/packages/microcosm-www-next/src/pages/index.js index 510bb052..3d3d6919 100644 --- a/packages/microcosm-www-next/src/pages/index.js +++ b/packages/microcosm-www-next/src/pages/index.js @@ -85,7 +85,7 @@ export default class IndexPage extends React.Component { this.newLink.classList.add('-active') window.scroll({ - top: document.getElementById(num).offsetTop - 400, + top: document.getElementById(num).offsetTop - 500, left: 0, behavior: 'smooth' }); diff --git a/packages/microcosm-www-next/src/stylesheets/setup/_dimensions.scss b/packages/microcosm-www-next/src/stylesheets/setup/_dimensions.scss index 7bf1909c..0651d09e 100644 --- a/packages/microcosm-www-next/src/stylesheets/setup/_dimensions.scss +++ b/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; diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_aside.scss b/packages/microcosm-www-next/src/stylesheets/structure/_aside.scss index e590714e..3afc625a 100644 --- a/packages/microcosm-www-next/src/stylesheets/structure/_aside.scss +++ b/packages/microcosm-www-next/src/stylesheets/structure/_aside.scss @@ -2,7 +2,7 @@ .section-nav { position: fixed; - left: $page-gutter; + left: $page-gutter-mobile / 2; height: 100vh; display: flex; align-items: center; diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss index 1b72f1b0..92e791ce 100644 --- a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss +++ b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss @@ -118,21 +118,18 @@ $section-top-padding-desktop: $nav-height + 110px; text-transform: uppercase; .toggle-container.-mobile & { - // @include breakpoint(medium-desktop-down) { + @include breakpoint(medium-desktop-down) { margin-right: 4%; padding-left: rem(40); position: relative; &::before { content: url('../images/arrow.svg'); - position: absolute; left: 0; + position: absolute; + width: 17px; } - // } - - // @include breakpoint(large-desktop-up) { - // margin-bottom: rem(30); - // } + } } .toggle-container.-desktop & { diff --git a/packages/microcosm-www-next/src/stylesheets/utility/_wrapper.scss b/packages/microcosm-www-next/src/stylesheets/utility/_wrapper.scss index 1cdd5402..ea4bb648 100644 --- a/packages/microcosm-www-next/src/stylesheets/utility/_wrapper.scss +++ b/packages/microcosm-www-next/src/stylesheets/utility/_wrapper.scss @@ -4,10 +4,15 @@ .wrapper { margin-left: auto; margin-right: auto; - padding-left: $page-gutter; - padding-right: $page-gutter; + padding-left: $page-gutter-mobile; + padding-right: $page-gutter-mobile; width: 100%; + @include breakpoint(large-tablet-up) { + padding-left: $page-gutter-desktop; + padding-right: $page-gutter-desktop; + } + @include breakpoint(medium-desktop-up) { max-width: 1225px; } From 5771db5eca46325bd219e18fa445db501c0c3443 Mon Sep 17 00:00:00 2001 From: Chloe Hwang Date: Tue, 2 Jan 2018 17:19:29 -0500 Subject: [PATCH 4/9] added arrow to graphic --- packages/microcosm-www-next/src/pages/index.js | 6 +++--- .../src/stylesheets/structure/_section.scss | 16 +++++++++++++++- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/microcosm-www-next/src/pages/index.js b/packages/microcosm-www-next/src/pages/index.js index 3d3d6919..2307bedc 100644 --- a/packages/microcosm-www-next/src/pages/index.js +++ b/packages/microcosm-www-next/src/pages/index.js @@ -27,7 +27,7 @@ export default class IndexPage extends React.Component { this.observeOptions = { root: null, rootMargin: '0px 0px 0px', - threshold: 0.5, + threshold: 1.0, } } @@ -57,7 +57,7 @@ export default class IndexPage extends React.Component { onIntersection = observed => { let entry = observed[0] let section = parseInt(entry.target.dataset.section) - let isIntersecting = entry.intersectionRatio >= 0.5 + let isIntersecting = entry.intersectionRatio >= 1.0 let notAlreadyVisible = section !== this.state.currentSection if (isIntersecting && notAlreadyVisible) { @@ -85,7 +85,7 @@ export default class IndexPage extends React.Component { this.newLink.classList.add('-active') window.scroll({ - top: document.getElementById(num).offsetTop - 500, + top: document.getElementById(num).offsetTop - 400, left: 0, behavior: 'smooth' }); diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss index 92e791ce..40c83128 100644 --- a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss +++ b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss @@ -207,9 +207,23 @@ $section-top-padding-desktop: $nav-height + 110px; max-width: 600px; position: relative; + @include breakpoint(large-desktop-up) { + margin-bottom: 30vh; + + &::after { + bottom: -17vh; + content: url('../images/arrow.svg'); + left: 0; + margin: 0 auto; + position: absolute; + right: 0; + width: 17px; + } + } + &:last-child { @include breakpoint(large-desktop-up) { - margin-bottom: 34vh; + margin-bottom: 60vh; } } From 515a953126b5b949e7bb3fcf98181b604a472558 Mon Sep 17 00:00:00 2001 From: Chloe Hwang Date: Tue, 2 Jan 2018 18:02:00 -0500 Subject: [PATCH 5/9] refactored to export out side nav --- .../src/components/graphic.js | 2 +- .../src/components/side-nav.js | 57 +++++++++++++++++++ .../microcosm-www-next/src/pages/index.js | 34 +---------- .../src/stylesheets/structure/_aside.scss | 22 +++---- 4 files changed, 70 insertions(+), 45 deletions(-) create mode 100644 packages/microcosm-www-next/src/components/side-nav.js diff --git a/packages/microcosm-www-next/src/components/graphic.js b/packages/microcosm-www-next/src/components/graphic.js index 4b829dde..f98270e9 100644 --- a/packages/microcosm-www-next/src/components/graphic.js +++ b/packages/microcosm-www-next/src/components/graphic.js @@ -2,7 +2,7 @@ import React from 'react' const Graphic = ({ section, graphicUrl }) => (
{ + map[section] = document.getElementById('graphic-' + section) + return map + }, {}) + } + + onClick = (e, num) => { + e.preventDefault() + this.changeClasses(e.target) + this.scrollToSection(num) + } + + changeClasses = (elem) => { + this.prevLink = this.currLink ? this.currLink : document.getElementsByClassName('-active')[0] + this.currLink = elem + + this.prevLink.classList.remove('-active') + this.currLink.classList.add('-active') + } + + scrollToSection = (num) => { + window.scroll({ + top: this.elementsMap[num].offsetTop - 400, + left: 0, + behavior: 'smooth' + }); + } + + render() { + return ( +
    + { + this.props.sections.map(section => ( +
  1. + {this.onClick(e, section)}} + > + { data[section].heading } + +
    2. + )) + } +
+ + + ) + } +} diff --git a/packages/microcosm-www-next/src/pages/index.js b/packages/microcosm-www-next/src/pages/index.js index 2307bedc..7010e975 100644 --- a/packages/microcosm-www-next/src/pages/index.js +++ b/packages/microcosm-www-next/src/pages/index.js @@ -1,5 +1,6 @@ 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 { @@ -75,22 +76,6 @@ export default class IndexPage extends React.Component { this.setState({ microcosmView: !this.state.microcosmView }) } - scroll = (e, num) => { - e.preventDefault() - - this.oldLink = this.newLink ? this.newLink : document.getElementsByClassName('-active')[0] - this.newLink = e.target - - this.oldLink.classList.remove('-active') - this.newLink.classList.add('-active') - - window.scroll({ - top: document.getElementById(num).offsetTop - 400, - left: 0, - behavior: 'smooth' - }); - } - render() { let microcosmView = this.state.microcosmView let sectionData = data[this.state.currentSection] @@ -99,21 +84,8 @@ export default class IndexPage extends React.Component { return (
- + +

Date: Wed, 3 Jan 2018 11:01:01 -0500 Subject: [PATCH 6/9] ran yarn format --- .../src/components/side-nav.js | 26 ++++++++++--------- .../microcosm-www-next/src/pages/index.js | 12 +++++---- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/packages/microcosm-www-next/src/components/side-nav.js b/packages/microcosm-www-next/src/components/side-nav.js index b6446bfd..67c90697 100644 --- a/packages/microcosm-www-next/src/components/side-nav.js +++ b/packages/microcosm-www-next/src/components/side-nav.js @@ -15,20 +15,22 @@ export default class SideNav extends React.Component { this.scrollToSection(num) } - changeClasses = (elem) => { - this.prevLink = this.currLink ? this.currLink : document.getElementsByClassName('-active')[0] + changeClasses = elem => { + this.prevLink = this.currLink + ? this.currLink + : document.getElementsByClassName('-active')[0] this.currLink = elem this.prevLink.classList.remove('-active') this.currLink.classList.add('-active') } - scrollToSection = (num) => { + scrollToSection = num => { window.scroll({ top: this.elementsMap[num].offsetTop - 400, left: 0, - behavior: 'smooth' - }); + behavior: 'smooth', + }) } render() { @@ -36,19 +38,19 @@ export default class SideNav extends React.Component { diff --git a/packages/microcosm-www-next/src/pages/index.js b/packages/microcosm-www-next/src/pages/index.js index 7010e975..182dc79e 100644 --- a/packages/microcosm-www-next/src/pages/index.js +++ b/packages/microcosm-www-next/src/pages/index.js @@ -79,7 +79,9 @@ export default class IndexPage extends React.Component { render() { let microcosmView = this.state.microcosmView let sectionData = data[this.state.currentSection] - let text = microcosmView ? sectionData.microcosmText : sectionData.browserText + let text = microcosmView + ? sectionData.microcosmText + : sectionData.browserText let browserClass = !microcosmView ? ' -browserView' : '' return ( @@ -89,9 +91,7 @@ export default class IndexPage extends React.Component {

Meanwhile, in

@@ -138,7 +138,9 @@ export default class IndexPage extends React.Component { ))}
From 1e60701e2bcd1e032e802cc6a93369f10b7fd171 Mon Sep 17 00:00:00 2001 From: Chloe Hwang Date: Wed, 3 Jan 2018 16:26:09 -0500 Subject: [PATCH 7/9] refactored to use state to add classname --- .../src/components/side-nav.js | 64 +++++++------------ .../microcosm-www-next/src/pages/index.js | 7 +- .../src/stylesheets/structure/_aside.scss | 4 ++ 3 files changed, 33 insertions(+), 42 deletions(-) diff --git a/packages/microcosm-www-next/src/components/side-nav.js b/packages/microcosm-www-next/src/components/side-nav.js index 67c90697..296ab717 100644 --- a/packages/microcosm-www-next/src/components/side-nav.js +++ b/packages/microcosm-www-next/src/components/side-nav.js @@ -1,59 +1,43 @@ import React from 'react' import data from '../data/index.json' -export default class SideNav extends React.Component { - componentDidMount() { - this.elementsMap = this.props.sections.reduce((map, section) => { - map[section] = document.getElementById('graphic-' + section) - return map - }, {}) - } +const SideNav = ({ graphics, currentSection }) => { - onClick = (e, num) => { + const scrollToGraphic = (e, section) => { e.preventDefault() - this.changeClasses(e.target) - this.scrollToSection(num) - } - - changeClasses = elem => { - this.prevLink = this.currLink - ? this.currLink - : document.getElementsByClassName('-active')[0] - this.currLink = elem - - this.prevLink.classList.remove('-active') - this.currLink.classList.add('-active') - } - scrollToSection = num => { window.scroll({ - top: this.elementsMap[num].offsetTop - 400, + top: section.offsetTop - 400, left: 0, behavior: 'smooth', }) } - render() { - return ( - + ) } + +export default SideNav diff --git a/packages/microcosm-www-next/src/pages/index.js b/packages/microcosm-www-next/src/pages/index.js index 182dc79e..35bd2203 100644 --- a/packages/microcosm-www-next/src/pages/index.js +++ b/packages/microcosm-www-next/src/pages/index.js @@ -7,6 +7,7 @@ export default class IndexPage extends React.Component { constructor(props) { super(props) this.state = { + graphics: [], numSections: 3, currentSection: 1, microcosmView: true @@ -24,12 +25,14 @@ export default class IndexPage extends React.Component { setVars() { this.body = document.body - this.graphics = document.querySelectorAll('[data-module="ObserveGraphic"]') this.observeOptions = { root: null, rootMargin: '0px 0px 0px', threshold: 1.0, } + + this.graphics = [].slice.call(document.querySelectorAll('[data-module="ObserveGraphic"]')) + this.setState({ graphics: this.graphics }) } createSectionsArray() { @@ -86,7 +89,7 @@ export default class IndexPage extends React.Component { return (
- +
diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_aside.scss b/packages/microcosm-www-next/src/stylesheets/structure/_aside.scss index f0eef5bd..b788349f 100644 --- a/packages/microcosm-www-next/src/stylesheets/structure/_aside.scss +++ b/packages/microcosm-www-next/src/stylesheets/structure/_aside.scss @@ -30,6 +30,10 @@ text-decoration: none; vertical-align: top; width: 300px; + + &.-active { + background-color: white; + } } &:hover { From 369d180a637880e97280ae2efa5373d3fa47c962 Mon Sep 17 00:00:00 2001 From: Chloe Hwang Date: Wed, 3 Jan 2018 16:55:41 -0500 Subject: [PATCH 8/9] refactored to store a map that holds DOM elements --- .../src/components/side-nav.js | 18 +++++----- .../microcosm-www-next/src/pages/index.js | 33 +++++++++---------- 2 files changed, 24 insertions(+), 27 deletions(-) diff --git a/packages/microcosm-www-next/src/components/side-nav.js b/packages/microcosm-www-next/src/components/side-nav.js index 296ab717..f357cde9 100644 --- a/packages/microcosm-www-next/src/components/side-nav.js +++ b/packages/microcosm-www-next/src/components/side-nav.js @@ -3,11 +3,11 @@ import data from '../data/index.json' const SideNav = ({ graphics, currentSection }) => { - const scrollToGraphic = (e, section) => { + const scrollToElement = (e, elem) => { e.preventDefault() window.scroll({ - top: section.offsetTop - 400, + top: elem.offsetTop - 400, left: 0, behavior: 'smooth', }) @@ -17,19 +17,17 @@ const SideNav = ({ graphics, currentSection }) => {