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

[andrewtavis]

Terms

• [X] I have searched open and closed feature requests
• [X] I agree to follow activist's Code of Conduct

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]

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

[bharath637462]

hey can i work on this?

[andrewtavis]

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

[andrewtavis]

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]

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

[bharath637462]

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]

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]

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!