refactor: improve announcements pages #530
Conversation
JoaoCoelho2003
requested review from
nunom27,
joaodiaslobo,
ruilopesm,
MarioRodrigues10,
FilipeR13,
AfonsoMartins26 and
faria-s
ruilopesm
changed the title
|
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? |
|
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 . 🙌 |
|
I personally prefer limiting the number of lines shown per announcement on the respective pages @MarioRodrigues10. |
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). |
|
@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 In the future, other people should reuse that function and truncate their text aswell if they need. |
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. |
|
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. |
|
We already have a function for truncating text, if I'm not mistaken. |
|
|
||
| use AtomicWeb, :component | ||
|
|
||
| def announcement_card(assigns) do |
There was a problem hiding this comment.
Should be a bottom border in the last announcement
| <p class="text-sm font-medium text-zinc-700"><%= @announcement.organization.name %></p> | ||
| <p class="text-xs text-gray-500"> | ||
| <span class="sr-only">Published on</span> | ||
| <time><%= relative_datetime(@announcement.inserted_at) %></time> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div class="px-4 py-2"> | ||
| <p class="text-lg font-semibold text-zinc-900" title={@announcement.title}> |
There was a problem hiding this comment.
The activitys component is using text-gray instead of text-zinc. This is a issue in all code base, we should normalize this in another PR
| </div> | ||
| <%= if @announcement.image do %> | ||
| <div class="h-auto w-full overflow-hidden"> | ||
| <img class="h-full w-full rounded-xl object-cover" src={Uploaders.Post.url({@announcement.image, @announcement}, :original)} alt="Announcement Image" /> |
There was a problem hiding this comment.
I think in the mobile version the image doenst look really good with this level of rounded
| </.tab> | ||
| </.link> | ||
| </.tabs> | ||
| <.tabs></.tabs> |
There was a problem hiding this comment.
This solution to add the border in the page its not that good 😅, but I dont really know other solution. @joaodiaslobo any idea?
There was a problem hiding this comment.
The page component actually has a parameter to do this, called bottom_border. Unfortunately, it appears this functionality stopped working on a previous PR 😅.
@JoaoCoelho2003 Feel free to fix it and use it on this PR by making the following change in the page component:
def page(assigns) do
~H"""
<div class="flex min-h-full flex-col items-stretch justify-between lg:flex-row">
<div class="min-h-[100vh] flex w-full flex-col bg-white lg:flex-row lg:border-r">
<main class="relative z-0 mb-10 flex-1 overflow-y-auto focus:outline-none xl:order-last">
<div class={["mx-auto max-w-5xl px-4 sm:px-6 lg:px-8", @bottom_border && "border-b"]}>
<div class="my-6 flex min-w-0 flex-row items-center justify-between"}>
<h1 class="flex-1 select-none truncate text-2xl font-bold text-gray-900">
<%= @title %>
</h1>
<%= render_slot(@actions) %>
</div>
</div>
<%= render_slot(@inner_block) %>
</main>
</div>
</div>
"""
endAnd use it like this:
<.page title="Announcements" bottom_border>
...
By the way, this PR is looking real good! 🤩
Good job! 💪
#435