Recommendation bar text shrinking bug

[Deepanshu039]

Summary

fixed the shrinking of main text (title of project) in the search bar.

Description of PR here...
Closes #419

Fixed Screenshots

(Insert image, only for frontend)

[tuxology]

@Deepanshu039 Can you paste a screenshot of a case where the title is very very long like "Making a windmill out of a toothpaste box which is green in color"

[tuxology]

LGTM 🏳️‍🌈 Maybe we can merge this if long title case is handled properly

[Deepanshu039]

@tuxology this is how it is going to handle a very long text..

because in this case there won't be enough space available so in recommendation bar it first tries to show the max length of title considering there should be at-least some space left for creator_name(unique_name).

In these cases only the minWidth will be available to the creator_name provided(at last we cannot just provide whole space to the title). There should be some keywords related to the creator_name in the bar.

Since the title is so large and cannot be fitted in maxWidth provided, so eventually it hides from there.

[NdibeRaymond]

The design of this feels wrong imo. can we come up with a better design?

[Deepanshu039]

The design of this feels wrong imo. can we come up with a better design?

@NdibeRaymond Wouldn't that be considered as another issue because I only fixed the issue which was asked i.e. shrinking of the main title before the creator name?

[NdibeRaymond]

Or it can all be bundled into one issue

[Deepanshu039]

Or it can all be bundled into one issue

yeah that is also a great idea.

[Deepanshu039]

Or it can all be bundled into one issue

@NdibeRaymond what type of design change do you suggest if you could just provide a hint.

[NdibeRaymond]

I'm not too opinionated about it, but do we really need to have a thumbnail of project image and the project creator name in a project search autocomplete @tuxology? I still feel that should be removed. They are costly to load and really don't do much except occupy space and make it harder to view the actual title that is being searched. Looking at the screenshots above, you can see that the title of project is paying the price. We can't even see the title properly

[Deepanshu039]

I'm not too opinionated about it, but do we really need to have a thumbnail of project image and the project creator name in a project search autocomplete @tuxology? I still feel that should be removed. They are costly to load and really don't do much except occupy space and make it harder to view the actual title that is being searched. Looking at the screenshots above, you can see that the title of project is paying the price. We can't even see the title properly

@NdibeRaymond @tuxology if you could tell me what content to be shown in the search bar I can make a new commit.

[tuxology]

I'm not too opinionated about it, but do we really need to have a thumbnail of project image and the project creator name in a project search autocomplete

Ok, so @NdibeRaymond brings a good point to the table. This "added feature" is only useful when there is a large screen, otherwise, this is not a good utilization of space. While the addition of an image from he project being fetched is nice in terms of identifying if the searched result is what you want, doing this on smaller screen destroys the UX. However, there is a good middle ground I think. On smaller screen we can remove the name of creator and the project image. @Deepanshu039 Can you do that and then we can merge it and create a more broader issue about improving UX further?

[Deepanshu039]

@tuxology @NdibeRaymond let me understand it, what you are suggesting here is, that the title, creator_name, and image should be shown in desktop mode while in the mobile size only the title should show no need to show creator_name and image.
Am I getting it right?

[tuxology]

@tuxology @NdibeRaymond let me understand it, what you are suggesting here is, that the title, creator_name, and image should be shown in desktop mode while in the mobile size only the title should show no need to show creator_name and image. Am I getting it right?

Yes, precisely 👍

[AndrewLester]

I'm not so sure I agree that the project images shouldn't display on mobile. Let's hypothesize that a certain project is popular on the site and a number of creators make projects with a similar title to showcase it. Without images or creator titles this looks like:

There's no way to tell whose project is whose, when you're probably looking for a specific one because you either know another creator or just want to click the one with a preview that calls out to you.

This autocomplete type isn't unique, observe LinkedIn's on mobile for example.

In order to reduce image bandwidth, perhaps a query string to the thumbnails should be introduced to download smaller sizes.

[Deepanshu039]

I'm not so sure I agree that the project images shouldn't display on mobile. Let's hypothesize that a certain project is popular on the site and a number of creators make projects with a similar title to showcase it. Without images or creator titles this looks like:

There's no way to tell whose project is whose, when you're probably looking for a specific one because you either know another creator or just want to click the one with a preview that calls out to you.

This autocomplete type isn't unique, observe LinkedIn's on mobile for example.

In order to reduce image bandwidth, perhaps a query string to the thumbnails should be introduced to download smaller sizes.

so @tuxology @NdibeRaymond @AndrewLester I am a little confused here with the suggestions, not sure whether to keep the project image in the mobile size or not.

[Deepanshu039]

yeah @AndrewLester the image indeed makes the suggestions more helpful but @NdibeRaymond @tuxology rightly pointed out that the image breaks the UI on smaller screens, so I was thinking about a workaround and this is what I came up with

Not sure whether this aligns with our needs, But can you please review the design and suggest some improvements if this is of any use for our new search bar. @tuxology @NdibeRaymond @AndrewLester

Thank you so much for your time.

[tuxology]

@Deepanshu039 Project image is a good idea to keep in the design - esp. when its clear we are searching for projects. A visual representation is a good way to navigate in terms of UX and will help the user be confident about a project they are about to click is the one they remember. However, do note that on smaller screens, it will be a bit difficult to keep the UX consistent given the space. We can have 3 grades - on really smaller screens (eg 5 inch screens or smaller resolutions) we will show just text.

Another point to note is that we need to also tell users that if nothing was discovered in the suggestions, they can still hit the Enter button or click somewhere to go to a dedicated search results page. One way to do is to limit the list we have to 5-7 elements and have a last element called "More Results >" which the users can click and see all detailed results. For example, typing "light" on search bar shows 13 suggestions in dropdown, but when you click enter, you get 17 results. So we need to tell users that there could be more results awaiting. I would say, lets finish this PR by first implementing you suggestion #433 (comment) @Deepanshu039 and then we can create another PR for "More Results >" idea.

@AndrewLester yes, I do agree to #433 (comment) We will go ahead with including images by default for most larger screen sizes. We won't implement the thumbnail thing yet. That is another layer of complexity where we have to create thumbnails and cache them on server properly first.

[tuxology]

We are now carrying forward work here this in this PR : #467 Closing this.