Commit c601ca83 authored by Dieu Hoa Nguyen's avatar Dieu Hoa Nguyen
Browse files

better looking search area

parent 0fbf269f
......@@ -487,109 +487,85 @@ if (element !== null) {
}
renderFocusList() {
const { selectedCheckboxes } = this.state;
return this.state.topic.filter(unfiltered => (unfiltered.category === "focus")).map((focusOnly) => (
<div>
<input
key={focusOnly.id}
return this.state.topic.filter(unfiltered => (unfiltered.category === "focus")).map(focusOnly => (
<div class="topicfiltercheckbox" key={focusOnly.id}>
<label for={focusOnly.id}><input
type="checkbox"
style={{
transform: "scale(1.2)",
}}
id = {focusOnly.id}
name = {focusOnly.id}
label={focusOnly.name}
value={focusOnly.id}
checked={focusOnly.isChecked}
onChange={() => this.handleChange(this)}
/>
<label>{focusOnly.name}</label>
ref={focusOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/> <span style={{ fontSize: '15px' }}>{focusOnly.name}</span></label>
</div>
));
));
}
renderLevelList() {
return this.state.topic.filter(unfiltered => (unfiltered.category === "level")).map(levelOnly => (
<div>
<input
key={levelOnly.id}
<div class="topicfiltercheckbox" key={levelOnly.id}>
<label for={levelOnly.id}><input
type="checkbox"
style={{
transform: "scale(1.2)",
}}
id = {levelOnly.id}
name = {levelOnly.id}
label={levelOnly.name}
value={levelOnly.id}
checked={levelOnly.isChecked}
onChange={this.handleChange}
/>
<label>{levelOnly.name}</label>
ref={levelOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/> <span style={{ fontSize: '15px' }}>{levelOnly.name}</span></label>
</div>
));
));
}
renderTypeList() {
return this.state.topic.filter(unfiltered => (unfiltered.category === "type")).map(typeOnly => (
<div>
<input
key={typeOnly.id}
<div class="topicfiltercheckbox" key={typeOnly.id}>
<label for={typeOnly.id} ><input
type="checkbox"
style={{
transform: "scale(1.2)",
}}
id = {typeOnly.id}
name = {typeOnly.id}
label={typeOnly.name}
value={typeOnly.id}
checked={typeOnly.isChecked}
onChange={this.handleChange}
/>
<label>{typeOnly.name}</label>
ref={typeOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/> <span style={{ fontSize: '15px' }}>{typeOnly.name}</span></label>
</div>
));
));
}
render() {
return (
<div className="column-layout">
<div class="block">
<b class="topicfilterheading">Focus</b>
{this.state.topic.filter(unfiltered => (unfiltered.category === "focus")).map(focusOnly => (
<div class="topicfiltercheckbox" key={focusOnly.id}>
<label for={focusOnly.id} ><input
type="checkbox"
id = {focusOnly.id}
name = {focusOnly.id}
label={focusOnly.name}
value={focusOnly.id}
checked={focusOnly.isChecked}
ref={focusOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/> <span>{focusOnly.name}</span></label>
<h2 class="topicfilterheading">Focus</h2>
<div class="block">
{this.renderFocusList()}
</div>
))}
</div>
<div class="block">
<b class="topicfilterheading">Level</b>
{this.state.topic.filter(unfiltered => (unfiltered.category === "level")).map(levelOnly => (
<div class="topicfiltercheckbox" key={levelOnly.id}>
<label for={levelOnly.id}><input
type="checkbox"
id = {levelOnly.id}
name = {levelOnly.id}
label={levelOnly.name}
value={levelOnly.id}
checked={levelOnly.isChecked}
ref={levelOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/> <span>{levelOnly.name}</span></label>
<h2 class="topicfilterheading">Level</h2>
<div class="block">
{this.renderLevelList()}
</div>
))}
</div>
<div class="block">
<b class="topicfilterheading">Type</b>
{this.state.topic.filter(unfiltered => (unfiltered.category === "type")).map(typeOnly => (
<div class="topicfiltercheckbox" key={typeOnly.id}>
<label for={typeOnly.id} ><input
type="checkbox"
id = {typeOnly.id}
name = {typeOnly.id}
label={typeOnly.name}
value={typeOnly.id}
checked={typeOnly.isChecked}
ref={typeOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/> <span>{typeOnly.name}</span></label>
<h2 class="topicfilterheading">Type</h2>
<div class="block">
{this.renderTypeList()}
</div>
))}
</div>
</div>
);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment