diff --git a/crabfit-frontend/src/App.tsx b/crabfit-frontend/src/App.tsx index 23b8b5b..0154143 100644 --- a/crabfit-frontend/src/App.tsx +++ b/crabfit-frontend/src/App.tsx @@ -93,6 +93,7 @@ const App = () => { styles={theme => ({ html: { scrollBehavior: 'smooth', + '-webkit-print-color-adjust': 'exact', }, body: { backgroundColor: theme.background, diff --git a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx index 92ec00c..aec8520 100644 --- a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx +++ b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx @@ -29,6 +29,7 @@ import { People, Person, StyledMain, + Info, } from './availabilityViewerStyle'; import locales from 'res/dayjs_locales'; @@ -162,10 +163,10 @@ const AvailabilityViewer = ({ total={people.filter(p => p.availability.length > 0).length} onSegmentFocus={count => setFocusCount(count)} /> -
{t('event:group.info1')}
+ {t('event:group.info1')} {people.length > 1 && ( <> -
{t('event:group.info2')}
+ {t('event:group.info2')} {people.map((person, i) => !props.secondary && ` + box-shadow: 0 4px 0 0 ${props.secondaryColor || props.theme.primaryDark}; + `} + + &::before { + display: none; + } + } `; diff --git a/crabfit-frontend/src/components/Footer/footerStyle.ts b/crabfit-frontend/src/components/Footer/footerStyle.ts index 1d09889..009cd12 100644 --- a/crabfit-frontend/src/components/Footer/footerStyle.ts +++ b/crabfit-frontend/src/components/Footer/footerStyle.ts @@ -19,4 +19,8 @@ export const Wrapper = styled.footer` margin-bottom: 20px; } `} + + @media print { + display: none; + } `; diff --git a/crabfit-frontend/src/components/Logo/logoStyle.ts b/crabfit-frontend/src/components/Logo/logoStyle.ts index e082763..e6c3bdd 100644 --- a/crabfit-frontend/src/components/Logo/logoStyle.ts +++ b/crabfit-frontend/src/components/Logo/logoStyle.ts @@ -62,4 +62,8 @@ export const Tagline = styled.span` display: flex; align-items: center; justify-content: center; + + @media print { + display: none; + } `; diff --git a/crabfit-frontend/src/components/Recents/Recents.tsx b/crabfit-frontend/src/components/Recents/Recents.tsx index 035ac99..451e620 100644 --- a/crabfit-frontend/src/components/Recents/Recents.tsx +++ b/crabfit-frontend/src/components/Recents/Recents.tsx @@ -4,7 +4,7 @@ import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; import { AboutSection, StyledMain } from '../../pages/Home/homeStyle'; -import { Recent } from './recentsStyle'; +import { Wrapper, Recent } from './recentsStyle'; dayjs.extend(relativeTime); @@ -14,17 +14,19 @@ const Recents = ({ target }) => { const { t } = useTranslation(['home', 'common']); return !!recents.length && ( - - -

{t('home:recently_visited')}

- {recents.map(event => ( - - {event.name} - {t('common:created', { date: dayjs.unix(event.created).fromNow() })} - - ))} - - + + + +

{t('home:recently_visited')}

+ {recents.map(event => ( + + {event.name} + {t('common:created', { date: dayjs.unix(event.created).fromNow() })} + + ))} + + + ); }; diff --git a/crabfit-frontend/src/components/Recents/recentsStyle.ts b/crabfit-frontend/src/components/Recents/recentsStyle.ts index bbd45f5..dca0b6c 100644 --- a/crabfit-frontend/src/components/Recents/recentsStyle.ts +++ b/crabfit-frontend/src/components/Recents/recentsStyle.ts @@ -1,5 +1,11 @@ import styled from '@emotion/styled'; +export const Wrapper = styled.div` + @media print { + display: none; + } +`; + export const Recent = styled.a` text-decoration: none; display: flex; diff --git a/crabfit-frontend/src/components/Settings/settingsStyle.ts b/crabfit-frontend/src/components/Settings/settingsStyle.ts index 0af088c..952a6c0 100644 --- a/crabfit-frontend/src/components/Settings/settingsStyle.ts +++ b/crabfit-frontend/src/components/Settings/settingsStyle.ts @@ -33,6 +33,9 @@ export const OpenButton = styled.button` @media (prefers-reduced-motion: reduce) { transition: none; } + @media print { + display: none; + } `; export const Cover = styled.div` @@ -81,6 +84,9 @@ export const Modal = styled.div` @media (prefers-reduced-motion: reduce) { transition: none; } + @media print { + display: none; + } `; export const Heading = styled.span` diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx index cb956a1..5c4f346 100644 --- a/crabfit-frontend/src/pages/Event/Event.tsx +++ b/crabfit-frontend/src/pages/Event/Event.tsx @@ -47,6 +47,7 @@ const Event = (props) => { const weekStart = useSettingsStore(state => state.weekStart); const addRecent = useRecentsStore(state => state.addRecent); + const removeRecent = useRecentsStore(state => state.removeRecent); const locale = useLocaleUpdateStore(state => state.locale); const { t } = useTranslation(['common', 'event']); @@ -86,6 +87,9 @@ const Event = (props) => { document.title = `${response.data.name} | Crab Fit`; } catch (e) { console.error(e); + if (e.status === 404) { + removeRecent(id); + } } finally { setIsLoading(false); } @@ -302,7 +306,7 @@ const Event = (props) => { } title={!!navigator.clipboard ? t('event:nav.title') : ''} >{copied ?? `https://crab.fit/${id}`} - + {!!event?.name && Copy the link to this page, or share via gtag('event', 'send_email', { 'event_category': 'event' })} href={`mailto:?subject=${encodeURIComponent(t('event:nav.email_subject', { event_name: event?.name }))}&body=${encodeURIComponent(`${t('event:nav.email_body')} https://crab.fit/${id}`)}`}>email. } diff --git a/crabfit-frontend/src/pages/Event/eventStyle.ts b/crabfit-frontend/src/pages/Event/eventStyle.ts index 82a5def..c554204 100644 --- a/crabfit-frontend/src/pages/Event/eventStyle.ts +++ b/crabfit-frontend/src/pages/Event/eventStyle.ts @@ -38,6 +38,12 @@ export const EventDate = styled.span` border-radius: 3px; } `} + + @media print { + &::after { + content: ' - ' attr(title); + } + } `; export const LoginForm = styled.form` @@ -61,6 +67,10 @@ export const LoginForm = styled.form` export const LoginSection = styled.section` background-color: ${props => props.theme.primaryBackground}; padding: 10px 0; + + @media print { + display: none; + } `; export const Info = styled.p` @@ -93,6 +103,12 @@ export const ShareInfo = styled.p` color: ${props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; } `} + + @media print { + &.instructions { + display: none; + } + } `; export const Tabs = styled.div` @@ -100,6 +116,10 @@ export const Tabs = styled.div` align-items: center; justify-content: center; margin: 30px 0 20px; + + @media print { + display: none; + } `; export const Tab = styled.a` diff --git a/crabfit-frontend/src/pages/Help/Help.tsx b/crabfit-frontend/src/pages/Help/Help.tsx index ddb4f80..b8817a7 100644 --- a/crabfit-frontend/src/pages/Help/Help.tsx +++ b/crabfit-frontend/src/pages/Help/Help.tsx @@ -20,6 +20,7 @@ import { Step, FakeCalendar, FakeTimeRange, + ButtonArea, } from './helpStyle'; const Help = () => { @@ -82,11 +83,13 @@ const Help = () => { /> - - -
- - + + + +
+ + +