Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

STYLE: reduced slider indicators and added a hook for reduced motion preference #28

Merged
merged 1 commit into from
Apr 9, 2024
Merged

STYLE: reduced slider indicators and added a hook for reduced motion preference #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions hooks/usePrefersReducedMotion.js
View file
Open in desktop
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
Open in desktop
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
Loading