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 timezone from 'dayjs/plugin/timezone';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import relativeTime from 'dayjs/plugin/relativeTime';
import {
Center,
@ -23,6 +24,7 @@ import {
Logo,
Title,
EventName,
EventDate,
LoginForm,
LoginSection,
Info,
@ -40,6 +42,7 @@ import timezones from 'res/timezones.json';
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(customParseFormat);
dayjs.extend(relativeTime);
const Event = (props) => {
const timeFormat = useSettingsStore(state => state.timeFormat);
@ -283,6 +286,7 @@ const Event = (props) => {
{(!!event || isLoading) ? (
<>
<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
onClick={() => navigator.clipboard?.writeText(`https://crab.fit/${id}`)
.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`
text-align: center;
font-weight: 800;
margin: 20px 0 14px;
margin: 20px 0 5px;
${props => props.isLoading && `
&: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`
display: grid;
grid-template-columns: 1fr 1fr 100px;