diff options
| author | vellichora <fangrui_tong@brown.edu> | 2020-03-11 15:53:41 -0400 |
|---|---|---|
| committer | vellichora <fangrui_tong@brown.edu> | 2020-03-11 15:53:41 -0400 |
| commit | bf70d94b36cfe38be78ff9935ffecdbe354f1a28 (patch) | |
| tree | 130f8e537a3abcc83e323137b9045fcc65449fe6 /src | |
| parent | 0777ad8db317999a4a878a4ab91ff706426303b7 (diff) | |
more css
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/search/FilterBox.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.scss | 11 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 9 |
3 files changed, 10 insertions, 12 deletions
diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx index 684f50766..432e18b22 100644 --- a/src/client/views/search/FilterBox.tsx +++ b/src/client/views/search/FilterBox.tsx @@ -387,7 +387,7 @@ export class FilterBox extends React.Component { {/* {this.getActiveFilters()} */} </div> {this._filterOpen ? ( - <div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}> + <div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex", background: "black" } : { display: "none" }}> <div className="top-filter-header" style={{ display: "flex", width: "100%" }}> <div id="header">Filter Search Results</div> <div style={{ marginLeft: "auto" }}></div> diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 11f5e4d91..176ed646d 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -10,6 +10,7 @@ font-size: 10px; line-height: 1; overflow: hidden; + background: lightgrey, } .searchBox-bar { @@ -18,7 +19,6 @@ justify-content: flex-end; align-items: center; padding-left: 2px; - padding-right: 2px; .searchBox-barChild { @@ -34,8 +34,7 @@ -webkit-transition: width 0.4s; transition: width 0.4s; align-self: stretch; - margin-left: 2px; - margin-right: 2px + } .searchBox-input:focus { @@ -89,12 +88,12 @@ .filter-form { position: relative; - right: 1px; - color: grey; + background: black; flex-direction: column; transform-origin: top; border-bottom: solid grey 1px; - margin: 5px; + padding: 5px; + transition: height 0.5s ease, display 0.5s ease; .filter-header { display: flex; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 1025629d5..4f0ca5709 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -391,14 +391,13 @@ export class SearchBox extends React.Component { </div> <div className="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}> - <div className="filter-header"> - <button className="filter-item" onClick={this.handleWordQueryChange}>Keywords</button> - <button className="filter-item" onClick={this.handleKeyChange}>Keys</button> - <button className="filter-item" onClick={this.handleNodeChange}>Nodes</button> + <div className="filter-header" style={this._filterOpen ? {} : { display: "none" }}> + <button className="filter-item" style={this._basicWordStatus ? { background: "#aaaaa3", } : {}} onClick={this.handleWordQueryChange}>Keywords</button> + <button className="filter-item" style={this._keyStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleKeyChange}>Keys</button> + <button className="filter-item" style={this._nodeStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleNodeChange}>Nodes</button> </div> <div className="filter-body" style={this._nodeStatus ? { display: "flex" } : { display: "none" }}> <IconBar /> - </div> <div style={this._keyStatus ? { display: "flex" } : { display: "none" }}> |