Merge pull request #105 from CivicDataLab/dev

Dev

Author: akkisagiraju

content/team/akhil/index.md

@@ -8,7 +8,7 @@ github: https://github.com/akkisagiraju
 twitter: 
 linkedin: https://www.linkedin.com/in/akhil-sagiraju
 image: akhil.jpeg
-sectors: Law & Justice
+sectors: Law & Justice, Education, Urban Planning
 projects: Justice Hub, Zombie Tracker, OpenCity, The Northern Alliance of Scotland
 ---
 

package-lock.json

@@ -24,7 +24,6 @@
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1",
     "react-icons": "^4.1.0",
-    "react-indiana-drag-scroll": "^1.8.1",
     "react-multi-carousel": "^2.6.2",
     "react-reveal": "^1.2.2",
     "rss-parser": "^3.10.0",

package.json

@@ -33,7 +33,7 @@ const AboutBackground = ({ children }) => {
   }, [data.allFile.nodes]);
 
   return (
-    <BackgroundImage fluid={currentImage}>
+    <BackgroundImage style={{ zIndex: 999 }} fluid={currentImage}>
       {children}
     </BackgroundImage>
   );

src/components/AboutBackground.js

@@ -1,39 +1,62 @@
 import React from 'react';
 import Image from 'gatsby-image';
 import BackgroundImage from 'gatsby-background-image';
-import ScrollContainer from 'react-indiana-drag-scroll';
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
 import { graphql, useStaticQuery } from 'gatsby';
 import styled from 'styled-components';
-import useHorizontalAutoScroll from '../hooks/useHorizontalAutoScroll';
 
-const StyledScrollContainer = styled(ScrollContainer)`
-  display: flex;
-  align-items: center;
-  overflow-x: auto;
+const StyledCarousel = styled(Carousel)`
   height: 380px;
-  margin-bottom: 60px;
+  margin-bottom: 36px;
 
-  > * {
+  ul > * {
     height: 260px;
     width: 260px;
-    margin-right: 20px;
-    flex-shrink: 0;
+  }
+
+  .gatsby-image-wrapper {
+    height: 100%;
+    width: 100%;
   }
 
   @media (min-width: 1280px) {
-    margin-bottom: 90px;
+    margin-bottom: 80px;
+
+    li {
+      margin-right: 20px;
+    }
   }
 
   @media (min-width: 2000px) {
     height: 480px;
 
-    > * {
+    ul > * {
       height: 350px;
       width: 350px;
     }
   }
 `;
 
+const responsive = {
+  superLargeDesktop: {
+    breakpoint: { max: 4000, min: 2000 },
+    items: 8
+  },
+  desktop: {
+    breakpoint: { max: 2000, min: 1024 },
+    items: 5
+  },
+  tablet: {
+    breakpoint: { max: 1024, min: 464 },
+    items: 3
+  },
+  mobile: {
+    breakpoint: { max: 464, min: 0 },
+    items: 1
+  }
+};
+
 const CivicDaysImages = () => {
   const data = useStaticQuery(graphql`
     query {
@@ -61,17 +84,13 @@ const CivicDaysImages = () => {
     }
   `);
 
-  const scrollContainer = React.useRef(null);
-
-  useHorizontalAutoScroll(scrollContainer);
-
   return (
     <BackgroundImage fluid={data.file.childImageSharp.fluid}>
-      <StyledScrollContainer innerRef={scrollContainer} vertical={false}>
+      <StyledCarousel infinite autoPlay autoPlaySpeed={2000} responsive={responsive}>
         {data.civicdayimages.nodes?.map((image) => {
           return <Image key={image.id} fluid={image.childImageSharp.fluid} />;
         })}
-      </StyledScrollContainer>
+      </StyledCarousel>
     </BackgroundImage>
   );
 };

src/components/CivicDaysImages.js

@@ -199,25 +199,6 @@ export const navLinks = [
 ];
 
 const Navbar = ({ dark, overlay }) => {
-  const [displayMobileNav, setDisplayMobileNav] = React.useState(false);
-  const navbarRef = React.useRef(null);
-
-  React.useEffect(() => {
-    const addFixedClass = () => {
-      if (window.scrollY > 50) {
-        navbarRef.current.classList.add('fixed');
-      } else {
-        navbarRef.current.classList.remove('fixed');
-      }
-    };
-
-    window.addEventListener('scroll', addFixedClass);
-
-    return () => {
-      window.removeEventListener('scroll', addFixedClass);
-    };
-  }, []);
-
   const data = useStaticQuery(graphql`
     query LogoQuery {
       logo: file(relativePath: { eq: "cdl_logo.png" }) {
@@ -237,13 +218,34 @@ const Navbar = ({ dark, overlay }) => {
     }
   `);
 
-  const logo = data?.logo?.childImageSharp.fluid;
-  const darkLogo = data?.darkLogo?.childImageSharp.fluid;
+  const [displayMobileNav, setDisplayMobileNav] = React.useState(false);
+  const [navBarLogo, setNavBarLogo] = React.useState(
+    dark ? data.darkLogo.childImageSharp.fluid : data.logo.childImageSharp.fluid
+  );
+  const navbarRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const addFixedClass = () => {
+      if (window.scrollY > 50) {
+        navbarRef.current.classList.add('fixed');
+        setNavBarLogo(data.logo.childImageSharp.fluid);
+      } else {
+        navbarRef.current.classList.remove('fixed');
+        setNavBarLogo(dark ? data.darkLogo.childImageSharp.fluid : data.logo.childImageSharp.fluid);
+      }
+    };
+
+    window.addEventListener('scroll', addFixedClass);
+
+    return () => {
+      window.removeEventListener('scroll', addFixedClass);
+    };
+  }, [data.logo.childImageSharp.fluid, data.darkLogo.childImageSharp.fluid, dark]);
 
   return (
     <StyledNav ref={navbarRef} overlay={overlay}>
       <Link to="/">
-        <Image fluid={dark ? darkLogo : logo} />
+        <Image fluid={navBarLogo} />
       </Link>
       <MdMenu onClick={() => setDisplayMobileNav(true)} className="mobile-nav" />
       <LinksContainer dark={dark} displayMobile={displayMobileNav}>

src/components/Layout/Navbar.js

@@ -1,31 +1,107 @@
 import React from 'react';
 import HeroText from '../styles/HeroText';
-import OurPartnersStyle from '../styles/OurPartners';
 import Image from 'gatsby-image';
-import ScrollContainer from 'react-indiana-drag-scroll';
+import styled from 'styled-components';
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
 import MainContainer from '../styles/MainContainer';
 import useHorizontalAutoScroll from '../hooks/useHorizontalAutoScroll';
 
+const responsive = {
+  superLargeDesktop: {
+    breakpoint: { max: 4000, min: 2000 },
+    items: 12
+  },
+  desktop: {
+    breakpoint: { max: 2000, min: 1024 },
+    items: 8
+  },
+  tablet: {
+    breakpoint: { max: 1024, min: 464 },
+    items: 4
+  },
+  mobile: {
+    breakpoint: { max: 464, min: 0 },
+    items: 2
+  }
+};
+
+const PartnersContainer = styled(MainContainer)`
+  overflow-x: hidden;
+  margin-top: 69px;
+
+  p {
+    height: 70px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+  }
+
+  @media (min-width: 900px) {
+    .partners-container {
+      margin-right: 18px;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    margin-top: 100px;
+    padding-left: 0;
+
+    .section-heading {
+      font-size: 70px;
+      line-height: 67px;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    padding: 0 46px;
+  }
+
+  @media (min-width: 1440px) {
+    padding: 0 72px;
+    .section-heading {
+      font-size: 60px;
+      line-height: 60px;
+    }
+  }
+`;
+
+const StyledCarousel = styled(Carousel)`
+  margin: 30px auto;
+  ul {
+    display: flex;
+    align-items: center;
+  }
+
+  li {
+    margin: 0 4px;
+  }
+
+  @media (min-width: 1280px) {
+    margin: 54px auto;
+
+    li {
+      margin: 0 30px;
+    }
+  }
+`;
+
 const OurPartners = ({ partners }) => {
   const scrollContainer = React.useRef(null);
 
   useHorizontalAutoScroll(scrollContainer);
 
   return (
-    <MainContainer>
-      <OurPartnersStyle>
-        <div className={'content'}>
-          <HeroText className={'section-heading'}>Our Partners</HeroText>
-        </div>
-        <ScrollContainer className="partners-container" vertical={false} innerRef={scrollContainer}>
-          {partners.map((partner) => (
-            <a key={partner.id} href={`https://${partner.name}`} target="_blank" rel="noreferrer noopener">
-              <Image fixed={partner.childImageSharp.fixed} />
-            </a>
-          ))}
-        </ScrollContainer>
-      </OurPartnersStyle>
-    </MainContainer>
+    <PartnersContainer>
+      <HeroText className={'section-heading'}>Our Partners</HeroText>
+      <StyledCarousel responsive={responsive} autoPlay infinite>
+        {partners.map((partner) => (
+          <a key={partner.id} href={`https://${partner.name}`} target="_blank" rel="noreferrer noopener">
+            <Image fixed={partner.childImageSharp.fixed} />
+          </a>
+        ))}
+      </StyledCarousel>
+    </PartnersContainer>
   );
 };
 

src/components/OurPartners.js

@@ -326,7 +326,7 @@ const ProjectTemplate = ({ data }) => {
             {newsletter && (
               <LeftText>
                 <p>Subscribe to our newsletter:</p>
-                <a class="btn-newsletter" href={newsletter}>
+                <a className="btn-newsletter" href={newsletter}>
                   Subscribe
                 </a>
               </LeftText>
@@ -493,7 +493,7 @@ export const pageQuery = graphql`
           website
           logo {
             childImageSharp {
-              fixed(width: 180) {
+              fixed(width: 110) {
                 ...GatsbyImageSharpFixed_noBase64
               }
             }