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

Fix button, IE fallback

Browse source
This commit is contained in:
Ben Grant 2021-06-10 14:01:04 +10:00
parent c84b4b3caa
commit 54ddd28b67
4 changed files with 29 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
crabfit-frontend/public/index.css
View file

@ -19,3 +19,24 @@
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
/* IE 10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#root {
font-family: Karla, sans-serif;
text-align: center;
margin: 20vh auto;
font-size: 1.3em;
font-weight: 600;
}
#root::before {
content: '🦀';
font-size: 1.5em;
display: block;
padding: 20px;
}
#root::after {
display: block;
content: 'Crab Fit doesn\'t work in Internet Explorer. Please try using a modern browser.';
}
}

5
crabfit-frontend/public/index.html
View file

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<link rel="icon" href="%PUBLIC_URL%/favicon.ico"> <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta name="theme-color" content="#F79E00"> <meta name="theme-color" content="#F79E00">
@ -36,7 +37,9 @@
</script> </script>
</head> </head>
<body> <body>
<noscript style="font-family: Karla, sans-serif; text-align: center; margin: 20vh 0; display: block;"><h1>🦀 Crab Fit doesn't work without Javascript 🏋️</h1><p>Enable Javascript or try a different browser.</p></noscript> <noscript>
<div style="font-family: Karla, sans-serif; text-align: center; margin: 20vh 0; display: block;"><h1>🦀 Crab Fit doesn't work without Javascript 🏋️</h1><p>Enable Javascript or try a different browser.</p></div>
</noscript>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

2
crabfit-frontend/src/components/Button/Button.tsx
View file

@ -2,7 +2,7 @@ import { Pressable } from './buttonStyle';
const Button = ({ href, type = 'button', icon, children, ...props }) => ( const Button = ({ href, type = 'button', icon, children, ...props }) => (
<Pressable <Pressable
type={href && type} type={type}
as={href ? 'a' : 'button'} as={href ? 'a' : 'button'}
href={href} href={href}
{...props} {...props}

6
crabfit-frontend/src/pages/Home/Home.tsx
View file

@ -246,7 +246,7 @@ const Home = ({ offline }) => {
}[browser]} }[browser]}
onClick={() => gtag('event', `download_extension_${browser}`, { 'event_category': 'home'})} onClick={() => gtag('event', `download_extension_${browser}`, { 'event_category': 'home'})}
target="_blank" target="_blank"
rel="noopener" rel="noreferrer noopener"
secondary secondary
>{{ >{{
chrome: t('home:about.chrome_extension'), chrome: t('home:about.chrome_extension'),
@ -259,11 +259,11 @@ const Home = ({ offline }) => {
icon={<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path fill="currentColor" d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z" /></svg>} icon={<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path fill="currentColor" d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z" /></svg>}
onClick={() => gtag('event', 'download_android_app', { 'event_category': 'home' })} onClick={() => gtag('event', 'download_android_app', { 'event_category': 'home' })}
target="_blank" target="_blank"
rel="noopener" rel="noreferrer noopener"
secondary secondary
>{t('home:about.android_app')}</Button> >{t('home:about.android_app')}</Button>
</ButtonArea> </ButtonArea>
<P><Trans i18nKey="home:about.content.p3">Created by <a href="https://bengrant.dev" target="_blank" rel="noopener author">Ben Grant</a>, Crab Fit is the modern-day solution to your group event planning debates.</Trans></P> <P><Trans i18nKey="home:about.content.p3">Created by <a href="https://bengrant.dev" target="_blank" rel="noreferrer noopener author">Ben Grant</a>, Crab Fit is the modern-day solution to your group event planning debates.</Trans></P>
<P><Trans i18nKey="home:about.content.p4">The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the <a href="https://github.com/GRA0007/crab.fit" target="_blank" rel="noreferrer noopener">repository</a>. By using Crab Fit you agree to the <Link to="/privacy" rel="license">privacy policy</Link>.</Trans></P> <P><Trans i18nKey="home:about.content.p4">The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the <a href="https://github.com/GRA0007/crab.fit" target="_blank" rel="noreferrer noopener">repository</a>. By using Crab Fit you agree to the <Link to="/privacy" rel="license">privacy policy</Link>.</Trans></P>
<P><Trans i18nKey="home:about.content.p5">Consider donating below if it helped you out so it can stay free for everyone. 🦀</Trans></P> <P><Trans i18nKey="home:about.content.p5">Consider donating below if it helped you out so it can stay free for everyone. 🦀</Trans></P>
</StyledMain> </StyledMain>