How to Crab Fit instruction step by step guide
This commit is contained in:
Ben Grant
parent
778f29516e
commit
ce06b43882
|
|
@ -16,6 +16,7 @@ const EGG_PATTERN = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft'
|
|||
const Home = lazy(() => import('pages/Home/Home'));
|
||||
const Event = lazy(() => import('pages/Event/Event'));
|
||||
const Create = lazy(() => import('pages/Create/Create'));
|
||||
const Help = lazy(() => import('pages/Help/Help'));
|
||||
|
||||
const App = () => {
|
||||
const colortheme = useSettingsStore(state => state.theme);
|
||||
|
|
@ -114,6 +115,11 @@ const App = () => {
|
|||
<Suspense fallback={<Loading />}>
|
||||
<Home offline={offline} {...props} />
|
||||
</Suspense>
|
||||
)} />
|
||||
<Route path="/how-to" exact render={props => (
|
||||
<Suspense fallback={<Loading />}>
|
||||
<Help {...props} />
|
||||
</Suspense>
|
||||
)} />
|
||||
<Route path="/create" exact render={props => (
|
||||
<Suspense fallback={<Loading />}>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export const Bar = styled.div`
|
|||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin: 0 8px;
|
||||
border: 1px solid ${props => props.theme.primaryLight};
|
||||
border: 1px solid ${props => props.theme.text};
|
||||
|
||||
@media (max-width: 400px) {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ const Create = ({ offline }) => {
|
|||
<StyledMain>
|
||||
<h2>Recently visited</h2>
|
||||
{recentsStore.recents.map(event => (
|
||||
<Recent href={`/${event.id}`} key={event.id}>
|
||||
<Recent href={`/${event.id}`} target="_blank" key={event.id}>
|
||||
<span className="name">{event.name}</span>
|
||||
<span className="date">Created {dayjs.unix(event.created).format('D MMMM, YYYY')}</span>
|
||||
</Recent>
|
||||
|
|
|
|||
110
crabfit-frontend/src/pages/Help/Help.tsx
Normal file
110
crabfit-frontend/src/pages/Help/Help.tsx
Normal file
File diff suppressed because one or more lines are too long
144
crabfit-frontend/src/pages/Help/helpStyle.ts
Normal file
144
crabfit-frontend/src/pages/Help/helpStyle.ts
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
import styled from '@emotion/styled';
|
||||
|
||||
export const StyledMain = styled.div`
|
||||
width: 600px;
|
||||
margin: 20px auto;
|
||||
max-width: calc(100% - 60px);
|
||||
`;
|
||||
|
||||
export const Logo = styled.img`
|
||||
width: 2.5rem;
|
||||
margin-right: 16px;
|
||||
`;
|
||||
|
||||
export const Title = styled.span`
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
color: ${props => props.theme.primary};
|
||||
font-family: 'Molot', sans-serif;
|
||||
font-weight: 400;
|
||||
text-shadow: 0 2px 0 ${props => props.theme.primaryDark};
|
||||
line-height: 1em;
|
||||
`;
|
||||
|
||||
export const AboutSection = styled.section`
|
||||
margin: 30px 0 0;
|
||||
background-color: ${props => props.theme.primaryBackground};
|
||||
padding: 20px 0;
|
||||
`;
|
||||
|
||||
export const Footer = styled.footer`
|
||||
width: 600px;
|
||||
margin: 20px auto;
|
||||
max-width: calc(100% - 60px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
export const P = styled.p`
|
||||
font-weight: 500;
|
||||
line-height: 1.6em;
|
||||
`;
|
||||
|
||||
export const Step = styled.h2`
|
||||
text-decoration-color: ${props => props.theme.primary};
|
||||
text-decoration-style: solid;
|
||||
text-decoration-line: underline;
|
||||
margin-top: 30px;
|
||||
`;
|
||||
|
||||
export const FakeCalendar = styled.div`
|
||||
user-select: none;
|
||||
|
||||
& div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-gap: 2px;
|
||||
}
|
||||
& .days span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3px 0;
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
opacity: .7;
|
||||
@media (max-width: 350px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
& .dates span {
|
||||
background-color: ${props => props.theme.primaryBackground};
|
||||
border: 1px solid ${props => props.theme.primaryLight};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
|
||||
&.selected {
|
||||
color: #FFF;
|
||||
background-color: ${props => props.theme.primary};
|
||||
border-color: ${props => props.theme.primary};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const FakeTimeRange = styled.div`
|
||||
user-select: none;
|
||||
background-color: ${props => props.theme.primaryBackground};
|
||||
border: 1px solid ${props => props.theme.primaryLight};
|
||||
border-radius: 3px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
margin: 38px 6px 18px;
|
||||
|
||||
& div {
|
||||
height: calc(100% + 20px);
|
||||
width: 20px;
|
||||
border: 1px solid ${props => props.theme.primary};
|
||||
background-color: ${props => props.theme.primaryLight};
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
|
||||
&:after {
|
||||
content: '|||';
|
||||
font-size: 8px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${props => props.theme.primaryDark};
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
bottom: calc(100% + 8px);
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
& .start {
|
||||
left: calc(${11 * 4.1666666666666666}% - 11px);
|
||||
}
|
||||
& .end {
|
||||
left: calc(${17 * 4.1666666666666666}% - 11px);
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: ${11 * 4.1666666666666666}%;
|
||||
right: calc(100% - ${17 * 4.1666666666666666}%);
|
||||
top: 0;
|
||||
background-color: ${props => props.theme.primary};
|
||||
border-radius: 2px;
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { useHistory, Link } from 'react-router-dom';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
|
|
@ -242,8 +242,10 @@ const Home = ({ offline }) => {
|
|||
<StatLabel>Availabilities entered</StatLabel>
|
||||
</Stat>
|
||||
</Stats>
|
||||
<P>Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.</P>
|
||||
<P>Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.<br /><Link to="/how-to">Learn more about how to Crab Fit</Link>.</P>
|
||||
{/* eslint-disable-next-line */}
|
||||
<P>Create a lot of Crab Fits? Get the <a href="https://chrome.google.com/webstore/detail/crab-fit/pnafiibmjbiljofcpjlbonpgdofjhhkj" target="_blank">Chrome extension</a> or <a href="https://addons.mozilla.org/en-US/firefox/addon/crab-fit/" target="_blank">Firefox extension</a> for your browser!</P>
|
||||
{/* eslint-disable-next-line */}
|
||||
<P>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.</P>
|
||||
<P>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>.</P>
|
||||
</StyledMain>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
export { default as Home } from './Home/Home';
|
||||
export { default as Event } from './Event/Event';
|
||||
export { default as Create } from './Create/Create';
|
||||
export { default as Help } from './Help/Help';
|
||||
|
|
|
|||
Loading…
Reference in a new issue