bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Date display improvements

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-11-30 18:34:05 +01:00
parent 6435f33af9
commit 13ccc3fe7f
4 changed files with 30 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/components/ui/stack/stack.tsx
View file

@ -52,7 +52,7 @@ const Stack = React.forwardRef<HTMLDivElement, IStack>((props, ref: React.Legacy
<Elem
{...filteredProps}
ref={ref}
className={classNames('flex flex-col items', {
className={classNames('flex flex-col', {
// @ts-ignore
[spaces[space]]: typeof space !== 'undefined',
// @ts-ignore

2
app/soapbox/components/ui/textarea/textarea.tsx
View file

@ -28,7 +28,7 @@ const Textarea = React.forwardRef(
{...props}
ref={ref}
className={classNames({
'bg-white dark:bg-gray-900 shadow-sm block w-full sm:text-sm rounded-md text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
'bg-white dark:bg-transparent shadow-sm block w-full sm:text-sm rounded-md text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
true,
'font-mono': isCodeEditor,
'text-red-600 border-red-600': hasError,

5
app/soapbox/features/event/components/event-date.tsx
View file

@ -22,12 +22,13 @@ const EventDate: React.FC<IEventDate> = ({ status }) => {
if (event.end_time) {
const endDate = new Date(event.end_time);
const sameDay = startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear();
const sameYear = startDate.getFullYear() === endDate.getFullYear();
const sameDay = startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && sameYear;
if (sameDay) {
date = (
<>
<FormattedDate value={event.start_time} year='2-digit' month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' />
<FormattedDate value={event.start_time} year={sameYear ? undefined : '2-digit'} month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' />
{' - '}
<FormattedDate value={event.end_time} hour='2-digit' minute='2-digit' />
</>

29
app/soapbox/features/event/event-information.tsx
View file

@ -88,7 +88,12 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
const renderEventDate = useCallback(() => {
const event = status?.event;
if (!event?.start_time) return null;
const startDate = new Date(event.start_time);
const endDate = new Date(event.end_time);
if (!startDate) return null;
const sameDay = endDate && startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear();
return (
<Stack space={1}>
@ -98,10 +103,26 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
<HStack space={2} alignItems='center'>
<Icon src={require('@tabler/icons/calendar.svg')} />
<Text>
<FormattedDate value={event.start_time} year='numeric' month='long' day='2-digit' weekday='long' hour='2-digit' minute='2-digit' />
{event.end_time && (<>
<FormattedDate
value={startDate}
year='numeric'
month='long'
day='2-digit'
weekday='long'
hour='2-digit'
minute='2-digit'
/>
{endDate && (<>
{' - '}
<FormattedDate value={event.end_time} year='numeric' month='long' day='2-digit' weekday='long' hour='2-digit' minute='2-digit' />
<FormattedDate
value={endDate}
year={sameDay ? undefined : 'numeric'}
month={sameDay ? undefined : 'long'}
day={sameDay ? undefined : '2-digit'}
weekday={sameDay ? undefined : 'long'}
hour='2-digit'
minute='2-digit'
/>
</>)}
</Text>
</HStack>