Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(fix): search option text shrinking in autocomplete #949

Open
wants to merge 21 commits into
base: master
Choose a base branch
from

Conversation

brrkrmn
Copy link
Collaborator

@brrkrmn brrkrmn commented Oct 24, 2023

The project title in the autocomplete options shrinks, making it hard to identify the project. Following the approach in #467 , I made changes to the option styles so that the title is visible in all screens.

Closes #419

Changes

  • In NavBar.jsx, when searching for projects, the options are filtered to only show the logged-in user's projects. The filtering of the option is removed to show the projects from other users. (I need comments on whether this was a feature or a bug)
  • The image is placed in the left side of the option
  • the username is next to title if there is enough space, and under it when the title is long (this can be changed to make username next to title for big screens, and under it below a certain size, waiting for comments on this)
  • In mobile screens, the long title is clamped into 2 lines to maintain its text to an extent

Screenshots

Here is the 3 different sizes:
Screenshot 2023-10-24 at 12 42 03
Screenshot 2023-10-24 at 12 41 54
Screenshot 2023-10-24 at 12 41 42

And here is the options with different title and username length:
Screenshot 2023-10-24 at 12 42 25

Regarding the username length and other possible placements of it, I encourage you to check my comment

@@ -113,7 +113,7 @@ function PageWrapper(props) {
} else if (searchType === SearchType.PROJECTS) {
completions = await api.autocompleteProjects({ query, token });
completions = completions
.filter(c=>( c.creator.id === props.auth.id && c.publish.type !== 1 ))
// .filter(c=>( c.creator.id === props.auth.id && c.publish.type !== 1 ))
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will delete this line if there is no need to filter the projects and show all of them

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should show all projects here. I think we should remove this line and test if this works fine. This could be a regressions as Raymond suggests here: #419 (comment)

flexGrow: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
//first approach
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the first approach was keeping the username at right for big screens. You can see the comparison here

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets mover username below. I also wanted to highlight that for smaller screens where the title gets split in two lines and we get one more username line below, we need to align all this within the height of the image so everything looks proportional. At this time, it is bleeding from top and bottom a bit. Take design help if needed.

@brrkrmn brrkrmn marked this pull request as ready for review November 2, 2023 04:19
@NdibeRaymond
Copy link
Collaborator

@brrkrmn I left some comments for you on the main issue

@brrkrmn
Copy link
Collaborator Author

brrkrmn commented Nov 23, 2023

@tuxology pushed the changes that you mentioned above:

  • username is now below title,
  • image height is aligned with the information for smaller screens
  • fixed image stretching
  • username is handled in 1 line in case it is long

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Search autocomplete option's main text shrinks before short text
3 participants