search

ONEARMY / community-platform

A platform to build useful communities that aim to tackle global problems
https://platform.onearmy.earth
MIT License
1.14k stars 386 forks source link

[feature request] Improving the display of the date #3653

Closed dalibormrska closed 3 weeks ago

dalibormrska commented 3 months ago

This ticket is part of series of 7 tickets concluding a design task focusing on improving design and usability of comments feature. Here you can find the Figma file for more context.

4/7 - Improving the display of the date

Is your feature request related to a problem? Please describe. Currently the date in in a hard-to read format, making it visually cluttered and also it takes time for the user to figure out exactly when was the comment or other content made or edited. Some countries have DD-MM-YYYY and some MM-DD-YYYY formats, so it is not entirely clear which one is month and which one is day.

image

Additionally the text that says '(Edited)' is in a different font and size. In other parts of the platform the solution is better, where the information about editing is incorporated into the date.

image

Describe the solution you'd like Turn date info into what time has passed - 2 hours ago, 5 minutes ago, 1 year ago.
Maybe there is some existing library or something that can be implemented, also considering i18n (In english there are only 2 gramatical formulations, such as '1 year ago' and '2 years ago', but in Czech for example you have 'před 1 rokem', 'před 2 roky', 'před 5 lety').

Additionally, it should have a simple title on hover, like in this example:

image

Ticket scope to include (notes from Ben):

  • Create component in the library to cover this
  • At least one example in the end-to-end tests of the 'just now' render of the component displayed.
  • List everywhere it should go:
    • Comments and nested comments across all modules where there are comments
    • Research module listing
    • Single research and research updates
    • Questions module listing
    • Single question
    • Single How-To
    • In academy pages (I am aware that it is a different system, so it is more of a Could-Have, not a Must-Have)

Describe alternatives you've considered An easier alternative would be to just spell out the month into a format like this: 1-Feb-2023, however still a harder to read format.

Additional context See the milestone

prashik0202 commented 3 months ago

i know how to format data and display you can assign this issue to me

davehakkens commented 3 months ago

How is this going @prashik0202 ?

prashik0202 commented 3 months ago

@davehakkens image

prashik0202 commented 3 months ago

@davehakkens i want to install a package called "moment" which helps in display like '2 min ago'. but I'm unable to install it, what command should i use to handle this.

mariojsnunes commented 3 months ago

@davehakkens i want to install a package called "moment" which helps in display like '2 min ago'. but I'm unable to install it, what command should i use to handle this.

Dont install moment, use date-fns

mariojsnunes commented 3 months ago

@davehakkens image

Day, month, year. Not month day year, please! I don't think the week day is relevant

prashik0202 commented 3 months ago

@davehakkens image

and relative time: image

davehakkens commented 3 months ago

The relative time looks good and what originally intended with the issue. 👆

Is it possible to show the precise date when hovering? AS this example afbeelding

dalibormrska commented 3 months ago

The relative time looks good and what originally intended with the issue. 👆

Is it possible to show the precise date when hovering? AS this example afbeelding

This is usually done with HTML Title attribute, should be very easy to implement. https://www.w3schools.com/tags/att_global_title.asp

prashik0202 commented 3 months ago

@davehakkens check out image

davehakkens commented 3 months ago

Could you make a Pull Request @prashik0202 so we can have a look?

onearmy-bot commented 2 months ago

:tada: This issue has been resolved in version 1.197.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

dalibormrska commented 1 month ago

Great job @prashik0202 ! Looks awesome and works really well for the comments, I'm very glad to see the change implemented! Now the task would be to implement this date display consistently throughout the platform, as it is formulated in the scope of the ticket above. Since currently in How-tos, Research or Questions the items still have the old format of the date display. Would you be up for it? :)))

image
onim-at commented 1 month ago

Hello @dalibormrska, I could help with this task if @prashik0202 is not available

benfurber commented 1 month ago

Awesome, thanks @onim-at - it's yours.

Would be delighted if you were able to contribute again in the future, @prashik0202. :)

onearmy-bot commented 3 weeks ago

:tada: This issue has been resolved in version 1.216.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: