scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Respect prefers-reduced-motion

Browse source
This commit is contained in:
Ben Grant 2021-06-03 17:57:55 +10:00
parent 018b045a1e
commit 7c8ede73cd
7 changed files with 62 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
crabfit-frontend/src/components/Button/buttonStyle.ts
View file

@ -64,6 +64,24 @@ export const Top = styled.button`
border-radius: 100px; border-radius: 100px;
animation: load .5s linear infinite; animation: load .5s linear infinite;
} }
@media (prefers-reduced-motion: reduce) {
&:after {
content: 'loading...';
color: #FFF;
animation: none;
width: initial;
height: initial;
left: 50%;
transform: translateX(-50%);
border: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
}
`} `}
`; `;

15
crabfit-frontend/src/components/Donate/Donate.tsx
View file

@ -30,6 +30,11 @@ const Donate = () => {
} }
}; };
const linkPressed = () => {
setIsOpen(false);
gtag('event', 'donate', { 'event_category': 'donate' });
};
useEffect(() => { useEffect(() => {
if (store.TWA === undefined) { if (store.TWA === undefined) {
store.setTWA(document.referrer.includes('android-app://fit.crab')); store.setTWA(document.referrer.includes('android-app://fit.crab'));
@ -94,8 +99,8 @@ const Donate = () => {
<Wrapper> <Wrapper>
<a <a
onClick={event => { onClick={event => {
gtag('event', 'donate', { 'event_category': 'donate' });
if (store.TWA) { if (store.TWA) {
gtag('event', 'donate', { 'event_category': 'donate' });
event.preventDefault(); event.preventDefault();
if (window.confirm(t('donate.messages.about'))) { if (window.confirm(t('donate.messages.about'))) {
if (purchase() === false) { if (purchase() === false) {
@ -130,10 +135,10 @@ const Donate = () => {
}} }}
> >
<img src={paypal_logo} alt="Donate with PayPal" /> <img src={paypal_logo} alt="Donate with PayPal" />
<a onClick={() => setIsOpen(false)} ref={firstLinkRef} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=2" target="_blank" rel="noreferrer">{t('donate.options.$2')}</a> <a onClick={linkPressed} ref={firstLinkRef} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=2" target="_blank" rel="noreferrer">{t('donate.options.$2')}</a>
<a onClick={() => setIsOpen(false)} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=5" target="_blank" rel="noreferrer"><strong>{t('donate.options.$5')}</strong></a> <a onClick={linkPressed} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=5" target="_blank" rel="noreferrer"><strong>{t('donate.options.$5')}</strong></a>
<a onClick={() => setIsOpen(false)} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=10" target="_blank" rel="noreferrer">{t('donate.options.$10')}</a> <a onClick={linkPressed} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=10" target="_blank" rel="noreferrer">{t('donate.options.$10')}</a>
<a onClick={() => setIsOpen(false)} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD" target="_blank" rel="noreferrer">{t('donate.options.choose')}</a> <a onClick={linkPressed} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD" target="_blank" rel="noreferrer">{t('donate.options.choose')}</a>
</Options> </Options>
</Wrapper> </Wrapper>
); );

4
crabfit-frontend/src/components/Donate/donateStyle.ts
View file

@ -58,4 +58,8 @@ export const Options = styled.div`
font-weight: 800; font-weight: 800;
} }
} }
@media (prefers-reduced-motion: reduce) {
transition: none;
}
`; `;

9
crabfit-frontend/src/components/Loading/loadingStyle.ts
View file

@ -23,4 +23,13 @@ export const Loader = styled.div`
border-left-color: transparent; border-left-color: transparent;
border-radius: 100px; border-radius: 100px;
animation: load .5s linear infinite; animation: load .5s linear infinite;
@media (prefers-reduced-motion: reduce) {
animation: none;
border: 0;
&::before {
content: 'loading...';
}
}
`; `;

5
crabfit-frontend/src/components/Logo/logoStyle.ts
View file

@ -27,6 +27,11 @@ export const A = styled.a`
&:hover img { &:hover img {
animation: jelly .5s 1; animation: jelly .5s 1;
} }
@media (prefers-reduced-motion: reduce) {
&:hover img {
animation: none;
}
}
`; `;
export const Top = styled.div` export const Top = styled.div`

8
crabfit-frontend/src/components/Settings/settingsStyle.ts
View file

@ -29,6 +29,10 @@ export const OpenButton = styled.button`
${props => props.isOpen && ` ${props => props.isOpen && `
transform: rotate(-45deg); transform: rotate(-45deg);
`} `}
@media (prefers-reduced-motion: reduce) {
transition: none;
}
`; `;
export const Cover = styled.div` export const Cover = styled.div`
@ -73,6 +77,10 @@ export const Modal = styled.div`
transform: translateY(0); transform: translateY(0);
visibility: visible; visibility: visible;
`} `}
@media (prefers-reduced-motion: reduce) {
transition: none;
}
`; `;
export const Heading = styled.span` export const Heading = styled.span`

8
crabfit-frontend/src/pages/Home/homeStyle.ts
View file

@ -70,6 +70,14 @@ export const Logo = styled.img`
animation: none; animation: none;
transform: scale(.85); transform: scale(.85);
} }
@media (prefers-reduced-motion: reduce) {
animation: none;
transition: none;
&:active {
transform: none;
}
}
`; `;
export const Links = styled.nav` export const Links = styled.nav`