From 8f2a1f65ad23b87d43d76f35fee2f9e8d5bd7f2b Mon Sep 17 00:00:00 2001 From: Yan Sidyakin Date: Tue, 14 Nov 2023 00:21:52 -0800 Subject: [PATCH 1/4] Add nwHacks apps closed banner --- components/Banner.js | 40 ++++++++++++++++++++++++++++++++++++ components/NavBar.js | 48 ++++++++++++++++++++++++-------------------- pages/_app.js | 1 + pages/index.js | 2 ++ 4 files changed, 69 insertions(+), 22 deletions(-) create mode 100644 components/Banner.js diff --git a/components/Banner.js b/components/Banner.js new file mode 100644 index 0000000..1a2d7e8 --- /dev/null +++ b/components/Banner.js @@ -0,0 +1,40 @@ +import styled from 'styled-components' + +const BannerContainer = styled.div` + background: linear-gradient(92.58deg, #0defe1 0%, #78ff96 100%); + position: absolute; + z-index: 1; + height: 134px; + width: 100vw; + display: flex; + flex-direction: column; + justify-content: center; + align-items: left; + padding: 20px 64px; + gap: 10px; + color: #2c2543; + font-size: 0.8rem; + @media (min-width: 768px) { + padding-right: 100px; + font-size: 20px; + } +` + +const BannerHeader = styled.div` + font-weight: 700; +` + +const BannerText = styled.div` + font-weight: 600; +` + +const Banner = () => ( + + IMPORTANT UPDATE: + + nwHacks 2024 is not currently accepting applications. The application form will open on November 20th, 2023. + + +) + +export default Banner diff --git a/components/NavBar.js b/components/NavBar.js index 3ab4b1d..c440367 100644 --- a/components/NavBar.js +++ b/components/NavBar.js @@ -1,12 +1,12 @@ import styled from 'styled-components'; import { useState, useEffect } from 'react'; -import { SCREEN_BREAKPOINTS } from '../pages/_app'; +import { SCREEN_BREAKPOINTS, BANNER_OFFSET } from '../pages/_app'; import fireDb from '../utilities/firebase'; const NavBarContainer = styled.nav` - position: fixed; - top: 0; + position: ${p => (p.stayAtTop ? 'absolute' : 'fixed')}; + top: ${p => (p.stayAtTop ? BANNER_OFFSET : '0')}px; left: 50%; transform: translate(-50%, 0); z-index: 3; @@ -222,6 +222,7 @@ const NavBar = () => { const [showDropdown, setShowDropdown] = useState(false); const [visibility, setVisibility] = useState('visible'); const [opacity, setOpacity] = useState('1'); + const [stayAtTop, setStayAtTop] = useState(true); const [config, setConfig] = useState(null); @@ -230,6 +231,27 @@ const NavBar = () => { setConfig(wwwConfig); }; + const handleScroll = () => { + let lastScroll = 0 + return () => { + const scroll = window.pageYOffset || document.documentElement.scrollTop + if (scroll <= BANNER_OFFSET) { + setStayAtTop(true) + setVisibility('visible') + setOpacity('1') + } else if (scroll > lastScroll) { + setStayAtTop(false) + setVisibility('hidden') + setOpacity('0') + setStayAtTop(0) + } else { + setVisibility('visible') + setOpacity('1') + } + lastScroll = scroll + } + } + useEffect(() => { window.addEventListener('scroll', handleScroll()); window.addEventListener('resize', handleResize); @@ -246,24 +268,6 @@ const NavBar = () => { } }; - const handleScroll = () => { - var lastScroll = 0; - return () => { - const scroll = window.pageYOffset || document.documentElement.scrollTop; - if (scroll <= 0) { - setVisibility('visible'); - setOpacity('1'); - } else if (scroll > lastScroll) { - setVisibility('hidden'); - setOpacity('0'); - } else { - setVisibility('visible'); - setOpacity('1'); - } - lastScroll = scroll; - }; - }; - if (showDropdown) { return ( <> @@ -306,7 +310,7 @@ const NavBar = () => { } return ( - + + Date: Tue, 14 Nov 2023 09:26:42 -0800 Subject: [PATCH 2/4] Set width to 100% to fix side scroll --- components/Banner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Banner.js b/components/Banner.js index 1a2d7e8..3a9f4d8 100644 --- a/components/Banner.js +++ b/components/Banner.js @@ -5,7 +5,7 @@ const BannerContainer = styled.div` position: absolute; z-index: 1; height: 134px; - width: 100vw; + width: 100%; display: flex; flex-direction: column; justify-content: center; From c81b9d6503ec6ff5bf48c7228b089cde1e4d88b9 Mon Sep 17 00:00:00 2001 From: Yan Sidyakin Date: Tue, 14 Nov 2023 12:18:22 -0800 Subject: [PATCH 3/4] Fix overlap on mobile --- components/Hero.js | 1 + pages/index.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/components/Hero.js b/components/Hero.js index 6f25db5..fd91a06 100644 --- a/components/Hero.js +++ b/components/Hero.js @@ -15,6 +15,7 @@ const HeroContainer = styled.div` background-repeat: no-repeat; background-position: top; background-size: contain; + padding-top: 134px; `; const HeroTextContainer = styled.div` diff --git a/pages/index.js b/pages/index.js index 0ac8ada..c8d080b 100644 --- a/pages/index.js +++ b/pages/index.js @@ -105,8 +105,8 @@ export default function Home() { - + Date: Tue, 14 Nov 2023 13:10:41 -0800 Subject: [PATCH 4/4] Push hero down --- components/Hero.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Hero.js b/components/Hero.js index fd91a06..7bf3320 100644 --- a/components/Hero.js +++ b/components/Hero.js @@ -13,7 +13,7 @@ const HeroContainer = styled.div` padding-bottom: 69%; background: url(/assets/hero_illustration.svg); background-repeat: no-repeat; - background-position: top; + background-position: center; background-size: contain; padding-top: 134px; `;