From 659a17d8288781af1956225783a909414fbe1745 Mon Sep 17 00:00:00 2001 From: Chloe Hwang Date: Thu, 4 Jan 2018 15:13:49 -0500 Subject: [PATCH] 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 --- .../src/components/graphic.js | 1 + .../src/components/side-nav.js | 43 ++++++++++ .../microcosm-www-next/src/data/index.json | 11 ++- .../microcosm-www-next/src/images/arrow.svg | 9 +- .../microcosm-www-next/src/pages/index.js | 83 ++++++++++++------- .../src/stylesheets/app.scss | 1 + .../src/stylesheets/setup/_dimensions.scss | 3 +- .../src/stylesheets/structure/_aside.scss | 48 +++++++++++ .../src/stylesheets/structure/_footer.scss | 10 ++- .../src/stylesheets/structure/_section.scss | 51 ++++++++++-- .../src/stylesheets/utility/_wrapper.scss | 9 +- 11 files changed, 217 insertions(+), 52 deletions(-) create mode 100644 packages/microcosm-www-next/src/components/side-nav.js 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..f98270e9 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 }) => (
{ + const scrollToElement = (e, elem) => { + e.preventDefault() + + window.scroll({ + top: elem.offsetTop - 400, + left: 0, + behavior: 'smooth' + }) + } + + return ( + + ) +} + +export default SideNav diff --git a/packages/microcosm-www-next/src/data/index.json b/packages/microcosm-www-next/src/data/index.json index 363b913f..6f1c53d7 100644 --- a/packages/microcosm-www-next/src/data/index.json +++ b/packages/microcosm-www-next/src/data/index.json @@ -1,20 +1,23 @@ { "1": { - "heading": "01. Rendering a View", + "num": "01.", + "heading": "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": { - "heading": "02. Creating an Action", + "num": "02.", + "heading": "Creating an Action", "microcosmText": "The Presenter creates a new Action 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": "03. 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", 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 7f8dddf6..467854be 100644 --- a/packages/microcosm-www-next/src/pages/index.js +++ b/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 (
+ +
+
+

+ Meanwhile, in +

+
+
-

+

+ {sectionData.num} + {sectionData.heading} +

@@ -104,7 +123,7 @@ export default class IndexPage extends React.Component { />

-
+

- {this.sections.map(num => ( - + {this.state.numSections.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/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 new file mode 100644 index 00000000..cd3ed55d --- /dev/null +++ b/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); + } + } + } +} diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_footer.scss b/packages/microcosm-www-next/src/stylesheets/structure/_footer.scss index 7da490d8..58b300c5 100644 --- a/packages/microcosm-www-next/src/stylesheets/structure/_footer.scss +++ b/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; } } diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss index f4f76785..40c83128 100644 --- a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss +++ b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss @@ -53,7 +53,7 @@ $section-top-padding-desktop: $nav-height + 110px; } } -.toggle-container { +.toggle-container.-mobile { @include breakpoint(medium-desktop-down) { align-items: center; bottom: 0; @@ -65,6 +65,25 @@ $section-top-padding-desktop: $nav-height + 110px; padding: 0 rem(20); position: fixed; width: 100%; + z-index: 1; + } + + @include breakpoint(medium-desktop-up) { + @media (min-height: 901px) { + margin-bottom: $footer-height + 45px; + } + } + + @include breakpoint(large-desktop-up) { + display: none; + } +} + +.toggle-container.-desktop { + display: none; + + @include breakpoint(large-desktop-up) { + display: block; } } @@ -98,7 +117,7 @@ $section-top-padding-desktop: $nav-height + 110px; margin-bottom: 0.5rem; text-transform: uppercase; - .toggle-container & { + .toggle-container.-mobile & { @include breakpoint(medium-desktop-down) { margin-right: 4%; padding-left: rem(40); @@ -106,14 +125,15 @@ $section-top-padding-desktop: $nav-height + 110px; &::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 & { + margin-bottom: rem(30); } &.-top { @@ -182,15 +202,28 @@ $section-top-padding-desktop: $nav-height + 110px; } .section__graphic__figure { - margin: 0 auto 50vh; + margin: 0 auto 80vh; max-height: 600px; max-width: 600px; position: relative; - z-index: 1; + + @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; } } 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; }