diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/SearchBox.scss | 52 | ||||
| -rw-r--r-- | src/client/views/SearchBox.tsx | 52 |
2 files changed, 55 insertions, 49 deletions
diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss index 92363e681..1aad13b2e 100644 --- a/src/client/views/SearchBox.scss +++ b/src/client/views/SearchBox.scss @@ -8,18 +8,7 @@ transition: width 0.4s ease-in-out; align-items: center; - .submit-search { - text-align: right; - color: $dark-color; - -webkit-transition: right 0.4s; - transition: right 0.4s; - } - .submit-search:hover { - color: $main-accent; - transform: scale(1.05); - cursor: pointer; - } input[type=text] { width: 130px; @@ -38,6 +27,19 @@ position: absolute; right: 30px; } + + .submit-search { + text-align: right; + color: $dark-color; + -webkit-transition: right 0.4s; + transition: right 0.4s; + } + + .submit-search:hover { + color: $main-accent; + transform: scale(1.05); + cursor: pointer; + } } .filter-form { @@ -60,4 +62,32 @@ #option { height: 20px; +} + +.search-item { + width: 500px; + height: 50px; + background: $light-color-secondary; + display: flex; + justify-content: left; + align-items: center; + transition: all 0.1s; + border-width: 0.11px; + border-style: none; + border-color: $intermediate-color; + border-bottom-style: solid; + padding: 10px; + white-space: nowrap; + font-size: 13px; +} + +.search-item:hover { + transition: all 0.1s; + background: $lighter-alt-accent; +} + +.search-title { + text-transform: uppercase; + text-align: left; + width: 8vw; }
\ No newline at end of file diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx index eb3cd56fd..eecd9c8bb 100644 --- a/src/client/views/SearchBox.tsx +++ b/src/client/views/SearchBox.tsx @@ -74,42 +74,19 @@ export class SearchBox extends React.Component { let results = JSON.parse(response); - this._results = results; - - let doc = await Server.GetField(results[1]); - if (doc instanceof Document) { - console.log("doc"); - console.log(doc.Title); - } - - // weird things happening - // console.log("results") - // console.log(results); - // console.log("type") - // console.log(results.type) - let temp: string = this._results[1].Id; - // console.log(this._results) - // console.log(this._results[1]) - - console.log(this._results[1].constructor.name) - - if (this._results[1] instanceof Document) { - console.log("is a doc") - } - - if (this._results[1]) { - console.log("is a string") - } - - console.log(temp); - let doc2 = await Server.GetField(temp); - console.log(doc2); - if (doc2 instanceof Document) { - console.log("doc2"); - console.log(doc2.Title); - } + //gets json result into a list of documents that can be used + this.getResults(results); + } + getResults = async (res: string[]) => { + let doc; + res.map(async result => { + doc = await Server.GetField(result); + if (doc instanceof Document) { + this._results.push(doc); + } + }); } @action @@ -143,10 +120,9 @@ export class SearchBox extends React.Component { <button onClick={this.submitSearch} /> */} <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" id="input" /> - {/* {this._items.filter(prop => prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1). - map(prop => <ContextMenuItem {...prop} key={prop.description} />)} */} - {this._results.map(doc => <SearchItem {...doc} key={doc.Title} />)} - + <div style={this._open ? { display: "flex" } : { display: "none" }}> + {this._results.map(result => <SearchItem doc={result} key={result.Id} />)} + </div> <button className="filter-button" onClick={this.toggleDisplay}> Filter </button> <div className="submit-search" id="submit" onClick={this.submitSearch}><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div> </div> |