Skip to content

Commit

Permalink
Merge pull request #28 from barbaraperic/pr/slider
Browse files Browse the repository at this point in the history 
STYLE: reduced slider indicators and added a hook for reduced motion preference
  • Loading branch information
@willscott
willscott authored Apr 9, 2024
2 parents 1c211af + 318ff9a commit 2d2e048
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 20 deletions.
28 changes: 28 additions & 0 deletions hooks/usePrefersReducedMotion.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { useState, useEffect } from "react";

const QUERY = "(prefers-reduced-motion: no-preference)";

export default function usePrefersReducedMotion() {
// Default to prefers animations, since we don't know what the
// user's preference is on the server.
const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
useEffect(() => {
const mediaQueryList = window.matchMedia(QUERY);

// Set the true initial value, now that we're on the client:
setPrefersReducedMotion(!window.matchMedia(QUERY).matches);

// Register our event listener
const listener = (event) => {
setPrefersReducedMotion(!event.matches);
};

mediaQueryList.addEventListener("change", listener);

return () => {
mediaQueryList.removeEventListener("change", listener);
};
}, []);

return prefersReducedMotion;
}
94 changes: 74 additions & 20 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Waypoint } from "react-waypoint";
import Slider from "react-slick";
import cbor from "cbor";
import Image from "next/image";
import usePrefersReducedMotion from "../hooks/usePrefersReducedMotion.js";

export default function Home(props) {
const setPagePos = props.setPagePos;
Expand Down Expand Up @@ -749,14 +750,16 @@ export default function Home(props) {
})();
}, [totalIndexed, totalIndexerNodes, uptime]);

const userPrefersReducedMotion = usePrefersReducedMotion();

var settings = {
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 2000,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: userPrefersReducedMotion ? false : true,
autoplaySpeed: 3000,
speed: 800,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1024,
Expand All @@ -770,16 +773,16 @@ export default function Home(props) {
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
slidesToShow: 3,
slidesToScroll: 3,
initialSlide: 2,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
slidesToShow: 2,
slidesToScroll: 2,
},
},
],
Expand Down Expand Up @@ -1072,7 +1075,12 @@ export default function Home(props) {
<div className="rowWrapper">
<Row>
<Col xs={12} md={4} className="imgCol pe-md-5 mb-5 mb-md-0">
<Image src="/images/about-1.svg" alt="Map" width={172} height={120} />
<Image
src="/images/about-1.svg"
alt="Map"
width={172}
height={120}
/>
</Col>
<Col xs={12} md={8} className="textCol">
<p>
Expand All @@ -1086,7 +1094,12 @@ export default function Home(props) {
</Row>
<Row>
<Col xs={12} md={4} className="imgCol pe-md-5 mb-5 mb-md-0">
<Image src="/images/about-2.svg" alt="Solarsystem" width={197} height={120}/>
<Image
src="/images/about-2.svg"
alt="Solarsystem"
width={197}
height={120}
/>
</Col>
<Col xs={12} md={8} className="textCol">
<p>
Expand All @@ -1102,7 +1115,12 @@ export default function Home(props) {
</Row>
<Row>
<Col xs={12} md={4} className="imgCol pe-md-5 mb-5 mb-md-0">
<Image src="/images/about-3.svg" alt="Connected Circles" width={193} height={120} />
<Image
src="/images/about-3.svg"
alt="Connected Circles"
width={193}
height={120}
/>
</Col>
<Col xs={12} md={8} className="textCol">
<p>
Expand Down Expand Up @@ -1143,28 +1161,48 @@ export default function Home(props) {
target="_blank"
rel="noreferrer"
>
<Image src="/images/kenLabs.svg" alt="Ken Labs Logo" width={322} height={89}/>
<Image
src="/images/kenLabs.svg"
alt="Ken Labs Logo"
width={322}
height={89}
/>
</a>
<a
href="https://www.leewayhertz.com/"
target="_blank"
rel="noreferrer"
>
<Image src="/images/LeewayHertz.svg" alt="Leeway Hertz Logo" width={322} height={43} />
<Image
src="/images/LeewayHertz.svg"
alt="Leeway Hertz Logo"
width={322}
height={43}
/>
</a>
<a
href="https://www.piknik.com/"
target="_blank"
rel="noreferrer"
>
<Image src="/images/PiKNiK.svg" alt="PiKNiK Logo" width={322} height={82}/>
<Image
src="/images/PiKNiK.svg"
alt="PiKNiK Logo"
width={322}
height={82}
/>
</a>
<a
href="https://www.filswan.com/"
target="_blank"
rel="noreferrer"
>
<Image src="/images/FilSwan-logo.svg" alt="FilSwan Logo" width={322} height={76}/>
<Image
src="/images/FilSwan-logo.svg"
alt="FilSwan Logo"
width={322}
height={76}
/>
</a>
<a
href="https://www.sxxfuture.com/"
Expand All @@ -1174,25 +1212,41 @@ export default function Home(props) {
<Image
src="/images/SanXiaXingFutureData.svg"
alt="San Xia Xing Future Data Logo"
width={322} height={82}
width={322}
height={82}
/>
</a>
<a href="https://infura.io/" target="_blank" rel="noreferrer">
<Image src="/images/Infura.svg" alt="Infura Logo" width={322} height={89} />
<Image
src="/images/Infura.svg"
alt="Infura Logo"
width={322}
height={89}
/>
</a>
<a
href="https://distributedstorage.com/"
target="_blank"
rel="noreferrer"
>
<Image src="/images/dss.svg" alt="DSS Logo" width={322} height={112} />
<Image
src="/images/dss.svg"
alt="DSS Logo"
width={322}
height={112}
/>
</a>
<a
href="https://www.cloudflare.com/"
target="_blank"
rel="noreferrer"
>
<Image src="/images/Cloudflare.svg" alt="Cloudflare Logo" width={322} height={89} />
<Image
src="/images/Cloudflare.svg"
alt="Cloudflare Logo"
width={322}
height={89}
/>
</a>
</Slider>
</div>
Expand Down

0 comments on commit 2d2e048

Please sign in to comment.