design requests #462
design requests #462
Conversation
| @@ -67,6 +67,7 @@ | |||
| align-content: center; | |||
| justify-content: flex-start; | |||
| align-items: flex-start; | |||
| width: 100%; | |||
There was a problem hiding this comment.
apply the full-width class
| position: inherit; | ||
| margin-top: var(--spacing-8); | ||
| overflow: scroll; | ||
| } | ||
| .mobile-searchbar > div { | ||
| width: 100%; |
| @@ -19,14 +19,16 @@ interface SearchInputProps { | |||
| } | |||
| export const SearchInput = ({onChange, expandable, placeholderText}: SearchInputProps) => { | |||
| const [search, setSearch] = useState('') | |||
|
|
|||
| const inputRef = useRef<HTMLInputElement | null>(null) | |||
There was a problem hiding this comment.
try const inputRef = useRef<HTMLInputElement>() - undefined is better for this kind of thing
| @@ -44,6 +46,7 @@ export const SearchInput = ({onChange, expandable, placeholderText}: SearchInput | |||
| handleSearch(e.currentTarget.value) | |||
| }} | |||
| value={search} | |||
| ref={inputRef} | |||
There was a problem hiding this comment.
have you tried just using the autoFocus attribute?
| @@ -37,7 +39,9 @@ export const SearchResults = ({results}: {results: SearchResultsProps[]}) => { | |||
| <Link key={i} className="search-result" to={result.url}> | |||
| <Paper /> | |||
| <div className="search-result-content"> | |||
| <h5 className="search-result-title">{result.title}</h5> | |||
| <h5 className={['search-result-title', isMobile ? 'xs-bold' : ''].join(' ')}> | |||
There was a problem hiding this comment.
can you do this with a media query, rather than adding clases?
There was a problem hiding this comment.
How do I add a class to another class with a media query?
There was a problem hiding this comment.
you don't :/ This way is fine, but it would be nice avoid explicitly checking the screen size in js, if possible
There was a problem hiding this comment.
To resolve your first 2 comments, I would need to put 1 js screen size check for the first one.
And for the second one, a check in a large if loop.
Should I still resolve the first 2?
There was a problem hiding this comment.
which comments? I'm not sure I understand
There was a problem hiding this comment.
The 2 regarding full-width class
There was a problem hiding this comment.
wait, so the items in navBar.css aren't for that component? Why aren't they in the appropriate css file?
But no point in adding the classes, then :D
There was a problem hiding this comment.
Those are for the search results. Same-same, maybe slightly different, but same:)
No description provided.