Simple tags for user cards on search page #8256
Conversation
|
@eddiejaoude or anyone passing through, still playing with this but wanted to show the first iteration. As there are numerous ways folks use tags, some cards work well and otehrs do not One idea to address this is to limit the amount of tags shown on the card, however, in some cases this may confuse the users during search which is what the point of this issue is Let me know your thoughts/ideas so far Screenshot |
|
I also would love to hear thoughts about changing the color to the border. I kept it the same as the Tag component for continuity, but with a smaller visual area, some color to break things up could look better. Let me know your thoughts on overall style as well |
|
I agree with the idea of keeping the tags to a limited number as it would create uniformity, imo users should see to it that which tags come on their profile but it might get tedious to implement so ig let's keep the first 3 or 4 tags as the user themselves entered them in that priority order. |
|
|
@sandramsc and @accodes21 Thank you so much for your thoughts. Re: users selecting which tags show on search - this would defeat the purpose of adding the tags which is to make it clear to a user searching by tag why the profiles were returned. I am potentially considering another direction or iteration after this that would make sure to always highlight which tag is relevant to the search term you entered. So this issue is not about personalization, but user experience of utilizing the search and getting back results that make sense. Appreciate your thoughts and discussion so far!! Will look into truncating when I get back to this but if I go that route, it must order the tags aligned with the search terms which adds more complexity to the issue. |
|
@amandamartin-dev what do you think about a 'search by tag'/'search by user' toggle at the top? |
|
Sorry for missing the notification Amanda! This is a challenge with the same, could I throw a curve ball and suggest using a different card layout? Maybe making the profile pic smaller and to the size, this is from one of the tailwind paid examples (let me know if you would like me to share the code) 
|
Hey Chimnay! We already have the tag search, the issue is you don't see tags in the profile cards so it's confusing. Unless I'm misunderstanding your suggestion |
I think it can't hurt to mock up a few options in this case. This isn't critical so I think okay if we take some time on the right UI. I'll check it out! I think I still have the log in for the components |
|
Thanks Amanda, have a look at the tailwind components and let me know which ones you would like the code for |
|
@eddiejaoude tested a horizontal mock. I think the vertical is still the best option here because the horizontal looks very empty when the profile has no tags. Thinking of going with Dan's suggestion to show only tags that match search terms as part of the output (up to 3 or whatever fits well) and keeping the vertical card. Can also abandon this route altogether if it's just getting to be too much in the cards. Lmk what you thinK!
|
|
Thanks @amandamartin-dev for the example 👍 I don't mind, I am not sure there is a "perfect" solution. Just a wild idea, if there are no tags and looks empty, could we add something else in its place to look less empty? But I there is a better layout then ignore this suggestion - I am just thinking out loud |
I think in the spirit of collaboration, I am going to move forward as is and then once the community sees it I'm sure some more ideas will arise. The more I look at it, the profiles that are shorter in the cards don't bother me and will perhaps inspire folks to add tags! Going to move forward with this and clean up the code and push it to review so we can iterate from there. Wdyt? Ful page on load for reference |
…tin-dev/LinkFree into profile-card-with-tags
Yes! Good catch, missed the 3 liners. Thanks. Will get back to this later this week to wrap it up |
|
@eddiejaoude As I looked into this, it was impossible to decide where to split the tags as folks choose varying word length for tags. As the data is not all the same, rather than split at an arbitrary amount of tags I chose to solve this by setting a max height on the div containing the tags and set the overflow to hidden. This allowed for the most tags possible to show based on the tag size. If you prefer me to also split the data out, I can but I will still leave this code in place as the number of tags could still be too long for the container if the character length per tag is long. Take a look and let me know! Ready for review |
| {name} | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Now we have 2 tag components, should we use a tag folder and have them both in there?
|
Looks great 👍 , just 1 small comment |
| import FallbackImage from "@components/FallbackImage"; | ||
| import TagSimple from "@components/TagSimple"; | ||
|
|
||
| export default function UserHorizontal({ profile }) { |
There was a problem hiding this comment.
I don't think UserCard is used anymore, we should probably remove it
* feat: tags for user cards on search page (#8256) * new tag component, user card modifications * revert userCard, add userHorizontal * update test to reflect new search page layout * remove comments * clean up tag component * limit height of tags div, hide overflow --------- Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com> * fix: search card pr * fix: removed unused story --------- Co-authored-by: Amanda <97615019+amandamartin-dev@users.noreply.github.com>
Fixes Issue #8217
Closes #8217
Changes proposed
added a new tag component stripped for the user cards
added a horizontal version of the user cards with tags
follow up issue to be created for this after merge to highlight tags based on search terms
Check List (Check all the applicable boxes)
Screenshots
Note to reviewers