activist-org / activist

An open-source activism platform
https://activist.org
GNU Affero General Public License v3.0
239 stars 194 forks source link

Move search component menu to the top right corner below medium breakpoint #611

Closed andrewtavis closed 10 months ago

andrewtavis commented 10 months ago

Terms

Description

Something that would be great to have for the three dot kebab menu on search result components would be that it moves to the top right corner when the screen is at the small breakpoint or below (for mobile devices). These search components can be found on the activist home page. The menu component that we need to move is MenuSearchResult. The change would need to happen in all of the search result components where it is used.

For example:

<MenuSearchResult searchResultType="event" />  # we want this to have class="hidden md:block" to show it

# We'd then have another MenuSearchResult component that is at the top right
<MenuSearchResult class="absolute md:hidden" searchResultType="event" />  # including some padding

Contribution

Happy to support someone with interest in working on this!

andrewtavis commented 10 months ago

An example of how the final components should look can be found on the designs in Figma 😊

bharath637462 commented 10 months ago

hey can i work on this?

andrewtavis commented 10 months ago

Thank you, @bharath637462! Please let me know if you need any help 😊 Looking forward to working with you on this!

andrewtavis commented 10 months ago

Note that for the MenuSearchResult, we need the searchResultType property to match the search result like event forCardSearchResultEvent and the same for organizations, resources and users :)

andrewtavis commented 10 months ago

Hey @bharath637462 👋 How's everything going here? Were you able to bring down the current changes and start working on a new implementation? :)

bharath637462 commented 10 months ago

yes @andrewtavis I am able to take the current changes working on new implementation.

On Sun, Dec 24, 2023 at 6:47 PM Andrew Tavis McAllister < @.***> wrote:

Hey @bharath637462 https://github.com/bharath637462 👋 How's everything going here? Were you able to bring down the current changes and start working on a new implementation? :)

— Reply to this email directly, view it on GitHub https://github.com/activist-org/activist/issues/611#issuecomment-1868515325, or unsubscribe https://github.com/notifications/unsubscribe-auth/A34TQ4EFOAIN6LRHZ7FZCN3YLATPTAVCNFSM6AAAAABA3VDFEKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRYGUYTKMZSGU . You are receiving this because you were mentioned.Message ID: @.***>

andrewtavis commented 10 months ago

Hey @bharath637462 👋 Just a quick note that I'd avoid using your email to reply to things or just be careful if you do as your original message sent a notification to the wrong person. I've edited the message to fix it, but it looks like you used the @ functionality of your email, which when translated to a message here broke but still @ notified someone else as the first part matched the user name of a person on GitHub who's not associated with activist.

No stress, but just be careful!

andrewtavis commented 10 months ago

Closed via #633 and fdea695 where the code suggestion was applied in the correct place and a function was added to close the tooltip when clicking outside of it for mobile :) Thanks @bharath637462!