[Code] Adjust search page style (#35716) (#35930)

This commit is contained in:
Mengwei Ding 2019-05-02 19:39:10 +08:00 committed by GitHub
parent 32136d370e
commit b7a98a03d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 19 deletions

View file

@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
import { EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
import querystring from 'querystring';
import React from 'react';
import { connect } from 'react-redux';
@ -196,22 +196,20 @@ class SearchPage extends React.PureComponent<Props, State> {
}
return (
<div className="codeContainer__search">
<ShortcutsProvider />
<EuiFlexGroup gutterSize="none">
<EuiFlexItem style={{ maxWidth: '256px' }}>
<SideBar
query={this.props.query}
scope={scope}
repositories={repositories}
languages={languages}
repoFacets={repoStats}
langFacets={languageStats}
onLanguageFilterToggled={this.onLanguageFilterToggled}
onRepositoryFilterToggled={this.onRepositoryFilterToggled}
/>
</EuiFlexItem>
<EuiFlexItem>
<div className="codeContainer__root">
<div className="codeContainer__rootInner">
<ShortcutsProvider />
<SideBar
query={this.props.query}
scope={scope}
repositories={repositories}
languages={languages}
repoFacets={repoStats}
langFacets={languageStats}
onLanguageFilterToggled={this.onLanguageFilterToggled}
onRepositoryFilterToggled={this.onRepositoryFilterToggled}
/>
<div className="codeContainer__search--main">
<SearchBar
repoScope={this.props.searchOptions.repoScope.map(r => r.uri)}
query={this.props.query}
@ -219,8 +217,8 @@ class SearchPage extends React.PureComponent<Props, State> {
ref={element => (this.searchBar = element)}
/>
{mainComp}
</EuiFlexItem>
</EuiFlexGroup>
</div>
</div>
</div>
);
}

View file

@ -84,6 +84,14 @@
width: 100%;
}
.codeContainer__search--main {
width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
height: 100%;
}
.codeContainer__symbolTree {
position: relative;
display: inline-block;
@ -100,6 +108,8 @@
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
max-width: 256px;
min-width: 256px;
}
.codeSearchbar__container {