From 778f29516e67cd6e42b2f7fe9baa2d6c33fe911c Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Thu, 15 Apr 2021 22:11:07 +1000 Subject: [PATCH 1/3] Update instructions for extension --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index eb6655c..fbf3f86 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,9 @@ Align your schedules to find the perfect time that works for everyone. 3. Run `node index.js` in the backend folder to start the API. 4. Run `yarn start` in the frontend folder to start the front end. +### Browser extension +The browser extension in `crabfit-browser-extension` can be tested by first running the frontend, and changing the iframe url in the extension's `popup.html` to match the local Crab Fit. Then it can be loaded as an unpacked extension in Chrome to test. + ## Deploy ### Frontend @@ -20,3 +23,6 @@ Align your schedules to find the perfect time that works for everyone. ### Backend 1. Deploy the backend `cd crabfit-backend && gcloud app deploy --project=crabfit` 2. Deploy the endpoints service `cd crabfit-backend && gcloud endpoints services deploy swagger.yaml` + +### Browser extension +Compress everything inside the `crabfit-browser-extension` folder and use that zip to deploy using Chrome web store and Mozilla Add-on store. From ce06b43882a5431a02f4dddd883e702fa383d40a Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Fri, 16 Apr 2021 01:12:18 +1000 Subject: [PATCH 2/3] How to Crab Fit instruction step by step guide --- crabfit-frontend/src/App.tsx | 6 + .../src/components/Legend/legendStyle.ts | 2 +- crabfit-frontend/src/pages/Create/Create.tsx | 2 +- crabfit-frontend/src/pages/Help/Help.tsx | 110 +++++++++++++ crabfit-frontend/src/pages/Help/helpStyle.ts | 144 ++++++++++++++++++ crabfit-frontend/src/pages/Home/Home.tsx | 6 +- crabfit-frontend/src/pages/index.ts | 1 + 7 files changed, 267 insertions(+), 4 deletions(-) create mode 100644 crabfit-frontend/src/pages/Help/Help.tsx create mode 100644 crabfit-frontend/src/pages/Help/helpStyle.ts diff --git a/crabfit-frontend/src/App.tsx b/crabfit-frontend/src/App.tsx index 744e0fb..dca20a4 100644 --- a/crabfit-frontend/src/App.tsx +++ b/crabfit-frontend/src/App.tsx @@ -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 = () => { }> + )} /> + ( + }> + + )} /> ( }> diff --git a/crabfit-frontend/src/components/Legend/legendStyle.ts b/crabfit-frontend/src/components/Legend/legendStyle.ts index 57469ee..3d53896 100644 --- a/crabfit-frontend/src/components/Legend/legendStyle.ts +++ b/crabfit-frontend/src/components/Legend/legendStyle.ts @@ -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%; diff --git a/crabfit-frontend/src/pages/Create/Create.tsx b/crabfit-frontend/src/pages/Create/Create.tsx index 083c8c3..538512e 100644 --- a/crabfit-frontend/src/pages/Create/Create.tsx +++ b/crabfit-frontend/src/pages/Create/Create.tsx @@ -177,7 +177,7 @@ const Create = ({ offline }) => {

Recently visited

{recentsStore.recents.map(event => ( - + {event.name} Created {dayjs.unix(event.created).format('D MMMM, YYYY')} diff --git a/crabfit-frontend/src/pages/Help/Help.tsx b/crabfit-frontend/src/pages/Help/Help.tsx new file mode 100644 index 0000000..291bdf7 --- /dev/null +++ b/crabfit-frontend/src/pages/Help/Help.tsx @@ -0,0 +1,110 @@ +import { useEffect, useState } from 'react'; +import { Link, useHistory } from 'react-router-dom'; + +import { + Button, + Center, + Donate, + AvailabilityViewer, + Legend, +} from 'components'; + +import { + StyledMain, + Logo, + Title, + AboutSection, + Footer, + P, + Step, + FakeCalendar, + FakeTimeRange, +} from './helpStyle'; + +import logo from 'res/logo.svg'; + +const Help = () => { + const { push } = useHistory(); + + useEffect(() => { + document.title = 'How to Crab Fit'; + }, []); + + return ( + <> + + +
+ + CRAB FIT +
+
Create your own
+ + + + +

How to Crab Fit

+

Crab Fit is a tool that helps you when planning events with friends or coworkers. You just create an event, enter your availability, send it out, and see when everyone is free!

+

See below for detailed steps of how to Crab Fit your event.

+ + Step 1 +

Use the form at crab.fit to make a new event. You only need to put in the rough time period for when your event occurs here, not your availability.

+

For example, we'll use "Jenny's Birthday Lunch". Jenny wants her birthday lunch to happen on the same week as her birthday, the 15th of April, but she knows that not all of her friends are available on the 15th. She also doesn't want to do it on the weekend.

+ +
SunMonTueWedThuFriSat
+
11121314151617
+ +

Jenny also knows that since it's a lunch event, it can't start before 11am or go any later than 5pm.

+ +
+
+ + + Step 2 +

Enter your availability for the event you just created.

+

In our example, Jenny now puts in her availability for her birthday lunch. She is free all week, except after 3pm on Tuesday and Wednesday, and before 1pm on Friday.

+ + + Step 3 +

Send the link to everyone you want to come.

+

After Jenny has sent the link to her friends and waited for them to also fill out their availabilities, she can now easily see them all on the heatmap below and choose the darkest area for a time that suits everyone!

+

In this example, 1pm to 3pm on Friday the 16th works for all Jenny's friends.

+ + + + + + +
+ + + +
+ Thank you for using Crab Fit. If you like it, consider donating. + +
+ + ); +}; + +export default Help; diff --git a/crabfit-frontend/src/pages/Help/helpStyle.ts b/crabfit-frontend/src/pages/Help/helpStyle.ts new file mode 100644 index 0000000..2b45abe --- /dev/null +++ b/crabfit-frontend/src/pages/Help/helpStyle.ts @@ -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; + } +`; diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx index 59c1510..c20da01 100644 --- a/crabfit-frontend/src/pages/Home/Home.tsx +++ b/crabfit-frontend/src/pages/Home/Home.tsx @@ -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 }) => { Availabilities entered -

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.

+

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.
Learn more about how to Crab Fit.

{/* eslint-disable-next-line */} +

Create a lot of Crab Fits? Get the Chrome extension or Firefox extension for your browser!

+ {/* eslint-disable-next-line */}

Created by Ben Grant, Crab Fit is the modern-day solution to your group event planning debates.

The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the repository.

 diff --git a/crabfit-frontend/src/pages/index.ts b/crabfit-frontend/src/pages/index.ts index a4f9c82..6fe10e6 100644 --- a/crabfit-frontend/src/pages/index.ts +++ b/crabfit-frontend/src/pages/index.ts @@ -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'; From db2a2687a0e3acf59c27b0da59928ebd88d15f51 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Fri, 16 Apr 2021 01:18:03 +1000 Subject: [PATCH 3/3] Adjust text shadow when title small --- crabfit-frontend/src/pages/Create/createStyle.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crabfit-frontend/src/pages/Create/createStyle.ts b/crabfit-frontend/src/pages/Create/createStyle.ts index d6b37b3..e79b34f 100644 --- a/crabfit-frontend/src/pages/Create/createStyle.ts +++ b/crabfit-frontend/src/pages/Create/createStyle.ts @@ -28,7 +28,7 @@ export const TitleLarge = styled.h1` color: ${props => props.theme.primary}; font-family: 'Molot', sans-serif; font-weight: 400; - text-shadow: 0 4px 0 ${props => props.theme.primaryDark}; + text-shadow: 0 3px 0 ${props => props.theme.primaryDark}; line-height: 1em; `;