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;
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(() => {
if (store.TWA === undefined) {
store.setTWA(document.referrer.includes('android-app://fit.crab'));
@ -94,8 +99,8 @@ const Donate = () => {
<Wrapper>
<a
onClick={event => {
gtag('event', 'donate', { 'event_category': 'donate' });
if (store.TWA) {
gtag('event', 'donate', { 'event_category': 'donate' });
event.preventDefault();
if (window.confirm(t('donate.messages.about'))) {
if (purchase() === false) {
@ -130,10 +135,10 @@ const Donate = () => {
}}
>
<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={() => 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={() => 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={() => 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} 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} 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=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" target="_blank" rel="noreferrer">{t('donate.options.choose')}</a>
</Options>
</Wrapper>
);

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

@ -58,4 +58,8 @@ export const Options = styled.div`
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-radius: 100px;
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 {
animation: jelly .5s 1;
}
@media (prefers-reduced-motion: reduce) {
&:hover img {
animation: none;
}
}
`;
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 && `
transform: rotate(-45deg);
`}
@media (prefers-reduced-motion: reduce) {
transition: none;
}
`;
export const Cover = styled.div`
@ -73,6 +77,10 @@ export const Modal = styled.div`
transform: translateY(0);
visibility: visible;
`}
@media (prefers-reduced-motion: reduce) {
transition: none;
}
`;
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;
transform: scale(.85);
}
@media (prefers-reduced-motion: reduce) {
animation: none;
transition: none;
&:active {
transform: none;
}
}
`;
export const Links = styled.nav`