scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Event created date

Browse source
This commit is contained in:
Ben Grant 2021-05-12 22:05:43 +10:00
parent 87b36e417d
commit a73eb76d43
2 changed files with 27 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
crabfit-frontend/src/pages/Event/Event.tsx
View file

@ -6,6 +6,7 @@ import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc'; import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone'; import timezone from 'dayjs/plugin/timezone';
import customParseFormat from 'dayjs/plugin/customParseFormat'; import customParseFormat from 'dayjs/plugin/customParseFormat';
import relativeTime from 'dayjs/plugin/relativeTime';
import { import {
Center, Center,
@ -23,6 +24,7 @@ import {
Logo, Logo,
Title, Title,
EventName, EventName,
EventDate,
LoginForm, LoginForm,
LoginSection, LoginSection,
Info, Info,
@ -40,6 +42,7 @@ import timezones from 'res/timezones.json';
dayjs.extend(utc); dayjs.extend(utc);
dayjs.extend(timezone); dayjs.extend(timezone);
dayjs.extend(customParseFormat); dayjs.extend(customParseFormat);
dayjs.extend(relativeTime);
const Event = (props) => { const Event = (props) => {
const timeFormat = useSettingsStore(state => state.timeFormat); const timeFormat = useSettingsStore(state => state.timeFormat);
@ -283,6 +286,7 @@ const Event = (props) => {
{(!!event || isLoading) ? ( {(!!event || isLoading) ? (
<> <>
<EventName isLoading={isLoading}>{event?.name}</EventName> <EventName isLoading={isLoading}>{event?.name}</EventName>
<EventDate isLoading={isLoading} title={event?.created && dayjs.unix(event?.created).format('h:mma D MMMM, YYYY')}>{event?.created && `Created ${dayjs.unix(event?.created).fromNow()}`}</EventDate>
<ShareInfo <ShareInfo
onClick={() => navigator.clipboard?.writeText(`https://crab.fit/${id}`) onClick={() => navigator.clipboard?.writeText(`https://crab.fit/${id}`)
.then(() => { .then(() => {

24
crabfit-frontend/src/pages/Event/eventStyle.ts
View file

@ -24,7 +24,7 @@ export const Title = styled.span`
export const EventName = styled.h1` export const EventName = styled.h1`
text-align: center; text-align: center;
font-weight: 800; font-weight: 800;
margin: 20px 0 14px; margin: 20px 0 5px;
${props => props.isLoading && ` ${props => props.isLoading && `
&:after { &:after {
@ -39,6 +39,28 @@ export const EventName = styled.h1`
`} `}
`; `;
export const EventDate = styled.span`
display: block;
text-align: center;
font-size: 14px;
opacity: .8;
margin: 0 0 10px;
font-weight: 500;
letter-spacing: .01em;
${props => props.isLoading && `
&:after {
content: '';
display: inline-block;
height: 1em;
width: 200px;
max-width: 100%;
background-color: ${props.theme.loading};
border-radius: 3px;
}
`}
`;
export const LoginForm = styled.form` export const LoginForm = styled.form`
display: grid; display: grid;
grid-template-columns: 1fr 1fr 100px; grid-template-columns: 1fr 1fr 100px;