Spanish translations

This commit is contained in:
Ben Grant 2021-05-25 14:10:25 +10:00
parent 053b0fa6fb
commit 06b0b05a2a
22 changed files with 290 additions and 85 deletions

View file

@ -56,7 +56,7 @@ const AvailabilityEditor = ({
return (
<>
<StyledMain>
<Center>{t('event:you.info')}</Center>
<Center style={{textAlign: 'center'}}>{t('event:you.info')}</Center>
</StyledMain>
{isSpecificDates && (
<StyledMain>

View file

@ -98,7 +98,7 @@ const GoogleCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
<Button
onClick={() => signIn()}
isLoading={signedIn === undefined}
buttonWidth="270px"
buttonWidth={`${Math.max(t('event:you.google_cal.login').length*10, 270)}px`}
primaryColor="#4286F5"
secondaryColor="#3367BD">
<LoginButton>

View file

@ -89,8 +89,9 @@ const Settings = () => {
name="language"
id="language"
options={{
'en': 'English (US)',
'en': 'English',
'de': 'Deutsch',
'es': 'Español',
'ko': '한국어',
...process.env.NODE_ENV !== 'production' && { 'cimode': 'DEV' },
}}

View file

@ -1,4 +1,5 @@
import { useState, useEffect, useRef } from 'react';
import dayjs from 'dayjs';
import { useSettingsStore } from 'stores';
@ -11,62 +12,7 @@ import {
Selected,
} from './timeRangeFieldStyle';
const times = {
'12h': [
'12am',
'1am',
'2am',
'3am',
'4am',
'5am',
'6am',
'7am',
'8am',
'9am',
'10am',
'11am',
'12pm',
'1pm',
'2pm',
'3pm',
'4pm',
'5pm',
'6pm',
'7pm',
'8pm',
'9pm',
'10pm',
'11pm',
'12am',
],
'24h': [
'00',
'01',
'02',
'03',
'04',
'05',
'06',
'07',
'08',
'09',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23',
'24',
],
};
const times = ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'];
const TimeRangeField = ({
label,
@ -123,7 +69,7 @@ const TimeRangeField = ({
{start > end && <Selected start={start > end ? 0 : start} end={end} />}
<Handle
value={start}
label={times[timeFormat][start]}
label={timeFormat === '24h' ? times[start] : dayjs().hour(times[start]).format('ha')}
extraPadding={end - start === 1 ? 'padding-right: 20px;' : (start - end === 1 ? 'padding-left: 20px;' : '')}
onMouseDown={() => {
document.addEventListener('mousemove', handleMouseMove);
@ -146,7 +92,7 @@ const TimeRangeField = ({
/>
<Handle
value={end}
label={times[timeFormat][end]}
label={timeFormat === '24h' ? times[end] : dayjs().hour(times[end]).format('ha')}
extraPadding={end - start === 1 ? 'padding-left: 20px;' : (start - end === 1 ? 'padding-right: 20px;' : '')}
onMouseDown={() => {
document.addEventListener('mousemove', handleMouseMove);

View file

@ -60,6 +60,7 @@ export const Handle = styled.div`
text-align: center;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
${props => props.extraPadding}
}
`;

View file

@ -9,6 +9,9 @@ i18n
.use(initReactI18next)
.init({
fallbackLng: 'en',
supportedLngs: ['en', 'de', 'es', 'ko'],
ns: 'common',
defaultNS: 'common',
debug: process.env.NODE_ENV !== 'production',
interpolation: {
escapeValue: false,

View file

@ -364,6 +364,7 @@ const Event = (props) => {
type="submit"
isLoading={isLoginLoading}
disabled={isLoginLoading || isLoading}
buttonWidth={`${Math.max(t('event:form.button').length*11, 100)}px`}
>{t('event:form.button')}</Button>
</LoginForm>
{error && <Error onClose={() => setError(null)}>{error}</Error>}

View file

@ -63,7 +63,7 @@ export const EventDate = styled.span`
export const LoginForm = styled.form`
display: grid;
grid-template-columns: 1fr 1fr 100px;
grid-template-columns: 1fr 1fr auto;
align-items: flex-end;
grid-gap: 18px;

View file

@ -83,11 +83,11 @@ const Home = ({ offline }) => {
const dates = JSON.parse(data.dates);
if (dates.length === 0) {
return setError(`You haven't selected any dates!`);
return setError(t('home:form.errors.no_dates'));
}
const isSpecificDates = typeof dates[0] === 'string' && dates[0].length === 8;
if (start === end) {
return setError(`The start and end times can't be the same`);
return setError(t('home:form.errors.same_times'));
}
let times = dates.reduce((times, date) => {
@ -124,7 +124,7 @@ const Home = ({ offline }) => {
}, []);
if (times.length === 0) {
return setError(`You don't have any time selected`);
return setError(t('home:form.errors.no_time'));
}
const response = await api.post('/event', {
@ -139,7 +139,7 @@ const Home = ({ offline }) => {
'event_category': 'home',
});
} catch (e) {
setError('An error ocurred while creating the event. Please try again later.');
setError(t('home:form.errors.unknown'));
console.error(e);
} finally {
setIsLoading(false);
@ -236,7 +236,7 @@ const Home = ({ offline }) => {
{/* eslint-disable-next-line */}
<P><Trans i18nKey="home:about.content.p3">Created by <a href="https://bengrant.dev" target="_blank">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">repository</a>. By using Crab Fit you agree to the <Link to="/privacy">privacy policy</Link>.</Trans></P>
<P><Trans i18nKey="home:about.content.p5">Crab Fit costs more than <strong>$100 per month</strong> to run. 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>
</AboutSection>