Merge pull request #138 from jorilallo/jori/serach-ui
Fixed width issues with search
This commit is contained in:
commit
3b146d9b47
|
@ -9,10 +9,10 @@ import { searchUrl } from 'utils/routeHelpers';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
|
import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
|
||||||
|
|
||||||
|
import CenteredContent from 'components/CenteredContent';
|
||||||
import SearchField from './components/SearchField';
|
import SearchField from './components/SearchField';
|
||||||
import SearchStore from './SearchStore';
|
import SearchStore from './SearchStore';
|
||||||
|
|
||||||
import CenteredContent from 'components/CenteredContent';
|
|
||||||
import DocumentPreview from 'components/DocumentPreview';
|
import DocumentPreview from 'components/DocumentPreview';
|
||||||
import PageTitle from 'components/PageTitle';
|
import PageTitle from 'components/PageTitle';
|
||||||
|
|
||||||
|
@ -23,7 +23,9 @@ type Props = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const Container = styled(CenteredContent)`
|
const Container = styled(CenteredContent)`
|
||||||
position: relative;
|
> div {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ResultsWrapper = styled(Flex)`
|
const ResultsWrapper = styled(Flex)`
|
||||||
|
@ -39,6 +41,12 @@ const ResultList = styled(Flex)`
|
||||||
transition: all 400ms cubic-bezier(0.65, 0.05, 0.36, 1);
|
transition: all 400ms cubic-bezier(0.65, 0.05, 0.36, 1);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
`;
|
||||||
|
|
||||||
@observer class Search extends React.Component {
|
@observer class Search extends React.Component {
|
||||||
firstDocument: HTMLElement;
|
firstDocument: HTMLElement;
|
||||||
props: Props;
|
props: Props;
|
||||||
|
@ -106,7 +114,7 @@ const ResultList = styled(Flex)`
|
||||||
value={query || ''}
|
value={query || ''}
|
||||||
/>
|
/>
|
||||||
<ResultList visible={hasResults}>
|
<ResultList visible={hasResults}>
|
||||||
<ArrowKeyNavigation
|
<StyledArrowKeyNavigation
|
||||||
mode={ArrowKeyNavigation.mode.VERTICAL}
|
mode={ArrowKeyNavigation.mode.VERTICAL}
|
||||||
defaultActiveChildIndex={0}
|
defaultActiveChildIndex={0}
|
||||||
>
|
>
|
||||||
|
@ -118,7 +126,7 @@ const ResultList = styled(Flex)`
|
||||||
highlight={this.store.searchTerm}
|
highlight={this.store.searchTerm}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</ArrowKeyNavigation>
|
</StyledArrowKeyNavigation>
|
||||||
</ResultList>
|
</ResultList>
|
||||||
</ResultsWrapper>
|
</ResultsWrapper>
|
||||||
</Container>
|
</Container>
|
||||||
|
|
Reference in New Issue