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.

Sign up for GitHub

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
Open

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

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
7b4356a
initial
brrkrmn Oct 2, 2023
e71fa87
Merge branch 'master' of https://github.com/brrkrmn/zubhub
brrkrmn Oct 2, 2023
7cc40a0
Merge branch 'master' of https://github.com/brrkrmn/zubhub
brrkrmn Oct 3, 2023
e816669
Merge branch 'master' of https://github.com/brrkrmn/zubhub
brrkrmn Oct 4, 2023
190845f
Merge branch 'master' of https://github.com/brrkrmn/zubhub
brrkrmn Oct 6, 2023
46ce0cc
Merge branch 'unstructuredstudio:master' into master
brrkrmn Oct 7, 2023
3456907
revert package-lock.json
brrkrmn Oct 8, 2023
5860b72
fix package-lock.json
brrkrmn Oct 8, 2023
b296107
fix package-lock.json
brrkrmn Oct 8, 2023
3d23661
Merge branch 'unstructuredstudio:master' into master
brrkrmn Oct 11, 2023
0977d50
Merge branch 'unstructuredstudio:master' into master
brrkrmn Oct 13, 2023
6677139
Merge branch 'unstructuredstudio:master' into master
brrkrmn Oct 16, 2023
2e5a19d
Merge branch 'unstructuredstudio:master' into master
brrkrmn Oct 17, 2023
5ab51fc
Merge branch 'unstructuredstudio:master' into master
brrkrmn Oct 18, 2023
1acd87e
fix scrollbar bug
brrkrmn Oct 18, 2023
16b99aa
Revert "fix scrollbar bug"
brrkrmn Oct 18, 2023
79090d5
Merge branch 'unstructuredstudio:master' into master
brrkrmn Oct 19, 2023
d40c7d0
Merge branch 'master' of https://github.com/brrkrmn/zubhub
brrkrmn Oct 19, 2023
ee2f027
project title takes up nore space in option
brrkrmn Oct 20, 2023
d9c6178
project title takes up nore space in option
brrkrmn Oct 20, 2023
cf81946
Merge branch '419-search-autocomplete' of https://github.com/brrkrmn/…
brrkrmn Nov 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 45 additions & 12 deletions zubhub_frontend/zubhub/src/assets/js/styles/components/autocomplete/optionStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,83 @@
const styles = theme => ({
option: {
display: 'flex',
flexFlow: 'row nowrap',
flexFlow: 'row',
alignItems: 'center',
justifyContent: 'space-between',
justifyContent: 'flex-start',
gap: '8px',
width: '100%',
height: '100%',
margin: '-10px -15px',
padding: '10px 15px',
textDecoration: 'none',
color: 'black',
},
infoWrapper: {
display: 'flex',
flexFlow: 'row nowrap',
alignItems: 'center',
maxWidth: '50%',
flexFlow: 'row',
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.

// [theme.breakpoints.down('1168')]: {
// flexFlow: 'column',
// alignItems: 'flex-start'
// }
// justifyContent: 'space-between',

//second approach
flexWrap: 'wrap',
},
optionTitleWrapper: {
flex: '1 1 max-content',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
maxWidth: '100%',
[theme.breakpoints.down('497')]: {
display: '-webkit-box',
'-webkit-line-clamp': 2,
'-webkit-box-orient': 'vertical',
lineHeight: '1.2em'
},
//second approach
marginRight: '4px',
},
optionTitle: {
display: 'inline',
fontFamily: 'inherit',
textOverflow: 'ellipsis',
[theme.breakpoints.down('497')]: {
fontSize: '14px',
textWrap: 'wrap',
},
},
shortInfo: {
fontSize: '12px',
color: 'gray',
marginLeft: '10px',
//first approach
// [theme.breakpoints.up('1168')]: {
// // marginLeft: 12,
// },
},
optionImageWrapper: {
display: 'flex',
flexFlow: 'row nowrap',
flexShrink: 0,
justifyContent: 'center',
alignItems: 'center',
height: '40px',
width: '40px',
overflow: 'hidden',
backgroundColor: 'black',
borderRadius: '5px',
[theme.breakpoints.down('497')]: {
width: '46px',
height: '46px',
},
},
optionImage: {
width: '40px',
height: '40px',
backgroundColor: 'white',
[theme.breakpoints.down('497')]: {
width: '46px',
height: '46px',
},
},
});

Expand Down
2 changes: 1 addition & 1 deletion zubhub_frontend/zubhub/src/components/Navbar/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

.map(({ id, title, creator, images }) => ({
title,
shortInfo: creator.username,
Expand Down
12 changes: 6 additions & 6 deletions zubhub_frontend/zubhub/src/components/autocomplete/Option.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,6 @@ const Option = ({ option, inputValue, onOptionClick }) => {
className={classes.option}
href={option.link}
>
<div className={classes.infoWrapper}>
<span className={classes.optionTitleWrapper}>{title}</span>
{option.shortInfo && (
<span className={classes.shortInfo}>{option.shortInfo}</span>
)}
</div>
{option.image && (
<div className={classes.optionImageWrapper}>
<img
Expand All @@ -45,6 +39,12 @@ const Option = ({ option, inputValue, onOptionClick }) => {
/>
</div>
)}
<div className={classes.infoWrapper}>
<span className={classes.optionTitleWrapper}>{title}</span>
{option.shortInfo && (
<span className={classes.shortInfo}>{option.shortInfo}</span>
)}
</div>
</OptionWrap>
);
};
Expand Down