refactor: improve announcements pages

[JoaoCoelho2003]

• Fixed the image uploader component;
• Refactor the existing announcement pages;
• Made the announcements page exclusive to members of a publishing organization;
• Improve the announcement feed design.

New Announcement Page

The design of the New Announcement page has been improved, and in the process, the previously malfunctioning image uploader was fixed.

Announcements Page Access

Previously, the announcements page was a general feed available to all users. This functionality has been updated:

• The page is now exclusive to organization members, allowing them to manage announcements within their respective organizations;
• All routes leading to the announcements page have been revised. To access these pages, routes must now follow the format: /organizations/{organization_id}/announcements

Screencast.from.2024-11-21.00-52-13.webm

Announcements Feed Page Changes

The tabs at the top of the announcements feed page were removed since the page is no longer used as a public feed but as a monitoring tool.

#435

[ruilopesm]

There's a lack of padding on every page. Make sure the padding obeys the one imposed by the page component. In the future, we should make page's body be padded automatically 💡

[FilipeR13]

I think it would be cool if the show page followed the same design as the edit/new announcement page when there’s an image to display. What do you think?

[MarioRodrigues10]

We can have 2 approaches for this scenario:

We either limit the characters at index page and if the user wants the full information should open it and see the whole announcement context, or we can keep the whole text and remove the show page since won't be necessary anymore.

Which one do you like more @JoaoCoelho2003 ?

I would also like your input for this case @joaodiaslobo @ruilopesm . 🙌

[JoaoCoelho2003]

I personally prefer limiting the number of lines shown per announcement on the respective pages @MarioRodrigues10.

[joaodiaslobo]

@MarioRodrigues10

I would also like your input for this case @joaodiaslobo @ruilopesm . 🙌

Keeping the whole text in the feed is definitely not the way to go but I also don't think we should limit what the organizations can write way too much (there still needs to exist a limit, but a bigger one).
Maybe we should truncate the text on the post and allow the users to see the full content in the show page by clicking on the it.

[MarioRodrigues10]

@joaodiaslobo There's already a lot of text being truncated at the application in different ways, in order to achieve that I think @JoaoCoelho2003 can create a general function at helpers.ex and truncate for this case only.

In the future, other people should reuse that function and truncate their text aswell if they need.

[JoaoCoelho2003]

@joaodiaslobo

Keeping the whole text in the feed is definitely not the way to go but I also don't think we should limit what the organizations can write way too much (there still needs to exist a limit, but a bigger one). Maybe we should truncate the text on the post and allow the users to see the full content in the show page by clicking on the it.

In my opinion, we should truncate the text in the feed and, as Mario said, for the user to see the full post he would have to press it and check the announcement. About the text size limit, probably put a limit of around 500 characters or something like that.

The text size limit varies a lot depending on the platform, but since this is an announcement, and announcements typically don’t require much text as they are meant to be brief, we could consider setting the limit lower.

[MarioRodrigues10]

I think 500 characters could be too much, check Instagram UI/UX for posts in either desktop or mobile I really like what they did, they truncate based on the text size.

[ruilopesm]

We already have a function for truncating text, if I'm not mistaken. maybe_slice_string/2 (we could change its name to truncate now that I think of it) 🙏