From 4a08001654614666a5c43f51e9790f6bac2d3bf2 Mon Sep 17 00:00:00 2001 From: Chloe Hwang Date: Fri, 22 Dec 2017 13:15:02 -0500 Subject: [PATCH 1/5] implemented polyfill for IntersectionObserver and made some Safari tweaks --- packages/microcosm-www-next/package.json | 1 + packages/microcosm-www-next/src/layouts/index.js | 1 + .../microcosm-www-next/src/stylesheets/structure/_body.scss | 1 + .../microcosm-www-next/src/stylesheets/structure/_footer.scss | 4 ++++ .../src/stylesheets/structure/_section.scss | 1 + 5 files changed, 8 insertions(+) diff --git a/packages/microcosm-www-next/package.json b/packages/microcosm-www-next/package.json index 97d1ed3d..343b5e7a 100644 --- a/packages/microcosm-www-next/package.json +++ b/packages/microcosm-www-next/package.json @@ -8,6 +8,7 @@ "gatsby-link": "^1.6.22", "gatsby-plugin-react-helmet": "^1.0.8", "gatsby-plugin-sass": "^1.0.12", + "intersection-observer": "^0.5.0", "react-intersection-observer": "^2.0.3" }, "keywords": [ diff --git a/packages/microcosm-www-next/src/layouts/index.js b/packages/microcosm-www-next/src/layouts/index.js index 49731ff6..82f66d0c 100644 --- a/packages/microcosm-www-next/src/layouts/index.js +++ b/packages/microcosm-www-next/src/layouts/index.js @@ -4,6 +4,7 @@ import Link from 'gatsby-link' import Helmet from 'react-helmet' import VigetLogo from '../components/viget-logo' +import 'intersection-observer' import '../stylesheets/app.scss' const Navigation = () => ( diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_body.scss b/packages/microcosm-www-next/src/stylesheets/structure/_body.scss index 51762ca8..a6b43d27 100644 --- a/packages/microcosm-www-next/src/stylesheets/structure/_body.scss +++ b/packages/microcosm-www-next/src/stylesheets/structure/_body.scss @@ -3,6 +3,7 @@ $split-bg-height-desktop: 291px; body { background-color: color(bg-1-bottom); + position: relative; transition: transition(background-color); &::before { //top of half split bg diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_footer.scss b/packages/microcosm-www-next/src/stylesheets/structure/_footer.scss index 12e5a346..7da490d8 100644 --- a/packages/microcosm-www-next/src/stylesheets/structure/_footer.scss +++ b/packages/microcosm-www-next/src/stylesheets/structure/_footer.scss @@ -18,6 +18,10 @@ $cta-bottom-padding: 6px; @include breakpoint(large-desktop-up) { position: fixed; + + @media (max-height: 900px) { // if browser is shorter than 900px, don't fix footer to bottom + position: absolute; + } } .wrapper { diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss index c5fbd141..f4bc4335 100644 --- a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss +++ b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss @@ -16,6 +16,7 @@ $section-top-padding-desktop: $nav-height + 110px; .section__content { height: 100%; position: sticky; + position: -webkit-sticky; top: $section-top-padding-mobile; @include breakpoint(large-desktop-up) { From d66b4eac7634ff13e0ad5ad0ddc77506e542f77f Mon Sep 17 00:00:00 2001 From: Chloe Hwang Date: Fri, 22 Dec 2017 16:16:07 -0500 Subject: [PATCH 2/5] used feature queries to polyfill for position sticky on IE --- packages/microcosm-www-next/package.json | 3 +- .../microcosm-www-next/src/pages/index.js | 27 ++++++++++--- .../src/stylesheets/structure/_section.scss | 40 +++++++++++++++---- 3 files changed, 54 insertions(+), 16 deletions(-) diff --git a/packages/microcosm-www-next/package.json b/packages/microcosm-www-next/package.json index 343b5e7a..15932ab2 100644 --- a/packages/microcosm-www-next/package.json +++ b/packages/microcosm-www-next/package.json @@ -8,8 +8,7 @@ "gatsby-link": "^1.6.22", "gatsby-plugin-react-helmet": "^1.0.8", "gatsby-plugin-sass": "^1.0.12", - "intersection-observer": "^0.5.0", - "react-intersection-observer": "^2.0.3" + "intersection-observer": "^0.5.0" }, "keywords": [ "gatsby" diff --git a/packages/microcosm-www-next/src/pages/index.js b/packages/microcosm-www-next/src/pages/index.js index 91e52940..d3599bde 100644 --- a/packages/microcosm-www-next/src/pages/index.js +++ b/packages/microcosm-www-next/src/pages/index.js @@ -12,6 +12,10 @@ export default class IndexPage extends React.Component { } } + componentWillMount() { + this.sections = this.createSectionsArray() + } + componentDidMount() { this.setVars() this.beginObserve() @@ -27,6 +31,16 @@ export default class IndexPage extends React.Component { } } + createSectionsArray() { + let arr = []; + + for (let i = 0; i < this.state.numSections; i++) { + arr.push(i + 1) + } + + return arr + } + beginObserve() { //create new Observer instance let observer = new IntersectionObserver( @@ -35,7 +49,9 @@ export default class IndexPage extends React.Component { ) //start observing each graphic - this.graphics.forEach(graphic => observer.observe(graphic)) + for (let i = 0; i < this.graphics.length; i++) { + observer.observe(this.graphics[i]) + } } onIntersection = observed => { @@ -102,11 +118,10 @@ export default class IndexPage extends React.Component {
- {Array(this.state.numSections) - .fill() - .map((el, i) => ( - - ))} + { this.sections.map(el => ( + + )) + }
diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss index f4bc4335..f4f76785 100644 --- a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss +++ b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss @@ -6,8 +6,11 @@ $section-top-padding-desktop: $nav-height + 110px; @include breakpoint(large-desktop-up) { display: flex; - justify-content: space-between; padding-top: $section-top-padding-desktop; + + @supports (position: sticky) or (position: -webkit-sticky) { + justify-content: space-between; + } } } @@ -15,24 +18,37 @@ $section-top-padding-desktop: $nav-height + 110px; .section__content { height: 100%; - position: sticky; - position: -webkit-sticky; - top: $section-top-padding-mobile; + padding-right: 20px; + position: fixed; + width: 100%; @include breakpoint(large-desktop-up) { - flex-basis: 45%; - order: 2; - top: $section-top-padding-desktop; + right: 2%; + width: 45%; + } + + @supports (position: sticky) or (position: -webkit-sticky) { + padding-right: 0; + position: -webkit-sticky; + position: sticky; + top: $section-top-padding-mobile; + + @include breakpoint(large-desktop-up) { + order: 2; + top: $section-top-padding-desktop; + } } } + // CONTENT - containers .text-container { - margin: 0 auto rem(50); + margin-bottom: rem(50); max-width: 550px; @include breakpoint(medium-desktop-down) { + margin: 0 auto rem(50); padding-left: rem(40); } } @@ -152,9 +168,17 @@ $section-top-padding-desktop: $nav-height + 110px; // GRAPHIC .section__graphic { + @include breakpoint(medium-desktop-down) { + padding-top: 30vh; + } + @include breakpoint(large-desktop-up) { flex-basis: 600px; } + + @supports (position: sticky) or (position: -webkit-sticky) { + padding-top: 0; + } } .section__graphic__figure { From edf9b3beaead490a7db2c99d388f726f2b7b1199 Mon Sep 17 00:00:00 2001 From: Chloe Hwang Date: Fri, 22 Dec 2017 17:14:26 -0500 Subject: [PATCH 3/5] ran yarn format --- packages/microcosm-www-next/src/pages/index.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/microcosm-www-next/src/pages/index.js b/packages/microcosm-www-next/src/pages/index.js index d3599bde..294bde09 100644 --- a/packages/microcosm-www-next/src/pages/index.js +++ b/packages/microcosm-www-next/src/pages/index.js @@ -32,7 +32,7 @@ export default class IndexPage extends React.Component { } createSectionsArray() { - let arr = []; + let arr = [] for (let i = 0; i < this.state.numSections; i++) { arr.push(i + 1) @@ -106,7 +106,9 @@ export default class IndexPage extends React.Component {

Meanwhile, in

@@ -118,10 +120,9 @@ export default class IndexPage extends React.Component {
- { this.sections.map(el => ( - - )) - } + {this.sections.map(el => ( + + ))}
From bb6e5cba62d8a1a93d1f77ad704ad2aa51a32cab Mon Sep 17 00:00:00 2001 From: Chloe Hwang Date: Fri, 22 Dec 2017 17:15:42 -0500 Subject: [PATCH 4/5] minor tweak --- packages/microcosm-www-next/src/pages/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/microcosm-www-next/src/pages/index.js b/packages/microcosm-www-next/src/pages/index.js index 294bde09..4154436d 100644 --- a/packages/microcosm-www-next/src/pages/index.js +++ b/packages/microcosm-www-next/src/pages/index.js @@ -120,8 +120,8 @@ export default class IndexPage extends React.Component {
- {this.sections.map(el => ( - + {this.sections.map(num => ( + ))}
From 2f8f0eb82ca32d98ac340c69eaf39e95863574ae Mon Sep 17 00:00:00 2001 From: Chloe Hwang Date: Wed, 3 Jan 2018 12:20:53 -0500 Subject: [PATCH 5/5] removed prettier dev dep --- packages/microcosm-www-next/package.json | 4 +- .../microcosm-www-next/src/layouts/index.js | 4 +- .../microcosm-www-next/src/pages/index.js | 4 +- yarn.lock | 85 +------------------ 4 files changed, 9 insertions(+), 88 deletions(-) diff --git a/packages/microcosm-www-next/package.json b/packages/microcosm-www-next/package.json index 15932ab2..8767f2ae 100644 --- a/packages/microcosm-www-next/package.json +++ b/packages/microcosm-www-next/package.json @@ -18,11 +18,9 @@ "scripts": { "build": "gatsby build", "start": "gatsby develop", - "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'", "test": "echo \"Error: no test specified\" && exit 1" }, "devDependencies": { - "babel-preset-env": "^1.6.1", - "prettier": "^1.7.4" + "babel-preset-env": "^1.6.1" } } diff --git a/packages/microcosm-www-next/src/layouts/index.js b/packages/microcosm-www-next/src/layouts/index.js index 82f66d0c..30cd6d8c 100644 --- a/packages/microcosm-www-next/src/layouts/index.js +++ b/packages/microcosm-www-next/src/layouts/index.js @@ -44,7 +44,7 @@ const PageWrapper = ({ children }) => ( title="Microcosm" meta={[ { name: 'description', content: 'Sample' }, - { name: 'keywords', content: 'sample, something' }, + { name: 'keywords', content: 'sample, something' } ]} /> @@ -57,7 +57,7 @@ const PageWrapper = ({ children }) => ( ) PageWrapper.propTypes = { - children: PropTypes.func, + children: PropTypes.func } export default PageWrapper diff --git a/packages/microcosm-www-next/src/pages/index.js b/packages/microcosm-www-next/src/pages/index.js index 4154436d..7f8dddf6 100644 --- a/packages/microcosm-www-next/src/pages/index.js +++ b/packages/microcosm-www-next/src/pages/index.js @@ -8,7 +8,7 @@ export default class IndexPage extends React.Component { this.state = { numSections: 3, currentSection: 1, - microcosmView: true, + microcosmView: true } } @@ -27,7 +27,7 @@ export default class IndexPage extends React.Component { this.observeOptions = { root: null, rootMargin: '0px 0px 100px', - threshold: 1.0, + threshold: 1.0 } } diff --git a/yarn.lock b/yarn.lock index 63aa5433..3abbf25a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1136,10 +1136,6 @@ babel-types@^6.0.19, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23 lodash "^4.17.4" to-fast-properties "^1.0.3" -babylon@7.0.0-beta.19: - version "7.0.0-beta.19" - resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.19.tgz#e928c7e807e970e0536b078ab3e0c48f9e052503" - babylon@7.0.0-beta.22: version "7.0.0-beta.22" resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.22.tgz#74f0ad82ed7c7c3cfeab74cf684f815104161b65" @@ -1220,7 +1216,7 @@ block-stream@*: dependencies: inherits "~2.0.0" -bluebird@^3.4.7, bluebird@~3.5.0: +bluebird@^3.4.7: version "3.5.1" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9" @@ -1563,12 +1559,6 @@ caseless@~0.12.0: version "0.12.0" resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" -catharsis@~0.8.9: - version "0.8.9" - resolved "https://registry.yarnpkg.com/catharsis/-/catharsis-0.8.9.tgz#98cc890ca652dd2ef0e70b37925310ff9e90fc8b" - dependencies: - underscore-contrib "~0.3.0" - center-align@^0.1.1: version "0.1.3" resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad" @@ -2833,7 +2823,7 @@ escape-html@~1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" -escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5, escape-string-regexp@~1.0.5: +escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" @@ -3627,7 +3617,7 @@ got@^6.7.1: unzip-response "^2.0.1" url-parse-lax "^1.0.0" -graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9: +graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6: version "4.1.11" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658" @@ -4622,12 +4612,6 @@ js-yaml@~3.7.0: argparse "^1.0.7" esprima "^2.6.0" -js2xmlparser@~3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/js2xmlparser/-/js2xmlparser-3.0.0.tgz#3fb60eaa089c5440f9319f51760ccd07e2499733" - dependencies: - xmlcreate "^1.0.1" - jsbn@~0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513" @@ -4636,29 +4620,6 @@ jschardet@^1.4.2: version "1.5.1" resolved "https://registry.yarnpkg.com/jschardet/-/jschardet-1.5.1.tgz#c519f629f86b3a5bedba58a88d311309eec097f9" -jsdoc-babel@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/jsdoc-babel/-/jsdoc-babel-0.3.0.tgz#2eaaefd9eca8d8b78845394a1cce9d8896befbe1" - dependencies: - lodash "^4.13.1" - -jsdoc@^3.5.4: - version "3.5.5" - resolved "https://registry.yarnpkg.com/jsdoc/-/jsdoc-3.5.5.tgz#484521b126e81904d632ff83ec9aaa096708fa4d" - dependencies: - babylon "7.0.0-beta.19" - bluebird "~3.5.0" - catharsis "~0.8.9" - escape-string-regexp "~1.0.5" - js2xmlparser "~3.0.0" - klaw "~2.0.0" - marked "~0.3.6" - mkdirp "~0.5.1" - requizzle "~0.2.1" - strip-json-comments "~2.0.1" - taffydb "2.6.2" - underscore "~1.8.3" - jsdom@^9.12.0: version "9.12.0" resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.12.0.tgz#e8c546fffcb06c00d4833ca84410fed7f8a097d4" @@ -4768,12 +4729,6 @@ kind-of@^4.0.0: dependencies: is-buffer "^1.1.5" -klaw@~2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/klaw/-/klaw-2.0.0.tgz#59c128e0dc5ce410201151194eeb9cbf858650f6" - dependencies: - graceful-fs "^4.1.9" - latest-version@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15" @@ -5031,7 +4986,7 @@ lodash@^3.10.1: version "3.10.1" resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6" -lodash@^4.0.0, lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1: +lodash@^4.0.0, lodash@^4.1.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -5107,10 +5062,6 @@ map-stream@~0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194" -marked@~0.3.6: - version "0.3.6" - resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7" - math-expression-evaluator@^1.2.14: version "1.2.17" resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac" @@ -6772,12 +6723,6 @@ requires-port@1.0.x, requires-port@1.x.x: version "1.0.0" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" -requizzle@~0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/requizzle/-/requizzle-0.2.1.tgz#6943c3530c4d9a7e46f1cddd51c158fc670cdbde" - dependencies: - underscore "~1.6.0" - resolve-from@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226" @@ -7513,10 +7458,6 @@ table@^4.0.1: slice-ansi "0.0.4" string-width "^2.0.0" -taffydb@2.6.2: - version "2.6.2" - resolved "https://registry.yarnpkg.com/taffydb/-/taffydb-2.6.2.tgz#7cbcb64b5a141b6a2efc2c5d2c67b4e150b2a268" - tapable@^0.2.7: version "0.2.8" resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22" @@ -7791,16 +7732,6 @@ undefsafe@0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-0.0.3.tgz#ecca3a03e56b9af17385baac812ac83b994a962f" -underscore-contrib@~0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/underscore-contrib/-/underscore-contrib-0.3.0.tgz#665b66c24783f8fa2b18c9f8cbb0e2c7d48c26c7" - dependencies: - underscore "1.6.0" - -underscore@1.6.0, underscore@~1.6.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8" - underscore@1.7.x: version "1.7.0" resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.7.0.tgz#6bbaf0877500d36be34ecaa584e0db9fef035209" @@ -7809,10 +7740,6 @@ underscore@~1.4.4: version "1.4.4" resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604" -underscore@~1.8.3: - version "1.8.3" - resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022" - uniq@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff" @@ -8252,10 +8179,6 @@ xml-name-validator@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635" -xmlcreate@^1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/xmlcreate/-/xmlcreate-1.0.2.tgz#fa6bf762a60a413fb3dd8f4b03c5b269238d308f" - xmlhttprequest-ssl@1.5.3: version "1.5.3" resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz#185a888c04eca46c3e4070d99f7b49de3528992d"