Web/navbar hide #41

bobheadxi · 2018-08-09T08:37:30Z

Closes #35

👷 Changes

Reworked navbar styles based on Web/flexbox utils, login style rework #39
Reworked navbar logic
Added animation for scroll
Updated demo

💭 Notes

Targeted at #39 for now for a clearer diff, do not merge! Will point to master once that is in.

🔦 Testing Instructions

make web go to /ui_demo

To Do

Update tests 😢

sherryyx

The transition from the background-fill state to the transparent background state looks rlly good!

After looking at it some more, I think we should just make the background fill 100% opaque. The transparency doesn't really add anything & makes it kind of distracting to read the nav bar. I've updated it in the figma document just now.

Other than that, it looks good to go 💯

Thanks!

…web/navbar-hide

mingyokim

found a bug, will review the rest later

mingyokim · 2018-08-11T02:35:30Z

web/components/navbar/index.js

-        <nav>
-          <div>
-            <div>{getLogo()}</div>
+class Navbar extends React.Component {


I believe you need to add a componentShouldUpdate lifecycle method to update the state when new props are passed into this component.

Right now the component is not updating based on incoming props. Reproduction steps:

Make sure you're logged out

Go to /

Refresh and it should have logo, links, and login button

Click "login" button

The navbar still has logo, links, and login button

Refresh

The navbar is updated to just have logo

Can't repro anymore after f66d3b0 - let me know if it works when you get the chance!

Yeah I can't reproduce it anymore. But wouldn't it be better to have displayType and buttonType in the state? The only reason why this component re-renders properly is because its container is re-rendering itself. If for some reason the container does not re-render itself, but the props change, then this component wouldn't re-render.

Hm, I’ll have a closer look at this tonight

@mingyokim sorry, I'm not sure I understand - doesn't a prop change force the container to re-render? From what I understand, displayType and buttonType are only manipulated from here, and the navbar itself does not change them:

https://github.com/nwhacks/nwhacks2019/blob/master/web/containers/navbar/index.js#L57

It also seems like setting props that a component doesn't manipulate into state is somewhat bad practice (https://stackoverflow.com/a/47341539), but there also seems to be some other APIs for doing this kind of stuff (https://stackoverflow.com/a/49839457, https://stackoverflow.com/a/32414771)... though to be honest this seems to be kind of murky territory, since from what I understand, this type of stuff should just be kept in props (https://stackoverflow.com/a/40330195). I could be missing something though...

Officially, react only distinguishes between class and function (potentially stateful and stateless respectively), and:

The above two components are equivalent from React’s point of view.

https://reactjs.org/docs/components-and-props.html#functional-and-class-components

so props do cause a render on stateful components? oops i was mistaken, it's all good then

Similar question: https://www.reddit.com/r/reactjs/comments/7tn79g/state_and_componentwillreceiveprops/

class Foo extends Component { state = { value: this.props.value } // If the props change, update state componentWillReceiveProps (nextProps) { if (nextProps.value !== this.props.value) { this.setState({ value: nextProps.value }) } } render () { // render based on state.value } }

Top response:

Why you don't render props directly?

An update can be caused by changes to props or state.

https://reactjs.org/docs/react-component.html

Okay, so clearly change in props cause a re-render, reactjs says so. My bad lol

If this is the case, definitely use props rather than state because the component is not modifying the buttonType or displayType, they're just displaying it.

Approving

I'll just do one last sanity check

…web/navbar-hide

mingyokim

minor comments - looks good!

mingyokim · 2018-08-12T00:50:09Z

web/components/navbar/Navbar.sass

@@ -1,43 +1,21 @@
 nav
-  display: flex
+  z-index: 500


curious, why is this needed?

This keeps the navbar above all other elements, so long as we avoid using z-index elsewhere

mingyokim · 2018-08-12T00:51:26Z

web/components/navbar/Navbar.sass

  img
+    margin-top: 3px


spaces should always be multiples of 4 - can you change this to 4px? If the design said 3px that should be an error in design. @sherryyx can you confirm?

This is a hack because the logo looked slightly off :(

4px looks fine too though - I'll make this change

mingyokim · 2018-08-12T01:00:46Z

web/components/navbar/index.js

-        <nav>
-          <div>
-            <div>{getLogo()}</div>
+class Navbar extends React.Component {


Yeah I can't reproduce it anymore. But wouldn't it be better to have displayType and buttonType in the state? The only reason why this component re-renders properly is because its container is re-rendering itself. If for some reason the container does not re-render itself, but the props change, then this component wouldn't re-render.

mingyokim · 2018-08-12T01:03:17Z

web/components/navbar/index.js

+
+    // Calculate position
+    const offset = window.pageYOffset || document.documentElement.scrollTop;
+    const atTop = offset < 96;


Can we store 96 into some kind of variable?

Sure - 96 is in the CSS as navbar height, but I’ll replicate it here

mingyokim · 2018-08-12T01:04:57Z

web/components/navbar/index.js

+    const atTop = offset < 96;
+
+    // Calculate transparency
+    const transparent = offset < 256;


mingyokim · 2018-08-12T01:17:47Z

web/components/navbar/index.js

+    const { hidden, transparent } = this.state;
+    const { displayType, buttonType } = this.props;
+    const button = getButton(buttonType);
+    const links = [


cleaann but can we name this something like linksAndButton? it doesn't just have links

mingyokim · 2018-08-12T01:22:21Z

web/styles/spacing.sass

+
+  // repeating horizontal elements
+  &-horizontal
+    &-divs


mingyokim

Looks good, and thanks for correcting my misunderstanding on component rendering!

bobheadxi added 5 commits August 9, 2018 00:55

Redesign navbar css, update logo

22303c8

Simplify navbar logic further

58d4ba5

Use bold font for links

7db28cc

Animate navbar based on scroll

3c1fd03

Update demo for scroll animation

91164a8

bobheadxi added :web status: finalized status: DO NOT MERGE!!1! just for @mingyokim ❤️ labels Aug 9, 2018

bobheadxi requested review from chamkank and mingyokim August 9, 2018 08:37

bobheadxi removed the status: finalized label Aug 9, 2018

bobheadxi requested a review from sherryyx August 9, 2018 08:44

bobheadxi mentioned this pull request Aug 9, 2018

Web/flexbox utils, login style rework #39

Merged

bobheadxi added 4 commits August 9, 2018 02:12

Remove redundant leading 0

e6e6a3b

Increase animation time

b11641b

Only show navbar at top or on scrollup - switch between opacity levels

4765501

Remove console statement

f141789

bobheadxi changed the base branch from web/flexbox-utils to master August 9, 2018 19:45

sherryyx reviewed Aug 9, 2018

View reviewed changes

bobheadxi added 2 commits August 9, 2018 18:32

Remove transparent-white style

e542304

Update tests for new number of links

6e61284

bobheadxi added status: finalized and removed status: DO NOT MERGE!!1! just for @mingyokim ❤️ labels Aug 11, 2018

bobheadxi requested review from chamkank and mingyokim and removed request for chamkank and mingyokim August 11, 2018 00:49

Merge branch 'master' of https://github.com/nwhacks/nwhacks2019 into …

a0112fe

…web/navbar-hide

mingyokim suggested changes Aug 11, 2018

View reviewed changes

bobheadxi added 3 commits August 10, 2018 19:42

Assign displayType, buttonType directly from props

f66d3b0

Merge branch 'master' of https://github.com/nwhacks/nwhacks2019 into …

898adda

…web/navbar-hide

Refactor fonts, add documentation

0e4f69d

bobheadxi force-pushed the web/navbar-hide branch 4 times, most recently from a13c8e1 to ca0bf1a Compare August 11, 2018 20:25

Tweak navbar styles and animations

34b6748

bobheadxi force-pushed the web/navbar-hide branch from ca0bf1a to 34b6748 Compare August 11, 2018 20:31

mingyokim suggested changes Aug 12, 2018

View reviewed changes

bobheadxi added 2 commits August 12, 2018 15:03

Adjust image margin, make NAVBAR_HEIGHT a const

2283f6b

Rename links variables

ce1ab1e

bobheadxi requested a review from mingyokim August 12, 2018 22:05

mingyokim approved these changes Aug 13, 2018

View reviewed changes

bobheadxi merged commit 9f3835f into master Aug 13, 2018

bobheadxi deleted the web/navbar-hide branch August 13, 2018 01:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Web/navbar hide #41

Web/navbar hide #41

bobheadxi commented Aug 9, 2018 •

edited

Loading

sherryyx left a comment

mingyokim left a comment

mingyokim Aug 11, 2018

bobheadxi Aug 11, 2018

mingyokim Aug 12, 2018

bobheadxi Aug 12, 2018

bobheadxi Aug 12, 2018 •

edited

Loading

bobheadxi Aug 13, 2018 •

edited

Loading

mingyokim Aug 13, 2018

bobheadxi Aug 13, 2018

mingyokim Aug 13, 2018

mingyokim Aug 13, 2018

mingyokim left a comment

mingyokim Aug 12, 2018

bobheadxi Aug 12, 2018

mingyokim Aug 12, 2018

bobheadxi Aug 12, 2018

bobheadxi Aug 12, 2018

mingyokim Aug 12, 2018

mingyokim Aug 12, 2018

bobheadxi Aug 12, 2018

mingyokim Aug 12, 2018

mingyokim Aug 12, 2018

bobheadxi Aug 12, 2018

mingyokim Aug 12, 2018

mingyokim left a comment

Web/navbar hide #41

Web/navbar hide #41

Conversation

bobheadxi commented Aug 9, 2018 • edited Loading

👷 Changes

💭 Notes

🔦 Testing Instructions

To Do

sherryyx left a comment

Choose a reason for hiding this comment

mingyokim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bobheadxi Aug 12, 2018 • edited Loading

Choose a reason for hiding this comment

bobheadxi Aug 13, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mingyokim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mingyokim left a comment

Choose a reason for hiding this comment

bobheadxi commented Aug 9, 2018 •

edited

Loading

bobheadxi Aug 12, 2018 •

edited

Loading

bobheadxi Aug 13, 2018 •

edited

Loading