search

unstructuredstudio / zubhub

Creative Education Platform
https://unstructured.studio/zubhub
GNU Affero General Public License v3.0
49 stars 165 forks source link

Search autocomplete option's main text shrinks before short text #419

Open AndrewLester opened 2 years ago

AndrewLester commented 2 years ago

Describe the bug Search autocomplete option's main text is shrinking before their short text when the option's space is limited. See below:

image

To Reproduce

  1. Go to https://zubhub.unstructured.studio/
  2. Shrink screen to mobile size
  3. Click on the search bar
  4. Type a query
  5. Notice the main search (project title) shrinks before its short text (creator name)

Expected behavior The creator name gets shrunk first (truncated by ellipsis), then the main text. To do this, you'll probably want to add flex shrink to the shortText inside the Option component. Give the shortText a higher flex shrink than the main text.

Deepanshu039 commented 2 years ago

@tuxology , @srish I would like to work on this issue.

Deepthi562 commented 2 years ago

@AndrewLester, I would like to work on this. Please assign. Thank you.

srish commented 2 years ago

Thanks @AndrewLester for filing the issue! Assigning it to @Deepanshu039 on first come first serve basis :)

Deepthi562 commented 2 years ago

@srish can I still work on this?

srish commented 2 years ago

@Deepthi562 Only one person can work on an issue at a time :)

tuxology commented 1 year ago

We should update #467 to fix this 🙏

brrkrmn commented 11 months ago

@tuxology I was working on this issue but want to ask some questions before opening a PR

  1. I realized that in NavBar.jsx, when searching for projects, the options are filtered to only show the logged-in user's projects. Is this what we want? I think the user should be able to search for other people's projects so I'm not sure if this is intentional.

  2. Is it okay to show the project title in two lines for small screen so that more content is shown? I used textWrap to wrap text up to 2 lines but the ellipsis is not compatible with textWrap so the title does not look like it continues. I was thinking of using -webkit-line-clamp which allows for ellipsis.

  3. I tried 2 different implementations to style. Which one do you think is better?

    • The first one keeps the username next to title for large screens and places it under title for small screens Screenshot 2023-10-20 at 10 48 14 Screenshot 2023-10-20 at 10 48 28
    • The second one places the username whenever the title is long. This one is more flexible but may look messy. Screenshot 2023-10-20 at 10 56 11 Screenshot 2023-10-20 at 10 56 22

  4. Another thing, we currently do not have a limit for the username, so it can be very long, which makes the search options to look like this: Screenshot 2023-10-20 at 11 50 09 Should I account for this in this PR or leave it because long usernames also distort many other things in other views, so there can be a limit for that in the validation schema

NdibeRaymond commented 10 months ago

@tuxology I was working on this issue but want to ask some questions before opening a PR

  1. I realized that in NavBar.jsx, when searching for projects, the options are filtered to only show the logged-in user's projects. Is this what we want? I think the user should be able to search for other people's projects so I'm not sure if this is intentional.
  2. Is it okay to show the project title in two lines for small screen so that more content is shown? I used textWrap to wrap text up to 2 lines but the ellipsis is not compatible with textWrap so the title does not look like it continues. I was thinking of using -webkit-line-clamp which allows for ellipsis.
  3. I tried 2 different implementations to style. Which one do you think is better?
  • The first one keeps the username next to title for large screens and places it under title for small screens Screenshot 2023-10-20 at 10 48 14 Screenshot 2023-10-20 at 10 48 28
  • The second one places the username whenever the title is long. This one is more flexible but may look messy. Screenshot 2023-10-20 at 10 56 11 Screenshot 2023-10-20 at 10 56 22
  1. Another thing, we currently do not have a limit for the username, so it can be very long, which makes the search options to look like this: Screenshot 2023-10-20 at 11 50 09 Should I account for this in this PR or leave it because long usernames also distort many other things in other views, so there can be a limit for that in the validation schema

I think I can attempt to answer most of your questions @brrkrmn:

  1. Great observation. You are right this is wrong in my opinion. I implemented the first version of the search endpoint so this is either an oversight on my part or on the part of whoever modified it later. @tuxology any reason this is like this? wondering if this is a thoughtful decision or just regression. If it is regression we might need to fix it. Feel free to create an issue for this @brrkrmn if it turns out to be a regression.
  2. I don't think I have the answer to this. Do we have a design for this in the figma files? if not you can create an issue for this and maybe some of the designers we have around can take it up.
  3. I think we need a second option where the username is always placed on the second line no matter what. That is more consistent and makes more sense to me.
  4. This is also either an oversight or a regression. I don't think you should try to handle it here, this is something that should be addressed when the username is being assigned. Also this is a potential issue that you can create @brrkrmn