granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor SearchModal

Browse source
This commit is contained in:
Justin Edmund 2022-01-25 12:18:27 -08:00
parent 1122abcab4
commit 7a649f0fae
2 changed files with 45 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
components/SearchModal/index.scss
View file

@ -1,31 +1,34 @@
.SearchModal { .ModalContainer .Modal.SearchModal {
display: flex;
flex-direction: column;
min-height: 420px; min-height: 420px;
min-width: 600px; min-width: 600px;
} padding: 0;
.SearchModal .Input { #ModalTop {
padding: 12px 8px; background: $grey-90;
text-align: left; gap: $unit;
} margin: 0;
padding: ($unit * 3) ($unit * 3) ($unit * 1.5) ($unit * 3);
position: sticky;
top: 0;
.SearchModal label { label {
width: 100%; width: 100%;
}
.SearchModal label .Input { .Input {
width: 100%; box-sizing: border-box;
} padding: 12px 8px;
text-align: left;
.SearchModal #input_container { width: 100%;
background: #f5f5f5; }
padding: 24px 24px 12px 24px; }
position: sticky; }
top: 0;
} }
.SearchModal #results_container { .SearchModal #results_container {
margin: 0; margin: 0;
max-height: 320px; max-height: 330px;
padding: 0 12px 12px 12px; padding: 0 12px 12px 12px;
} }

41
components/SearchModal/index.tsx
View file

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import { createPortal } from 'react-dom' import { createPortal } from 'react-dom'
import api from '~utils/api' import api from '~utils/api'
@ -9,6 +10,7 @@ import WeaponResult from '~components/WeaponResult'
import SummonResult from '~components/SummonResult' import SummonResult from '~components/SummonResult'
import './index.scss' import './index.scss'
import PlusIcon from '~public/icons/plus.svg'
interface Props { interface Props {
close: () => void close: () => void
@ -155,25 +157,28 @@ class SearchModal extends React.Component<Props, State> {
return ( return (
createPortal( createPortal(
<div> <div>
<Modal styleName="SearchModal" key="search_modal"> <div className="ModalContainer">
<div id="input_container"> <div className="Modal SearchModal" key="search_modal">
<label className="search_label" htmlFor="search_input"> <div id="ModalTop">
<input <label className="search_label" htmlFor="search_input">
autoComplete="off" <input
type="text" autoComplete="off"
name="query" type="text"
className="Input" name="query"
id="search_input" className="Input"
ref={this.searchInput} id="search_input"
value={query} ref={this.searchInput}
placeholder={this.props.placeholderText} value={query}
onChange={this.inputChanged} placeholder={this.props.placeholderText}
/> onChange={this.inputChanged}
</label> />
</div> </label>
<PlusIcon onClick={this.props.close} />
</div>
{content} {content}
</Modal> </div>
</div>
<Overlay onClick={this.props.close} /> <Overlay onClick={this.props.close} />
</div>, </div>,
document.body document.body