Print queries

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}`}</ShareInfo>
-            <ShareInfo isLoading={isLoading}>
+            <ShareInfo isLoading={isLoading} className="instructions">
               {!!event?.name &&
                 <Trans i18nKey="event:nav.shareinfo">Copy the link to this page, or share via <a onClick={() => 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</a>.</Trans>
               }

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`

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 = () => {
         />
       </StyledMain>
 
-      <AboutSection id="about">
-        <StyledMain>
-          <Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
-        </StyledMain>
-      </AboutSection>
+      <ButtonArea>
+        <AboutSection id="about">
+          <StyledMain>
+            <Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
+          </StyledMain>
+        </AboutSection>
+      </ButtonArea>
 
       <Footer />
     </>

crabfit-frontend/src/pages/Help/helpStyle.ts

@@ -108,3 +108,9 @@ export const FakeTimeRange = styled.div`
     border-radius: 2px;
   }
 `;
+
+export const ButtonArea = styled.div`
+  @media print {
+    display: none;
+  }
+`;

crabfit-frontend/src/pages/Privacy/Privacy.tsx

@@ -14,7 +14,7 @@ import {
   AboutSection,
   P,
 } from '../Home/homeStyle';
-import { Note } from './privacyStyle';
+import { Note, ButtonArea } from './privacyStyle';
 
 const translationDisclaimer = 'While the translated document is provided for your convenience, the English version as displayed at https://crab.fit is legally binding.';
 
@@ -98,11 +98,13 @@ const Privacy = () => {
         </div>
       </StyledMain>
 
-      <AboutSection id="about">
-        <StyledMain>
-          <Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
-        </StyledMain>
-      </AboutSection>
+      <ButtonArea>
+        <AboutSection>
+          <StyledMain>
+            <Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
+          </StyledMain>
+        </AboutSection>
+      </ButtonArea>
 
       <Footer />
     </>

crabfit-frontend/src/pages/Privacy/privacyStyle.ts

@@ -14,3 +14,9 @@ export const Note = styled.p`
     color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight};
   }
 `;
+
+export const ButtonArea = styled.div`
+  @media print {
+    display: none;
+  }
+`;