From 22303c8a3828b44fc70ded35717fb9767f4f1881 Mon Sep 17 00:00:00 2001 From: Robert Lin Date: Thu, 9 Aug 2018 00:55:42 -0700 Subject: [PATCH 01/16] Redesign navbar css, update logo --- web/.eslintrc.json | 1 + web/assets/logo.png | Bin 2635 -> 0 bytes web/assets/logo.svg | 34 ++++++++++ web/components/application/hacker/Hacker.js | 2 +- web/components/dashboard/index.js | 2 +- web/components/navbar/Navbar.sass | 32 +-------- web/components/navbar/index.js | 70 ++++++++++++-------- web/styles/utils.sass | 31 +++++++++ 8 files changed, 110 insertions(+), 62 deletions(-) delete mode 100644 web/assets/logo.png create mode 100644 web/assets/logo.svg diff --git a/web/.eslintrc.json b/web/.eslintrc.json index a885b0df..dc9d3417 100644 --- a/web/.eslintrc.json +++ b/web/.eslintrc.json @@ -11,6 +11,7 @@ "jest" ], "rules": { + "no-return-assign": 0, "no-param-reassign": 0, "import/prefer-default-export": 0, "prefer-template": 0, diff --git a/web/assets/logo.png b/web/assets/logo.png deleted file mode 100644 index 939bf8333b8db5d2f02fc91511d29f613c4e09ea..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2635 zcmV-R3bgf!P)HsPWztb1a(gk=LB(15ak3>Pf+zOjbx&` z3qm3#k%Y+QABp&86g#9$Qr`~*Kwz-~xcKb`yc$$EhS96n_J0BBDD)7T5}B{w14L81 zCE$NOga#B&(EN}1%QU$)*!)Hi61Rqzq}Y5c`7qht6QuvEuMxtZ;3cSR^GU(}CVk~0 zNGacZQgC>)hfrO`=97Z#T?FCwBe&dMN6O87Qc$peY7XQfxGS8(kb655mvC=@j+y~L@(>QHIRGRNVNcBhAbAKWH4lK~A#BtR0FsBmDhWXU1rjpxsJ#vV zD+fTs9sctZh^XIDc;&00Re0wiR9Ce&fFMNr5`SAlWpOBE?*hQ8H^PtMJ(~9%L?FPd zZ&7$My`WV%7lhEOP)NCMXgv@naORSI4%k9iKy~#3g8YLRK^TZZIQy`ddY**8gbNSB zP4x{$cnD6acPz+5C{+D}aUMdhni&nP1HzdEfHgN9Ee+vJqVSrX50Hg$7NL;MPsk92 zm41f5&7rzZ9zshqV&M`Y(48O!;p3?WfVDRzDGLEkH43jq03;8gWdJ0CaPv%Tp83Q= zAv*vd)+)Rbo$Nmm2;Bid>LG+~0U-4ZLiYfW2!htPAfb*!=q3QtIt=>&p}PP`J%G@K zZs>$lqh$>zNJHpYYRfY2eOV?z+Me$jRmUc&%f%(u!J(-FNB+6{$l5WsQyG+B9FM}i<0 z9^W2>h5#I&PjjO@2%>8g+DXmX0DubSTQvuv@vxVA0Z>ZEs^(ki=qj^{*g}wq%x)Ay zeE_Hzqp@EvVLr{6eM=MhVYa~rf>d~XV-V^Az+K4l$xL@d=0AsJSZu898iht6$OCB0 ze5(_KAPZnf4P}ewTb&RDIRIq7!rqF6w0f zTggHIhM?3BP(fwyfEh@L%>PQGnhi=ELOWmJP+e`9ZzT_*wAumCrukM|2ttwB<N+b%>d}M`BpImt?r>g)eqn#%(p@a>z9{u zt96Q1GXR_>JQ?#7l3b%upc(<7`8-W{qG||2O#n{Zd@Hk1PXB4_MVyoQRX0YWtZeKOxl7(#gf zeKg-n5JFi13mEEWy)@rS2tpYEW*nV{a{Dd;2*(2O=I^TFLXl$tc=NMVVU2<-0B?Sg zN^uP8{IcR988--70OsEOigH||a0q}|7~##YE(Zv^ z0Opk!MtG%Fuuvokz?)x}azY^u0Es0*Uir#|Fgn8-tS;*bB`oRp7nruMalgK<(aX!r z%gf8l%d2xzFuMKBziFIENJh5N1H&U_2~iKQdYPVN7*XV~x`7~i1OMIr0WPBS#I(S9 zwUc;h^y(T<{xd}S7xV4h2@S)ypwtuwgBg7J_3!LsQ#xY(;@~k3X&BCUt+R$HCzRq4 z8+8w>2q)Mx1|f}43s~Je-)`g7JfYc6U+um-l7RjFivfPN=sHeZg!uW!6%5UykUZMql&$0`)T# ziC6e@>P&>7muUV2nzJ<7baV4SOdxeF_&)t;3g3WD-5q4U(YN*^(209TH(J9Bz_8O zEYYi*r*U}61fe@5_l^@0niF4U58bOPAfG7v3!R6~p=r%Q`VIgvW>P75?VdYRzXK|@ z!^BE)4fc*mZwL53-d|ij94oC%z6Kr7#g4E5WN8S-T%~^53nVr%KKFRMWg)~(B0@CZ zDL5@Y9-U*IUNJO`e=eB}RYMn8dcQ(gc+3cIsQ`Y&+n9`g0Q13SrkYV$(zs-r?OILw zHqVQmR#^I|ZccA2C=67hxhi=Fk9<979#@Np+a@5&iG`Te`S_demzG=^&F32d7*cUlLr)^@?)gg?*db}#i=q7A?g zK)ndkNI49ba-*{VYmx$E_yBto+Ez~pWnfL@Z8=hRc>bSKuOhQ-^|OjhVbE~LKcjVC zXozDKdrv<-hs62Zu$!pjf@8rXWv*+<*IPbE^b&hKm;94@H(6ge zvAsrH_djeJVN#;Uxj!kd;=4e(^aeJKDs}%R_{l$PPRJLju<@lA^^=7osfTc7exWu; z!{%jrL;LNCd9Nuj-()n@1kqFz*?O=LO}fjCCYkS+nHZ1- zQ?p#aA}Xlk%&hA=er^~A+k!m$Eq+d+LSu9|E@;iYp!|z47rus6-u}a-eu(w5d6>g_TW||4T+s+X+`wK0`)#J} z)X;O0Jr6{t0BG2Rv-r)Xu-1A9`dM^Y0)R-4nU;IRj^)uzC&U&ai + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/components/application/hacker/Hacker.js b/web/components/application/hacker/Hacker.js index 43c32e37..bcaad3c1 100644 --- a/web/components/application/hacker/Hacker.js +++ b/web/components/application/hacker/Hacker.js @@ -7,7 +7,7 @@ const HackerApplication = (props) => { const { hackerApplication } = props; if (!hackerApplication.isLoaded) return (
); if (hackerApplication.data) return (); - return (
o hello there pls apply
); + return (
o hello there pls apply
); }; const mapStateToProps = (state) => { diff --git a/web/components/dashboard/index.js b/web/components/dashboard/index.js index 9c368630..694705c7 100644 --- a/web/components/dashboard/index.js +++ b/web/components/dashboard/index.js @@ -12,7 +12,7 @@ const DashBoard = (props) => { content = 'you didn\'t apply as hacker'; } - return (
{content}
); + return (
{content}
); }; const mapStateToProps = (state) => { diff --git a/web/components/navbar/Navbar.sass b/web/components/navbar/Navbar.sass index c2dc7a34..4e91deae 100644 --- a/web/components/navbar/Navbar.sass +++ b/web/components/navbar/Navbar.sass @@ -1,43 +1,13 @@ nav - display: flex background: $white - box-shadow: 0px 4px 6px $shadow height: 64px position: fixed - width: 100% - > div - display: inline-flex - > div:last-of-type - width: 80% - justify-content: flex-end - > div:first-of-type - width: 20% - justify-content: flex-start - > div > div - display: flex - margin-top: 12px - margin-bottom: 12px - align-items: center - margin-right: 7.5% - > div > div:first-of-type - margin-left: 24px - > div > div:last-of-type - margin-right: 24px a - display: flex - align-items: center text-decoration: none font-family: Apercu Pro font-size: 18px - color: $primary - a:visited - color: $primary - a:hover - color: #00D5D5 img + margin-top: 3px width: 32px - -.below-nav - padding-top: 64px diff --git a/web/components/navbar/index.js b/web/components/navbar/index.js index ded20563..c01901aa 100644 --- a/web/components/navbar/index.js +++ b/web/components/navbar/index.js @@ -1,13 +1,14 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { DISPLAY_TYPE } from '../../containers/navbar/DisplayTypes'; import { BUTTON_TYPE } from '../../containers/navbar/ButtonTypes'; import { SecondaryButton } from '../input/buttons'; -import logo from '../../assets/logo.png'; +import logo from '../../assets/logo.svg'; const getLogo = () => ( - + nwHacks ); const getButton = (buttonType) => { @@ -24,42 +25,53 @@ const getButton = (buttonType) => { }; const Navbar = ({ displayType, buttonType }) => { + const logoDiv = ( +
+
{getLogo()}
+
+ ); + const button = getButton(buttonType); + const links = [ + About, + Stories, + FAQ, + Sponsors, + 2018, + button, + ]; + + let inner; + let key = 0; switch (displayType) { case DISPLAY_TYPE.ONLY_LOGO: - return ( - - ); + inner = logoDiv; + break; case DISPLAY_TYPE.LOGO_AND_BUTTON: - return ( - + ); + break; default: - return ( - + ); } + return ; +}; + +Navbar.propTypes = { + displayType: PropTypes.symbol, + buttonType: PropTypes.symbol, }; export default Navbar; diff --git a/web/styles/utils.sass b/web/styles/utils.sass index eb55ed8b..70f8a53a 100644 --- a/web/styles/utils.sass +++ b/web/styles/utils.sass @@ -11,6 +11,9 @@ // padding declarations .pad + &-nav + padding-top: 64px + &-sides padding-left: 44px padding-right: 44px @@ -21,6 +24,17 @@ // margin declarations .margin + &-sides + margin-left: 24px + margin-right: 24px + &-large + margin-left: 36px + margin-right: 36px + + &-ends + margin-top: 12px + margin-bottom: 12px + &-text-inputs > .text-input &:first-of-type @@ -28,10 +42,21 @@ &:last-of-type margin-bottom: 56px + &-horizontal + &-divs + > div + &:first-of-type + margin-left: 24px + &:last-of-type + margin-right: 24px + // flexbox utility classes .flex display: flex + &-inline + display: inline-flex + // flex-directions &.dir &-col @@ -39,6 +64,12 @@ // justify-content &.jc + &-start + justify-content: flex-start + + &-end + justify-content: flex-end + &-center justify-content: center From 58d4ba558b954595cfd55cc0d1c5e8fefa39b227 Mon Sep 17 00:00:00 2001 From: Robert Lin Date: Thu, 9 Aug 2018 01:00:40 -0700 Subject: [PATCH 02/16] Simplify navbar logic further --- web/components/navbar/index.js | 37 +++++++++++++++++----------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/web/components/navbar/index.js b/web/components/navbar/index.js index c01901aa..f41dbf15 100644 --- a/web/components/navbar/index.js +++ b/web/components/navbar/index.js @@ -40,33 +40,32 @@ const Navbar = ({ displayType, buttonType }) => { button, ]; - let inner; + let linksDiv; let key = 0; switch (displayType) { case DISPLAY_TYPE.ONLY_LOGO: - inner = logoDiv; + linksDiv = logoDiv; break; case DISPLAY_TYPE.LOGO_AND_BUTTON: - inner = ( - - {logoDiv} -
-
{button}
-
- - ); + linksDiv =
{button}
; break; default: - inner = ( - - {logoDiv} -
- {links.map(l =>
{l}
)} -
- - ); + linksDiv = links.map(l => ( +
+ {l} +
+ )); } - return ; + return ( + + ); }; Navbar.propTypes = { From 7db28cc08ecbe59fa88c5daf94493128eeeaae35 Mon Sep 17 00:00:00 2001 From: Robert Lin Date: Thu, 9 Aug 2018 01:02:41 -0700 Subject: [PATCH 03/16] Use bold font for links --- web/components/navbar/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/web/components/navbar/index.js b/web/components/navbar/index.js index f41dbf15..02d08161 100644 --- a/web/components/navbar/index.js +++ b/web/components/navbar/index.js @@ -32,11 +32,11 @@ const Navbar = ({ displayType, buttonType }) => { ); const button = getButton(buttonType); const links = [ - About, - Stories, - FAQ, - Sponsors, - 2018, + About, + Stories, + FAQ, + Sponsors, + 2018, button, ]; From 3c1fd03c69ba9f92aafab85dade59bf4dc0ca586 Mon Sep 17 00:00:00 2001 From: Robert Lin Date: Thu, 9 Aug 2018 01:31:26 -0700 Subject: [PATCH 04/16] Animate navbar based on scroll --- web/components/navbar/Navbar.sass | 5 ++ web/components/navbar/index.js | 100 ++++++++++++++++++------------ web/styles/animations.sass | 1 + 3 files changed, 66 insertions(+), 40 deletions(-) diff --git a/web/components/navbar/Navbar.sass b/web/components/navbar/Navbar.sass index 4e91deae..d13e7b32 100644 --- a/web/components/navbar/Navbar.sass +++ b/web/components/navbar/Navbar.sass @@ -1,7 +1,9 @@ nav + z-index: 500 background: $white height: 64px position: fixed + transition: background $transition-time-long, shadow $transition-time-long a text-decoration: none @@ -11,3 +13,6 @@ nav img margin-top: 3px width: 32px + + &.collapsed + background: transparent diff --git a/web/components/navbar/index.js b/web/components/navbar/index.js index 02d08161..fbf5dee6 100644 --- a/web/components/navbar/index.js +++ b/web/components/navbar/index.js @@ -24,49 +24,69 @@ const getButton = (buttonType) => { } }; -const Navbar = ({ displayType, buttonType }) => { - const logoDiv = ( -
-
{getLogo()}
-
- ); - const button = getButton(buttonType); - const links = [ - About, - Stories, - FAQ, - Sponsors, - 2018, - button, - ]; +class Navbar extends React.Component { + constructor(props) { + super(props); + const { displayType, buttonType } = props; + this.state = { displayType, buttonType, collapsed: true }; + } - let linksDiv; - let key = 0; - switch (displayType) { - case DISPLAY_TYPE.ONLY_LOGO: - linksDiv = logoDiv; - break; - case DISPLAY_TYPE.LOGO_AND_BUTTON: - linksDiv =
{button}
; - break; - default: - linksDiv = links.map(l => ( -
- {l} + componentDidMount() { + window.addEventListener('scroll', this.handleScroll, { passive: true }); + } + + componentWillUnmount() { + window.removeEventListener('scroll', this.handleScroll); + } + + handleScroll = () => { + const top = window.pageYOffset || document.documentElement.scrollTop; + this.setState({ collapsed: (top < 64) }); + } + + render() { + const { displayType, buttonType, collapsed } = this.state; + const button = getButton(buttonType); + const links = [ + About, + Stories, + FAQ, + Sponsors, + 2018, + button, + ]; + + let linksDiv; + let key = 0; + switch (displayType) { + case DISPLAY_TYPE.ONLY_LOGO: + break; + case DISPLAY_TYPE.LOGO_AND_BUTTON: + linksDiv =
{button}
; + break; + default: + console.log('generating'); + linksDiv = links.map(l => ( +
+ {l} +
+ )); + } + + return ( + + ); } - return ( - - ); -}; +} Navbar.propTypes = { displayType: PropTypes.symbol, diff --git a/web/styles/animations.sass b/web/styles/animations.sass index 9cd1262f..b6e7bebf 100644 --- a/web/styles/animations.sass +++ b/web/styles/animations.sass @@ -1,4 +1,5 @@ $transition-time: .2s +$transition-time-long: 0.5s // This is a hack to allow transitions of linear-gradient backgrounds. // https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759 From 91164a8067e1f3ca059c6e97668aad4a5d3f3728 Mon Sep 17 00:00:00 2001 From: Robert Lin Date: Thu, 9 Aug 2018 01:31:37 -0700 Subject: [PATCH 05/16] Update demo for scroll animation --- web/components/Main.js | 2 +- web/components/demo/Demo.sass | 1 + web/components/demo/index.js | 2 +- web/containers/navbar/index.js | 3 +++ 4 files changed, 6 insertions(+), 2 deletions(-) diff --git a/web/components/Main.js b/web/components/Main.js index ccb4e5ab..eed59f4b 100644 --- a/web/components/Main.js +++ b/web/components/Main.js @@ -1,5 +1,5 @@ import React from 'react'; -const Main = () => (
HOME PAGE
); +const Main = () => (
HOME PAGE
); export default Main; diff --git a/web/components/demo/Demo.sass b/web/components/demo/Demo.sass index 2a84adde..6f4c322c 100644 --- a/web/components/demo/Demo.sass +++ b/web/components/demo/Demo.sass @@ -1,3 +1,4 @@ div#demo width: 50% margin-left: 25% + height: 90000000px diff --git a/web/components/demo/index.js b/web/components/demo/index.js index 1db72e77..05dadb27 100644 --- a/web/components/demo/index.js +++ b/web/components/demo/index.js @@ -34,7 +34,7 @@ class FrontEndComponents extends React.Component { const { active } = this.state; return ( -
+

Buttons


diff --git a/web/containers/navbar/index.js b/web/containers/navbar/index.js index 1216ec74..389dd593 100644 --- a/web/containers/navbar/index.js +++ b/web/containers/navbar/index.js @@ -16,6 +16,9 @@ const getDisplayType = (location) => { let displayType = DISPLAY_TYPE.ONLY_LOGO; + // For demo only - todo: remove + if (pathname === '/ui_demo') return DISPLAY_TYPE.LOGO_BUTTON_AND_LINKS; + if (isHomePage) { displayType = DISPLAY_TYPE.LOGO_BUTTON_AND_LINKS; } else if (isDashBoardPage) { From e6e6a3b18ee944b9b8513e348ee655c425b8e756 Mon Sep 17 00:00:00 2001 From: Robert Lin Date: Thu, 9 Aug 2018 02:12:05 -0700 Subject: [PATCH 06/16] Remove redundant leading 0 --- web/styles/animations.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/styles/animations.sass b/web/styles/animations.sass index b6e7bebf..87b9b658 100644 --- a/web/styles/animations.sass +++ b/web/styles/animations.sass @@ -1,5 +1,5 @@ $transition-time: .2s -$transition-time-long: 0.5s +$transition-time-long: .5s // This is a hack to allow transitions of linear-gradient backgrounds. // https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759 From b11641b6599cca007707302faa2a8ab1f6c5bb01 Mon Sep 17 00:00:00 2001 From: Robert Lin Date: Thu, 9 Aug 2018 03:40:10 -0700 Subject: [PATCH 07/16] Increase animation time --- web/styles/animations.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/styles/animations.sass b/web/styles/animations.sass index 87b9b658..bd9bac9e 100644 --- a/web/styles/animations.sass +++ b/web/styles/animations.sass @@ -1,5 +1,5 @@ $transition-time: .2s -$transition-time-long: .5s +$transition-time-long: 1.5s // This is a hack to allow transitions of linear-gradient backgrounds. // https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759 From 4765501e3054866f5f2ab12ca3b38063dc596120 Mon Sep 17 00:00:00 2001 From: Robert Lin Date: Thu, 9 Aug 2018 03:40:35 -0700 Subject: [PATCH 08/16] Only show navbar at top or on scrollup - switch between opacity levels --- web/components/navbar/Navbar.sass | 9 +++++--- web/components/navbar/index.js | 34 +++++++++++++++++++++++++------ web/styles/colors.sass | 1 + 3 files changed, 35 insertions(+), 9 deletions(-) diff --git a/web/components/navbar/Navbar.sass b/web/components/navbar/Navbar.sass index d13e7b32..1a85cf48 100644 --- a/web/components/navbar/Navbar.sass +++ b/web/components/navbar/Navbar.sass @@ -1,9 +1,9 @@ nav z-index: 500 - background: $white + background: $transparent-white height: 64px position: fixed - transition: background $transition-time-long, shadow $transition-time-long + transition: background $transition-time-long, shadow $transition-time-long, opacity $transition-time a text-decoration: none @@ -14,5 +14,8 @@ nav margin-top: 3px width: 32px - &.collapsed + &.transparent background: transparent + + &.hide + opacity: 0 diff --git a/web/components/navbar/index.js b/web/components/navbar/index.js index fbf5dee6..c0fae0d1 100644 --- a/web/components/navbar/index.js +++ b/web/components/navbar/index.js @@ -28,7 +28,13 @@ class Navbar extends React.Component { constructor(props) { super(props); const { displayType, buttonType } = props; - this.state = { displayType, buttonType, collapsed: true }; + this.state = { + displayType, + buttonType, + hidden: false, + transparent: true, + lastY: 0, + }; } componentDidMount() { @@ -40,12 +46,27 @@ class Navbar extends React.Component { } handleScroll = () => { - const top = window.pageYOffset || document.documentElement.scrollTop; - this.setState({ collapsed: (top < 64) }); + // Calculate scroll direction + const { lastY } = this.state; + const scrollingDown = (window.scrollY - lastY) >= 0; + + // Calculate position + const offset = window.pageYOffset || document.documentElement.scrollTop; + const atTop = offset < 96; + + // Calculate transparency + const transparent = scrollingDown ? offset < 256 : atTop; + + // Update state + this.setState({ + transparent, + hidden: (!atTop && scrollingDown), + lastY: window.scrollY, + }); } render() { - const { displayType, buttonType, collapsed } = this.state; + const { displayType, buttonType, hidden, transparent } = this.state; const button = getButton(buttonType); const links = [ About, @@ -65,7 +86,6 @@ class Navbar extends React.Component { linksDiv =
{button}
; break; default: - console.log('generating'); linksDiv = links.map(l => (
+