From bcf3fb89b3df1e218c24d48fe598ab8d75ebecf7 Mon Sep 17 00:00:00 2001 From: Brian Sims Date: Thu, 13 Jun 2024 18:14:28 -0700 Subject: [PATCH 01/12] Added Button component, button styles and href to contact form button --- src/app/about/aboutSectionOpportunities.jsx | 4 +- src/app/contact/contactSectionMission.jsx | 1 + src/app/home/homeSectionDonate.jsx | 6 +- src/app/home/homeSectionLandingImage.jsx | 6 +- src/app/home/homeSectionProjects.jsx | 10 ++-- src/app/home/homeSectionServices.jsx | 10 ++-- .../[project]/singleProjectsContribute.jsx | 10 ++-- .../[project]/singleProjectsSectionStart.jsx | 16 ++---- src/app/projects/projectCard.jsx | 10 ++-- src/components/Buttons/Button.jsx | 10 ++++ src/components/Buttons/index.js | 3 + styles/components/button.scss | 52 ++++++++++++++++++ styles/main.scss | 1 + styles/pages/home.scss | 27 --------- styles/pages/projects.scss | 55 ------------------- 15 files changed, 98 insertions(+), 123 deletions(-) create mode 100644 src/components/Buttons/Button.jsx create mode 100644 src/components/Buttons/index.js create mode 100644 styles/components/button.scss diff --git a/src/app/about/aboutSectionOpportunities.jsx b/src/app/about/aboutSectionOpportunities.jsx index b4e42894..ee60db4d 100644 --- a/src/app/about/aboutSectionOpportunities.jsx +++ b/src/app/about/aboutSectionOpportunities.jsx @@ -28,7 +28,7 @@ export default function AboutSectionOpportunities({sectionType}) {

Not a volunteer yet?
- Get Started + Get Started

@@ -86,7 +86,7 @@ export default function AboutSectionOpportunities({sectionType}) {

Not a volunteer yet?
- Get Started + Get Started

diff --git a/src/app/contact/contactSectionMission.jsx b/src/app/contact/contactSectionMission.jsx index 993711b4..b1b87c8d 100644 --- a/src/app/contact/contactSectionMission.jsx +++ b/src/app/contact/contactSectionMission.jsx @@ -213,6 +213,7 @@ export default function ContactSectionMission({ sectionType }) { /> - - + + ) +} + +export default Button \ No newline at end of file diff --git a/src/components/Buttons/index.js b/src/components/Buttons/index.js new file mode 100644 index 00000000..ce3fe527 --- /dev/null +++ b/src/components/Buttons/index.js @@ -0,0 +1,3 @@ +import Button from "./Button"; + +export default Button \ No newline at end of file diff --git a/styles/components/button.scss b/styles/components/button.scss new file mode 100644 index 00000000..43fccb7d --- /dev/null +++ b/styles/components/button.scss @@ -0,0 +1,52 @@ +@import "../abstracts/variables.scss"; +@import "../abstracts/mixins"; + +.btn { + cursor: pointer; + border-radius: 6px; + padding: 16px 24px; + text-decoration: none; + width: fit-content; + height: fit-content; + white-space: nowrap; + + @include button-regular; +} + +.btn-gold { + background: $secondary-500; + color: $neutral-900; + @include light-button-transition; +} + +.btn-blue { + color: $secondary-50; + background-color: $primary-500; + border: solid $primary-500 1px; + + @include button-transition($vivid-blue, white); +} + +.btn-alt-light { + color: $secondary-50; + background-color: transparent; + border: solid $secondary-500 1px; + + @include dark-button-transition; +} + +.btn-alt-gold { + color: $secondary-500; + background-color: transparent; + border: solid $secondary-500 1px; + + @include dark-button-transition; +} + +.btn-alt-blue { + color: $primary-500; + background-color: transparent; + border: solid $primary-500 1px; + + @include dark-button-transition; +} diff --git a/styles/main.scss b/styles/main.scss index 00bba989..4e91c529 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -11,4 +11,5 @@ @import "styles/components/extended-menu.scss"; @import "styles/components/navigation-bar.scss"; @import "styles/components/footer.scss"; +@import "styles/components/button.scss"; @import "styles/pages/projects.scss"; \ No newline at end of file diff --git a/styles/pages/home.scss b/styles/pages/home.scss index 9ab822c1..4b724a8a 100644 --- a/styles/pages/home.scss +++ b/styles/pages/home.scss @@ -78,33 +78,6 @@ Home page layout. gap: 20px; } -.home-button { - color: $secondary-50; - background-color: transparent; - cursor: pointer; - - border: solid $secondary-500 1px; - border-radius: 6px; - padding: 16px 24px; - text-decoration: none; - width: fit-content; - - @include button-regular; - @include dark-button-transition; -} - -.home-button-alt { - /* alternative colors */ - background-color: $secondary-500; - color: $neutral-900; - - @include light-button-transition; -} - -.home-button-numbered { - color: $secondary-500; -} - .home-section-heading-underline::after { content: ""; position: absolute; diff --git a/styles/pages/projects.scss b/styles/pages/projects.scss index 64a9ad64..6c22d956 100644 --- a/styles/pages/projects.scss +++ b/styles/pages/projects.scss @@ -497,39 +497,6 @@ details p { gap: 20px; } -.project-card-button-dark { - color: $secondary-50; - background-color: $primary-500; - cursor: pointer; - - border: solid $primary-500 1px; - border-radius: 6px; - padding: 16px 24px; - text-decoration: none; - width: fit-content; - height: fit-content; - white-space: nowrap; - - @include button-regular; - @include button-transition($vivid-blue, white); -} - -.project-card-button-light { - color: $primary-500; - background-color: transparent; - cursor: pointer; - border: solid $primary-500 1px; - border-radius: 6px; - padding: 16px 24px; - text-decoration: none; - width: fit-content; - height: fit-content; - white-space: nowrap; - - @include button-regular; - @include dark-button-transition; -} - .project-heading-section { color: $neutral-300; @include h1-section; @@ -646,28 +613,6 @@ details p { background: $neutral-400; } -.project-button { - color: $secondary-50; - background-color: transparent; - cursor: pointer; - - border: solid $secondary-500 1px; - border-radius: 6px; - padding: 16px 24px; - text-decoration: none; - width: fit-content; - - @include button-regular; - @include dark-button-transition; -} - -.project-button-alt { - background-color: $secondary-500; - color: $neutral-900; - - @include light-button-transition; -} - /* SingleProjectsSectionStart */ .project-section-start { From 9ae7db955481283bec637f06918e7390d93d7a5d Mon Sep 17 00:00:00 2001 From: Brian Sims Date: Wed, 10 Jul 2024 13:13:20 -0700 Subject: [PATCH 02/12] Added button.scss to main.scss --- styles/main.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/main.scss b/styles/main.scss index 1ac5b2c3..24bc7b89 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -13,5 +13,6 @@ @import "styles/components/navigation-bar.scss"; @import "styles/components/footer.scss"; @import "styles/components/page-section.scss"; +@import "styles/components/button.scss"; @import "styles/layout/section.scss"; @import "styles/layout/header.scss"; \ No newline at end of file From 6739a9c6ab9d2a62a53c49e8e6d73723d504185b Mon Sep 17 00:00:00 2001 From: Brian Sims Date: Wed, 10 Jul 2024 13:19:08 -0700 Subject: [PATCH 03/12] Replaced Navbar Home Link href '/public' with '/' --- src/components/app/AppNavbar/AppNavbar.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/app/AppNavbar/AppNavbar.jsx b/src/components/app/AppNavbar/AppNavbar.jsx index 9b44de6d..89cfb988 100644 --- a/src/components/app/AppNavbar/AppNavbar.jsx +++ b/src/components/app/AppNavbar/AppNavbar.jsx @@ -60,7 +60,7 @@ export default function AppNavbar() {
- + Open Sacramento logo @@ -69,7 +69,7 @@ export default function AppNavbar() {
  • - Home + Home
  • About From 9a7934cc1b0169595dc48c3d10cb9e5f05f90423 Mon Sep 17 00:00:00 2001 From: Brian Sims Date: Wed, 10 Jul 2024 19:13:19 -0700 Subject: [PATCH 04/12] Added href to project form link --- src/app/pitch/pitchSectionInstructions.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pitch/pitchSectionInstructions.jsx b/src/app/pitch/pitchSectionInstructions.jsx index ddddf400..e6686f1e 100644 --- a/src/app/pitch/pitchSectionInstructions.jsx +++ b/src/app/pitch/pitchSectionInstructions.jsx @@ -57,7 +57,7 @@ export default function PitchSectionInstructions({sectionType}) {

    Complete Project Form

    - Fill out a Project Form to formally propose your idea. + Fill out a Project Form to formally propose your idea. After submitting, please allow 1-2 weeks for our team to review your project proposal. We'll carefully assess its alignment with our mission and guidelines. During this time, someone from our team will reach out to discuss your project further. From 6c460a5868264db30d24f50f410bba120adfa5dc Mon Sep 17 00:00:00 2001 From: Brian Sims Date: Wed, 24 Jul 2024 10:06:34 -0700 Subject: [PATCH 05/12] Fixed navigation to single project page to point to top of page --- src/app/projects/[project]/singleProjectsSectionStart.jsx | 2 +- src/app/projects/projectsCardsContainer.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/projects/[project]/singleProjectsSectionStart.jsx b/src/app/projects/[project]/singleProjectsSectionStart.jsx index a4793cc6..c86916e9 100644 --- a/src/app/projects/[project]/singleProjectsSectionStart.jsx +++ b/src/app/projects/[project]/singleProjectsSectionStart.jsx @@ -8,7 +8,7 @@ import Button from "@/components/Buttons"; */ export default function SingleProjectsSectionStart({ sectionType, data }) { return ( -

    +
    Date: Wed, 24 Jul 2024 13:10:28 -0700 Subject: [PATCH 06/12] Added sticky navbar styling to project-link-container in single project page, as well as scroll-margin-top to sections for clean in page navigation. --- styles/pages/projects.scss | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/styles/pages/projects.scss b/styles/pages/projects.scss index 6c22d956..0c5058b2 100644 --- a/styles/pages/projects.scss +++ b/styles/pages/projects.scss @@ -670,6 +670,7 @@ details p { /* SingleProjectsLinks */ .project-link-container { + background: $neutral-900; display: flex; flex-direction: column; gap: 24px; @@ -678,6 +679,9 @@ details p { padding: 16px 0; @media (min-width: $screen-xl) { + position: sticky; + top: 84px; + z-index: 5; padding: 16px 20px; flex-direction: row; gap: 46px; @@ -697,6 +701,7 @@ details p { @media (min-width: $screen-xl) { padding-top: 58px; + scroll-margin-top: 32px; } } @@ -721,6 +726,10 @@ details p { .project-screenshots-container { padding: 20px 0 42px 0; + + @media (min-width: $screen-xl) { + scroll-margin-top: 70px; + } } .project-screenshots-container .project-section-paragraph { @@ -763,8 +772,11 @@ details p { /* SingleProjectsRoadmap */ .project-roadmap-container { - margin-top: 20px; - padding: 48px 0 20px 0; + padding: 68px 0 20px 0; + + @media (min-width: $screen-xl) { + scroll-margin-top: 22px; + } } .project-roadmap-container .project-section-paragraph { @@ -850,6 +862,7 @@ details p { @media (min-width: $screen-xl) { padding: 54px 0 32px 0; + scroll-margin-top: 36px; } } @@ -882,6 +895,7 @@ details p { @media (min-width: $screen-xl) { padding: 48px 0; + scroll-margin-top: 42px; } } @@ -902,7 +916,7 @@ details p { @media (min-width: $screen-xl) { padding: 48px 0; - grid-template-columns: 2fr 1fr; + scroll-margin-top: 42px; } } From d7427123db35dff7a442a1d62f2cc9ac9bfafd17 Mon Sep 17 00:00:00 2001 From: Brian Sims Date: Wed, 24 Jul 2024 17:06:31 -0700 Subject: [PATCH 07/12] Created Slider component and added it to single project page screenshots section mobile version to match figma design. --- .../[project]/singleProjectsScreenshots.jsx | 7 +++- src/components/ui/Slider.jsx | 42 +++++++++++++++++++ src/components/ui/index.js | 1 + styles/abstracts/variables.scss | 2 + styles/pages/projects.scss | 31 +++++++++++--- 5 files changed, 76 insertions(+), 7 deletions(-) create mode 100644 src/components/ui/Slider.jsx create mode 100644 src/components/ui/index.js diff --git a/src/app/projects/[project]/singleProjectsScreenshots.jsx b/src/app/projects/[project]/singleProjectsScreenshots.jsx index 7cfd2412..a8e01372 100644 --- a/src/app/projects/[project]/singleProjectsScreenshots.jsx +++ b/src/app/projects/[project]/singleProjectsScreenshots.jsx @@ -1,13 +1,15 @@ +import { Slider } from "@/components/ui"; + export default function SingleProjectsScreenshots({ sectionType, data }) { let shownImages = data.meta.screenshots.map((screenshot) => (
    )); for (let i = shownImages.length; i < 6; i++) { - shownImages.push(
    ); + shownImages.push(
    ); } @@ -23,6 +25,7 @@ export default function SingleProjectsScreenshots({ sectionType, data }) {
    {shownImages}
    + {shownImages}
    ); } diff --git a/src/components/ui/Slider.jsx b/src/components/ui/Slider.jsx new file mode 100644 index 00000000..ce2a855f --- /dev/null +++ b/src/components/ui/Slider.jsx @@ -0,0 +1,42 @@ +import { useState } from 'react'; +import 'keen-slider/keen-slider.min.css'; +import { useKeenSlider } from 'keen-slider/react'; // import from 'keen-slider/react.es' for to get an ES module + +export default function Slider ({containerClass, children}) { + const [currentSlide, setCurrentSlide] = useState(0); + const [loaded, setLoaded] = useState(false); + const [sliderRef, instanceRef] = useKeenSlider({ + initial: 0, + slideChanged(slider) { + setCurrentSlide(slider.track.details.rel) + }, + created() { + setLoaded(true) + }, + }); + + return ( +
    +
    + {children} +
    + {loaded && instanceRef.current && ( +
    + {[ + ...Array(instanceRef.current.track.details.slides.length).keys(), + ].map((idx) => { + return ( + + ) + })} +
    + )} +
    + ) +} \ No newline at end of file diff --git a/src/components/ui/index.js b/src/components/ui/index.js new file mode 100644 index 00000000..b7e0a82e --- /dev/null +++ b/src/components/ui/index.js @@ -0,0 +1 @@ +export { default as Slider } from './Slider'; \ No newline at end of file diff --git a/styles/abstracts/variables.scss b/styles/abstracts/variables.scss index 4f1f9198..6bf8e68c 100644 --- a/styles/abstracts/variables.scss +++ b/styles/abstracts/variables.scss @@ -9,9 +9,11 @@ $secondary-200: #FFF3CD; $neutral-300: #a9aab1; $secondary-300: #ffe69c; $neutral-400: #a9aab1; +$primary-400: #5C85FF; $neutral-500: #72727e; $primary-500: #112971; $secondary-500: #ffc107; +$primary-600: #002DB3; $neutral-700: #797a7b; $neutral-800: #1d1d20; $neutral-900: #060718; diff --git a/styles/pages/projects.scss b/styles/pages/projects.scss index 0c5058b2..e8678710 100644 --- a/styles/pages/projects.scss +++ b/styles/pages/projects.scss @@ -725,7 +725,11 @@ details p { // SingleProjectsScreenshots .project-screenshots-container { - padding: 20px 0 42px 0; + padding: 20px 0 34px 0; + + @media (min-width: $screen-md) { + padding: 20px 0 42px 0; + } @media (min-width: $screen-xl) { scroll-margin-top: 70px; @@ -737,12 +741,10 @@ details p { } .project-screenshots-images-container { - display: grid; - grid-template-columns: 1fr; - column-gap: 24px; - row-gap: 32px; + display: none; @media (min-width: $screen-md) { + display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 32px; @@ -753,6 +755,25 @@ details p { } } +.project-screenshots-slider-container { + .project-screenshot, .project-blank-screenshot { + border: 1px solid $neutral-700; + border-radius: 8px; + } + + .dot { + background: $primary-600; + } + + .dot.active { + background: $primary-400; + } + + @media (min-width: $screen-md) { + display: none; + } +} + .project-screenshot { width: 100%; padding-bottom: 56%; From 846217342b8edfe0c9bedea1d707bdcf4253cadb Mon Sep 17 00:00:00 2001 From: Brian Sims Date: Wed, 24 Jul 2024 18:09:06 -0700 Subject: [PATCH 08/12] Replaced slider in homeSectionProjects with Slider component and moved Slider related scss to slider.scss --- src/app/home/homeSectionProjects.jsx | 47 +++++----------------------- src/components/ui/Slider.jsx | 22 ++++++------- styles/components/slider.scss | 47 ++++++++++++++++++++++++++++ styles/main.scss | 1 + styles/pages/home.scss | 29 ----------------- styles/pages/projects.scss | 19 ----------- 6 files changed, 66 insertions(+), 99 deletions(-) create mode 100644 styles/components/slider.scss diff --git a/src/app/home/homeSectionProjects.jsx b/src/app/home/homeSectionProjects.jsx index 0e69f570..9052b8a6 100644 --- a/src/app/home/homeSectionProjects.jsx +++ b/src/app/home/homeSectionProjects.jsx @@ -1,27 +1,14 @@ 'use client' -import 'keen-slider/keen-slider.min.css' -import {useKeenSlider} from 'keen-slider/react' -import { useState } from 'react'; +import { Slider } from '@/components/ui'; import Button from '@/components/Buttons'; + /** * Home projects section. * @returns {JSX.Element} */ export default function HomeSectionProjects({sectionType}) { - const [currentSlide, setCurrentSlide] = useState(0) - const [loaded, setLoaded] = useState(false) - const [sliderRef, instanceRef] = useKeenSlider({ - initial: 0, - slideChanged(slider) { - setCurrentSlide(slider.track.details.rel) - }, - created() { - setLoaded(true) - }, - }) - return (
    @@ -40,9 +27,8 @@ export default function HomeSectionProjects({sectionType}) {
    -
    -
    -
    + +

    TrashAI

    @@ -80,28 +66,9 @@ export default function HomeSectionProjects({sectionType}) { alt="Open Data Day" className="home-section-project-image" /> -

    -
    -
    - {loaded && instanceRef.current && ( -
    - {[ - ...Array(instanceRef.current.track.details.slides.length).keys(), - ].map((idx) => { - return ( - - ) - })} -
    - )} +
    +
    ) -} - +} \ No newline at end of file diff --git a/src/components/ui/Slider.jsx b/src/components/ui/Slider.jsx index ce2a855f..cd4d99f2 100644 --- a/src/components/ui/Slider.jsx +++ b/src/components/ui/Slider.jsx @@ -3,17 +3,17 @@ import 'keen-slider/keen-slider.min.css'; import { useKeenSlider } from 'keen-slider/react'; // import from 'keen-slider/react.es' for to get an ES module export default function Slider ({containerClass, children}) { - const [currentSlide, setCurrentSlide] = useState(0); - const [loaded, setLoaded] = useState(false); - const [sliderRef, instanceRef] = useKeenSlider({ - initial: 0, - slideChanged(slider) { - setCurrentSlide(slider.track.details.rel) - }, - created() { - setLoaded(true) - }, - }); + const [currentSlide, setCurrentSlide] = useState(0); + const [loaded, setLoaded] = useState(false); + const [sliderRef, instanceRef] = useKeenSlider({ + initial: 0, + slideChanged(slider) { + setCurrentSlide(slider.track.details.rel) + }, + created() { + setLoaded(true) + }, + }); return (
    diff --git a/styles/components/slider.scss b/styles/components/slider.scss new file mode 100644 index 00000000..613296c2 --- /dev/null +++ b/styles/components/slider.scss @@ -0,0 +1,47 @@ +.navigation-wrapper { + position: relative; +} + +.project-screenshots-slider-container { + .project-screenshot, .project-blank-screenshot { + border: 1px solid $neutral-700; + border-radius: 8px; + } + + .dot { + background: $primary-600; + } + + .dot.active { + background: $primary-400; + } + + @media (min-width: $screen-md) { + display: none; + } +} + +.dots { + display: flex; + padding: 10px 0; + justify-content: center; +} + +.dot { + border: none; + width: 10px; + height: 10px; + background: $secondary-50; + border-radius: 50%; + margin: 0 5px; + padding: 5px; + cursor: pointer; +} + +.dot:focus { + outline: none; +} + +.dot.active { + background: $secondary-500; +} \ No newline at end of file diff --git a/styles/main.scss b/styles/main.scss index fcaa2e6e..22783326 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -14,6 +14,7 @@ @import "styles/components/footer.scss"; @import "styles/components/instructions.scss"; @import "styles/components/page-section.scss"; +@import "styles/components/slider.scss"; @import "styles/components/button.scss"; @import "styles/layout/section.scss"; @import "styles/layout/header.scss"; \ No newline at end of file diff --git a/styles/pages/home.scss b/styles/pages/home.scss index 4b724a8a..6b520429 100644 --- a/styles/pages/home.scss +++ b/styles/pages/home.scss @@ -279,35 +279,6 @@ Home page layout. } } -.navigation-wrapper { - position: relative; -} - -.dots { - display: flex; - padding: 10px 0; - justify-content: center; -} - -.dot { - border: none; - width: 10px; - height: 10px; - background: $secondary-50; - border-radius: 50%; - margin: 0 5px; - padding: 5px; - cursor: pointer; -} - -.dot:focus { - outline: none; -} - -.dot.active { - background: $secondary-500; -} - .partnership-section { padding: 64px 80px; display: flex; diff --git a/styles/pages/projects.scss b/styles/pages/projects.scss index e8678710..d4343551 100644 --- a/styles/pages/projects.scss +++ b/styles/pages/projects.scss @@ -755,25 +755,6 @@ details p { } } -.project-screenshots-slider-container { - .project-screenshot, .project-blank-screenshot { - border: 1px solid $neutral-700; - border-radius: 8px; - } - - .dot { - background: $primary-600; - } - - .dot.active { - background: $primary-400; - } - - @media (min-width: $screen-md) { - display: none; - } -} - .project-screenshot { width: 100%; padding-bottom: 56%; From ab6cdec84db1921c838c7fbaa80c88d455b61f3f Mon Sep 17 00:00:00 2001 From: Brian Sims Date: Mon, 29 Jul 2024 20:30:19 -0700 Subject: [PATCH 09/12] Fixed home href in mobile-nav-link and removed duplicate AppNavbar directory in components --- src/components/AppNavbar/AppNavbar.jsx | 113 ------------------ .../AppNavbar/ExtendedNavbarMenu.jsx | 82 ------------- .../app/AppNavbar/ExtendedNavbarMenu.jsx | 2 +- 3 files changed, 1 insertion(+), 196 deletions(-) delete mode 100644 src/components/AppNavbar/AppNavbar.jsx delete mode 100644 src/components/AppNavbar/ExtendedNavbarMenu.jsx diff --git a/src/components/AppNavbar/AppNavbar.jsx b/src/components/AppNavbar/AppNavbar.jsx deleted file mode 100644 index 11311837..00000000 --- a/src/components/AppNavbar/AppNavbar.jsx +++ /dev/null @@ -1,113 +0,0 @@ -'use client' - -import {useEffect, useState} from 'react' -import Link from 'next/link' -import {usePathname} from 'next/navigation' -import ExtendedNavbarMenu from './ExtendedNavbarMenu' - -/** - * Set toolbar opacity. Based on the scroll y-axis. - * @param {number} currentScrollHeight - * @returns {number} opacity Ranges from 0 to 1. - */ -function setOpacity(currentScrollHeight) { - return Math.max(Math.min(currentScrollHeight / 500, 1), .15) -} - -/** - * Set the navbar to fade on scroll. - * Note: This method, its arguments, and the fact that you need to return it in use effect, is confusing and could be refactored. It is extracted as a function so that it can be reused if any other routes need a fading navbar. - * @param setFadeLayout - * @param setCurrentScrollHeight - * @returns {function(): void} Make sure to return a function removing the event listener in use effect. I don't know why. - */ -function registerNavbarFadeLayout(setFadeLayout, setCurrentScrollHeight) { - setFadeLayout(true) - const onScroll = () => { - setCurrentScrollHeight(window.scrollY) - } - window.removeEventListener('scroll', onScroll) - window.addEventListener('scroll', onScroll, {passive: true}) - return () => window.removeEventListener('scroll', onScroll) -} - -/** - * Default application navigation bar. Links animate on page change. Extended menu that shows more text underneath the navbar. - * - Desktop: Multiple navigation links in the center. Link on the right side to show extended menu. - * - Mobile: All menu items are in collapsable menu. - * @returns {JSX.Element} - */ -export default function AppNavbar() { - const [extendedMenuVisible, showExtendedMenu] = useState(false) - const [fadeLayout, setFadeLayout] = useState(false) - const [currentScrollHeight, setCurrentScrollHeight] = useState(0) - const backgroundOpacity = setOpacity(currentScrollHeight) - const websiteURL = usePathname() - useEffect(() => { - showExtendedMenu(false) - if (currentScrollHeight === 0) setCurrentScrollHeight(window.scrollY) - switch (websiteURL) { - case '/': - return registerNavbarFadeLayout(setFadeLayout, setCurrentScrollHeight) - default: - setFadeLayout(false) - } - }, [websiteURL]) - return ( -
    - -
    - ) -} \ No newline at end of file diff --git a/src/components/AppNavbar/ExtendedNavbarMenu.jsx b/src/components/AppNavbar/ExtendedNavbarMenu.jsx deleted file mode 100644 index f4e57823..00000000 --- a/src/components/AppNavbar/ExtendedNavbarMenu.jsx +++ /dev/null @@ -1,82 +0,0 @@ -import React, {useState} from 'react' -import Link from 'next/link' - -/** - * Dropdown menu for navbar. - * @returns {JSX.Element} - */ -const ExtendedNavbarMenu = (visible) => { - function hide() { - visible = false - } - - const [mobileNavPosition, toggleMobileNavPosition] = useState(false) - - return ( -
    -
    -
    - Home - About - Contact - Donate -
    - toggleMobileNavPosition(!mobileNavPosition)}>Get Involved -
    -
    -
    - Get Started - Projects - Pitch a Project - Meetup - FAQs -
    - toggleMobileNavPosition(!mobileNavPosition)}>Back -
    -
    - -
    -
    -
    -
    Get Started
    -

    - Get started today and volunteer with us to drive positive change through technology, making a meaningful - impact in your community! -

    - Get Started -
    -
    -
    Projects
    -

    - Explore our projects and discover how you can contribute your skills to drive innovation and create positive - change. -

    - See Projects -
    -
    -
    Pitch a Project
    -

    - Get the latest information and guidance for anyone who want to propose new projects or ideas to the Open - Sacramento community. -

    - Pitch a Project -
    -
    -

    - Join us for our weekly meetings on meetup. -

    -

    - For any questions, visit our FAQs. -

    -
    -
    -
    - ) -} - -export default ExtendedNavbarMenu \ No newline at end of file diff --git a/src/components/app/AppNavbar/ExtendedNavbarMenu.jsx b/src/components/app/AppNavbar/ExtendedNavbarMenu.jsx index 25c41062..f4e57823 100644 --- a/src/components/app/AppNavbar/ExtendedNavbarMenu.jsx +++ b/src/components/app/AppNavbar/ExtendedNavbarMenu.jsx @@ -16,7 +16,7 @@ const ExtendedNavbarMenu = (visible) => {
    - Home + Home About Contact Donate From 97f20ad02fd5bcc2fd844518261cbcb20cdba471 Mon Sep 17 00:00:00 2001 From: Brian Sims Date: Mon, 29 Jul 2024 23:15:33 -0700 Subject: [PATCH 10/12] Fixed Partnerships section on Home page mobile styling --- src/app/home/homeSectionPartnerships.jsx | 6 +----- styles/pages/home.scss | 21 +++++++-------------- 2 files changed, 8 insertions(+), 19 deletions(-) diff --git a/src/app/home/homeSectionPartnerships.jsx b/src/app/home/homeSectionPartnerships.jsx index c9d5586a..2fd82b4e 100644 --- a/src/app/home/homeSectionPartnerships.jsx +++ b/src/app/home/homeSectionPartnerships.jsx @@ -8,12 +8,10 @@ import Link from "next/link"; export default function HomeSectionPartnership({sectionType}) { return (
    -

    Our Collaborations and Partnerships

    -
    -

    We have had the privilege of working with a +

    We have had the privilege of working with a diverse array of companies, organizations, and government entities, some of which are showcased below.

    @@ -39,8 +37,6 @@ export default function HomeSectionPartnership({sectionType}) { alt="DBA"/>
    -
    -
    ); } \ No newline at end of file diff --git a/styles/pages/home.scss b/styles/pages/home.scss index 6b520429..6c52f952 100644 --- a/styles/pages/home.scss +++ b/styles/pages/home.scss @@ -282,23 +282,16 @@ Home page layout. .partnership-section { padding: 64px 80px; display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - gap: 60px; + flex-direction: column; + align-items: flex-start; + gap: 40px; @media (max-width: $screen-lg) { - flex-direction: column; padding: 64px 40px; + align-items: center; } } -.partnership-section-paragraph-container { - width: 100%; - display: flex; - flex-direction: column; -} - .home-section-heading-underline-partnership::after { content: ""; position: absolute; @@ -361,17 +354,17 @@ Home page layout. } .home-projects-section-partnerships { - padding: 64px 32px 64px 32px; + padding-left: 32px; display: flex; flex-direction: row; align-items: center; align-content: flex-start; gap: 48px; - @media (max-width: $screen-md) { + @media (max-width: $screen-lg) { flex-direction: column; justify-content: center; - padding: 48px 40px; + padding: 0; gap: 60px; } } From c1705044a1c1279f459eeb21d30eb70311753568 Mon Sep 17 00:00:00 2001 From: natebass Date: Sat, 3 Aug 2024 16:25:24 -0700 Subject: [PATCH 11/12] Remove unused files for get started and pitch page. --- src/app/get-started/getStarted.jsx | 24 ---- .../getStartedSectionInstructions.jsx | 70 ----------- .../get-started/getStartedSectionLanding.jsx | 27 ----- src/app/pitch/pitch.jsx | 24 ---- src/app/pitch/pitchSectionInstructions.jsx | 112 ------------------ src/app/pitch/pitchSectionLanding.jsx | 23 ---- 6 files changed, 280 deletions(-) delete mode 100644 src/app/get-started/getStarted.jsx delete mode 100644 src/app/get-started/getStartedSectionInstructions.jsx delete mode 100644 src/app/get-started/getStartedSectionLanding.jsx delete mode 100644 src/app/pitch/pitch.jsx delete mode 100644 src/app/pitch/pitchSectionInstructions.jsx delete mode 100644 src/app/pitch/pitchSectionLanding.jsx diff --git a/src/app/get-started/getStarted.jsx b/src/app/get-started/getStarted.jsx deleted file mode 100644 index 8f9efe79..00000000 --- a/src/app/get-started/getStarted.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import GetStartedSectionLanding from './getStartedSectionLanding' -import GetStartedSectionInstructions from './getStartedSectionInstructions' - -/** - * Section type. Displays light or dark themes. - * @type {{light: string, dark: string}} - */ -export const SectionType = { - light: 'light', - dark: 'dark', -} - -/** - * Get started page. - * @returns {JSX.Element} - */ -export default function GetStarted() { - return ( -
    - - -
    - ) -} \ No newline at end of file diff --git a/src/app/get-started/getStartedSectionInstructions.jsx b/src/app/get-started/getStartedSectionInstructions.jsx deleted file mode 100644 index 1a48c3f4..00000000 --- a/src/app/get-started/getStartedSectionInstructions.jsx +++ /dev/null @@ -1,70 +0,0 @@ -import instructions from './instructions.json' -import Link from 'next/link' - -/** - * Get started instructions section. - * @returns {JSX.Element} - */ -export default function GetStartedSectionInstructions({sectionType}) { - return ( -
    -
    -
    -
    -

    GETTING STARTED

    -

    - Steps to Volunteer -

    -
    -

    - Discover how you can become a valued volunteer at Open Sacramento. - Follow these simple steps to join our community of technologists, developers, - and civic-minded individuals dedicated to driving positive change through technology and collaboration. -

    -
    - -
    - {instructions.map((item, index) => ( -
    - {`Step -
    -

    {item.title}

    -

    - {item.body} {item.id === 4 && ( - Project Form - )} -

    -
    -
    - ))} -
    -
    - -
    -
    - rectangle -

    - Not a volunteer yet? -
    - Get Started -

    -
    -
    - Code of Conduct - New Member Form - Meeting Link -
    -
    -
    - ) -} \ No newline at end of file diff --git a/src/app/get-started/getStartedSectionLanding.jsx b/src/app/get-started/getStartedSectionLanding.jsx deleted file mode 100644 index 20afc2bb..00000000 --- a/src/app/get-started/getStartedSectionLanding.jsx +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Get started landing section. - * @returns {JSX.Element} - */ -export default function GetStartedSectionLanding({sectionType}) { - return ( -
    -
    -

    GET STARTED

    -

    - Ready to Volunteer with Open Sacramento -

    -
    - -
    -

    - We're thrilled that you're eager to join our community of civic-minded individuals and make a positive impact - on Sacramento. Volunteering with Open Sacramento is a rewarding experience that allows you to use your - skills - for the betterment of our city. Whether you're a designer, developer, or anyone else passionate - about civic tech, you'll find step-by-step instructions below to help you get started - on your journey of civic tech and community empowerment. -

    -
    -
    - ) -} \ No newline at end of file diff --git a/src/app/pitch/pitch.jsx b/src/app/pitch/pitch.jsx deleted file mode 100644 index 1a1540f2..00000000 --- a/src/app/pitch/pitch.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import PitchSectionLanding from './pitchSectionLanding' -import PitchSectionInstructions from './pitchSectionInstructions' - -/** - * Section type. Displays light or dark themes. - * @type {{light: string, dark: string}} - */ -export const SectionType = { - light: 'light', - dark: 'dark', -} - -/** - * Page for information about how to pitch a project. - * @returns {JSX.Element} - */ -export default function Pitch() { - return ( -
    - - -
    - ) -} diff --git a/src/app/pitch/pitchSectionInstructions.jsx b/src/app/pitch/pitchSectionInstructions.jsx deleted file mode 100644 index 80c34841..00000000 --- a/src/app/pitch/pitchSectionInstructions.jsx +++ /dev/null @@ -1,112 +0,0 @@ -/** - * Instructions for project pitches. - * @returns {JSX.Element} - */ -export default function PitchSectionInstructions({sectionType}) { - return ( -
    -
    -
    -
    -

    pitching a project

    -

    - How to Start a New Project -

    -
    -

    - Ready to turn your civic tech idea into reality? - Follow these simple steps to pitch your project idea to Open Sacramento. -

    -
    - -
    -
    - Step 1 -
    -

    Check Eligibility

    -
    - Before presenting your project idea, it's crucial to verify - its alignment with our mission and principles. - Please review the following conditions to ensure your project falls within our scope: -
      -
    1. Open Source
      2. -
    2. Free to Distribute
      3. -
    3. Non-Profit
      4. -
    4. Community-Benefiting
      5. -
    - These criteria will help ensure your project is in harmony with our mission and objectives. -
    -
    -
    - -
    - Step 2 -
    -

    Review our Code of Conduct

    -

    - Familiarize yourself with our Code of Conduct, which outlines the principles and expectations - guiding our community. We value respectful and inclusive interactions to create a positive - environment for everyone. Please read and understand our - guidelines for a positive experience. -

    -
    -
    - -
    - Step 3 -
    -

    Complete Project Form

    -

    - Fill out a Project Form to formally propose your idea. - After submitting, please allow 1-2 weeks for our team to review your project proposal. - We'll carefully assess its alignment with our mission and guidelines. - During this time, someone from our team will reach out to discuss your project further. -

    -
    -
    - -
    - Step 4 -
    -

    Attend Weekly Meetings (optional)

    -

    - For the fastest way to engage with our community and potentially pitch your project, - consider attending our weekly meetings posted on Meetup. These meetings provide an excellent - opportunity to connect with our team, discuss your project ideas, - and explore collaborations within our community. -

    -
    -
    - -
    - Step 5 -
    -

    Await Decision

    -

    - After submitting your project form, please patiently wait for approval or notification of rejection. - Once your project is approved, a team member will provide you with further directions and guidance - to get started on your exciting journey with Open Sacramento! -

    -
    -
    -
    -
    - -
    -
    - rectangle -

    - Not a volunteer yet? -
    - Get Started -

    -
    - -
    -
    - ) -} \ No newline at end of file diff --git a/src/app/pitch/pitchSectionLanding.jsx b/src/app/pitch/pitchSectionLanding.jsx deleted file mode 100644 index fa15fc5a..00000000 --- a/src/app/pitch/pitchSectionLanding.jsx +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Pitch landing section. - * @returns {JSX.Element} - */ -export default function PitchSectionLanding({sectionType}) { - return ( -
    -
    -

    pitch a project

    -

    - Contribute Your Project Idea -

    -
    - -
    -

    - Share your innovative ideas and collaborate with our community to turn them into reality. - Pitch your project to make a positive impact on Sacramento using technology and civic engagement. -

    -
    -
    - ) -} \ No newline at end of file From 040d77846bca733be822f70b5cd46ee8f84f01a9 Mon Sep 17 00:00:00 2001 From: natebass Date: Sat, 3 Aug 2024 16:34:27 -0700 Subject: [PATCH 12/12] Remove files that were added unintentionally after refactor. --- src/components/AppFooter.jsx | 106 ----------------------------- styles/layout/general-section.scss | 13 ---- 2 files changed, 119 deletions(-) delete mode 100644 src/components/AppFooter.jsx delete mode 100644 styles/layout/general-section.scss diff --git a/src/components/AppFooter.jsx b/src/components/AppFooter.jsx deleted file mode 100644 index 93b4e886..00000000 --- a/src/components/AppFooter.jsx +++ /dev/null @@ -1,106 +0,0 @@ -import Link from "next/link"; - -/** - * Default application footer. - * @returns {JSX.Element} - */ -export default function AppFooter() { - return ( - - ); -} diff --git a/styles/layout/general-section.scss b/styles/layout/general-section.scss deleted file mode 100644 index 25392a89..00000000 --- a/styles/layout/general-section.scss +++ /dev/null @@ -1,13 +0,0 @@ -.general-heading-underline::after { - content: ""; - position: absolute; - left: 0; - right: 0; - height: 1px; - width: 43px; - border-bottom: 4px solid $neutral-900; - } - - .general-underline-alt::after { - border-bottom: 4px solid $neutral-50; - } \ No newline at end of file