Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ch/qa scrolling #458

Merged
merged 6 commits into from
Jan 3, 2018
Merged

Ch/qa scrolling #458

merged 6 commits into from
Jan 3, 2018

Conversation

ccchwang
Copy link

@ccchwang ccchwang commented Dec 22, 2017

This PR does some initial QA on layout and scroll behavior. It:

  • implements polyfill for IntersectionObserver
  • makes some minor tweaks for Safari
  • implements feature queries to substitute for position: sticky on IE

@@ -4,6 +4,7 @@ import Link from 'gatsby-link'
import Helmet from 'react-helmet'
import VigetLogo from '../components/viget-logo'

import 'intersection-observer'
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

polyfill

@@ -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++) {
Copy link
Author

@ccchwang ccchwang Dec 22, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed this to a for loop because it wasn't working in IE

@ccchwang ccchwang requested a review from leobauza December 22, 2017 22:20
Copy link
Contributor

@leobauza leobauza left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 only thing is the failed circle test, not sure what that's about

@codecov-io
Copy link

codecov-io commented Jan 3, 2018

Codecov Report

Merging #458 into ch/layout will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           ch/layout     #458   +/-   ##
==========================================
  Coverage      76.51%   76.51%           
==========================================
  Files             44       44           
  Lines           1367     1367           
  Branches         253      253           
==========================================
  Hits            1046     1046           
  Misses           263      263           
  Partials          58       58

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e3b7b44...9ff2753. Read the comment docs.

@ccchwang ccchwang merged commit 9228445 into ch/layout Jan 3, 2018
ccchwang pushed a commit that referenced this pull request Jan 3, 2018
* starting styling layout and structure of mobile

* added styling for desktop layout

* tweaked heading margin

* ran yarn format

* ran yarn format

* removed prettier dev dependency

* Ch/qa scrolling (#458)
ccchwang pushed a commit that referenced this pull request Jan 3, 2018
* started implementing functionality to change bg color

* refactored footer for changing bg color, refactored scss to be more modular

* rebased branch, refactored to take advantage of rerender

* refactored color changing functionality so that nav and footer can change color as well

* ran yarn format

* removed prettier as dev dependency to use root rules instead

* Ch/layout (#457)

* Ch/qa scrolling (#458)
ccchwang pushed a commit that referenced this pull request Jan 3, 2018
* started implementing functionality to change bg color

* refactored footer for changing bg color, refactored scss to be more modular

* rebased branch, refactored to take advantage of rerender

* refactored color changing functionality so that nav and footer can change color as well

* ran yarn format

* removed prettier as dev dependency to use root rules instead

* Ch/layout (#457)

* Ch/qa scrolling (#458)
ccchwang pushed a commit that referenced this pull request Jan 3, 2018
* trial 1 for locked scroll behavior

* trying out two columns layout

* experimenting with react-intersection-observer

* set up IntersectionObserver and have it pull from json file

* restructured base layout for new design and did basic styling

* implementing intersection observer to change text on scroll

* added functionality to change view by button and started refactoring

* tweaked Intersection Observer to run smoother, added third section

* removed unnecessary comments

* remove comment

* ran yarn format

* fixed weird formatting by yarn

* fixed more weird formatting by yarn

* tweaking based on PR comments

* finished refactoring to change classnames on rerender

* refactored to rerender based on one state property only

* changed var name to be more clear

* got rid of unnecessary ids

* ran yarn format

* removed prettier as dev dependency and ran yarn format

* Ch/bg color change (#456)

* Ch/layout (#457)

* Ch/qa scrolling (#458)

* moved polyfill inside componentDidMount

* trying new way to import polyfill
@ccchwang ccchwang deleted the ch/QA-scrolling branch January 3, 2018 22:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants