fix search; colletion collapsible boxes remember state

This commit is contained in:
Daniel 2019-09-26 18:41:36 -04:00
parent 687dd1380a
commit b65959ed3d
13 changed files with 127 additions and 52 deletions

View File

@ -1 +1 @@
.icon14{height:14px;padding-bottom:2px}.icon16{height:16px}.icon20{height:20px}.icon24{height:24px}.bigger{font-size:14px}.name{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.name .subname:before{content:"\a ";white-space:pre}.name .subname{font-size:13px;padding-bottom:4px;display:inherit}@media only screen and (min-width:975px){.collection{margin-top:5px;margin-right:5px;margin-left:5px}.collection>.left{font-family:Roboto,Arial,sans-serif;float:left;width:30%}.collection>.right{font-family:Roboto,Arial,sans-serif;float:right;width:70%}}@media only screen and (min-width:975px){.collection #buttons{margin:0 0 2% 1%}.collection #buttons,.collection .button,.collection input[type=button],.collection input[type=text]{border-radius:5px;border-color:transparent;text-align:center;outline:none}.collection input[type=text]{margin-bottom:2px}.collection .centeredCheckBox,.collection input[type=text]{width:220px}.collection .text-entry{display:flex;justify-content:center;align-items:center}.collection .text-entry input:focus{outline:none}.collection .card{text-align:left;display:flex;border:1px solid #aeaeae}.collection .card .left,.collection .card .right,.collection .card .stats{padding-top:4px}.collection .card .bigger{text-align:center;font-weight:700}.collection .card .energy{display:flex;width:20px!important}.collection .card .left{vertical-align:text-top;float:left;width:210px;padding-left:4px}.collection .card .right{float:left;width:calc(100% - 322px);border-left:2px solid #aeaeae;padding-left:4px;padding-right:4px;padding-bottom:6px;white-space:pre-line}.collection .creature .right{width:calc(100% - 366px)}.collection .creature .stats{vertical-align:text-top;float:left;text-align:right;width:40px}.collection .SearchForm{padding-top:3px;font-family:Roboto,Arial,sans-serif}.collection .searchName{display:flex;justify-content:center;align-items:center;padding:2%;font-size:16pt}.collection .centeredCheckBox{margin:0 auto;text-align:left}.collection .centeredSpacing{display:flex;justify-content:space-between}.collection .setBox{width:80%;float:right}.collection #sets{width:80%}.collection .centeredButtons{display:flex;justify-content:center;align-items:center}.collection #search{width:25%;margin:2%;border-radius:5px;border-color:transparent;text-align:center}.collection .minMax{display:flex;justify-content:space-between;margin:0 auto;width:50%;text-align:right}.collection .brainwashed{border-radius:3px;background-color:#dcdddf;color:#000!important}.collection .chieftain,.collection .flavortext{font-style:italic}.collection .disciplines input{width:30px;height:14px;text-align:center;margin-top:2px}.collection .mull input{margin-left:0;margin-top:1px}.collection .Collapsible__contentInner input,.collection .mull input{vertical-align:middle}.collection .Collapsible__contentInner .centeredCheckBox{width:50%}.collection .mcbp input{width:24px;height:14px;padding:unset;text-align:center;margin-top:2px}.collection .tribes{width:96%;text-align:center}.collection .and,.collection .disciplines{text-align:center}.collection .and{vertical-align:text-bottom;width:15%;border-radius:5px;border-color:transparent;margin:2%}}.collection .card .icon14,.collection .card .icon16,.collection .card .icon20,.collection .card .icon24{vertical-align:middle}.collection .thumb{width:100px;height:98px}.collection .card .thumb{float:left}.collection .Collapsible{margin-bottom:5px;margin-top:5px;width:96%}.collection .Collapsible__trigger{background-color:#333;display:block;position:relative;padding-top:5px;padding-bottom:5px;text-indent:5px;font-weight:700;white-space:pre}.collection .Collapsible__trigger:hover{background-color:red}.collection .Collapsible__trigger:after{content:"^";position:absolute;right:10px;top:10px;display:block;transition:transform .4s}.collection .Collapsible__trigger.is-open:after{transform:rotate(180deg);right:5px;top:5px}.collection .Collapsible__trigger.is-disabled{opacity:.5;background-color:grey}.collection .Collapsible__contentInner{margin-top:5px}.collection .left{position:relative}.collection .card_img{position:absolute;width:100%;z-index:2;left:-11px}.collection .card_img .hidden{display:none;max-height:0}.collection .card_img img{max-width:250px;max-height:350px}.collection .entries{text-align:left;width:100%}.collection .entries input[type=button]{margin:0 0 2% 1%}.collection .list-nav-top{display:flex}.collection .extended .fullcard{max-width:250px;max-height:350px}.collection hr{width:96%;margin-inline-start:0}.collection .none{display:inline}.collection .none>span{top:-3px;position:relative}.collection label{user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-o-user-select:none;-moz-user-select:none}
.icon14{height:14px;padding-bottom:2px}.icon16{height:16px}.icon20{height:20px}.icon24{height:24px}.bigger{font-size:14px}.name{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.name .subname:before{content:"\a ";white-space:pre}.name .subname{font-size:13px;padding-bottom:4px;display:inherit}@media only screen and (min-width:975px){.collection{margin-top:5px;margin-right:5px;margin-left:5px}}@media only screen and (min-width:975px){.collection>.left{font-family:Roboto,Arial,sans-serif;float:left;width:30%}.collection>.right{font-family:Roboto,Arial,sans-serif;float:right;width:70%}.collection #buttons{margin:0 0 2% 1%}.collection #buttons,.collection .button,.collection input[type=button],.collection input[type=text]{border-radius:5px;border-color:transparent;text-align:center;outline:none}.collection input[type=text]{margin-bottom:2px}.collection .centeredCheckBox,.collection input[type=text]{width:220px}.collection .text-entry{display:flex;justify-content:center;align-items:center}.collection .text-entry input:focus{outline:none}.collection .card{text-align:left;display:flex;border:1px solid #aeaeae}.collection .card .left,.collection .card .right,.collection .card .stats{padding-top:4px}.collection .card .bigger{text-align:center;font-weight:700}.collection .card .energy{display:flex;width:20px!important}.collection .card .left{vertical-align:text-top;float:left;width:210px;padding-left:4px}.collection .card .right{float:left;width:calc(100% - 322px);border-left:2px solid #aeaeae;padding-left:4px;padding-right:4px;padding-bottom:6px;white-space:pre-line}.collection .creature .right{width:calc(100% - 366px)}.collection .creature .stats{vertical-align:text-top;float:left;text-align:right;width:40px}.collection .SearchForm{padding-top:3px;font-family:Roboto,Arial,sans-serif}.collection .searchName{display:flex;justify-content:center;align-items:center;padding:2%;font-size:16pt}.collection .centeredCheckBox{margin:0 auto;text-align:left}.collection .centeredSpacing{display:flex;justify-content:space-between}.collection .setBox{width:80%;float:right}.collection #sets{width:80%}.collection .centeredButtons{display:flex;justify-content:center;align-items:center}.collection #search{width:25%;margin:2%;border-radius:5px;border-color:transparent;text-align:center}.collection .minMax{display:flex;justify-content:space-between;margin:0 auto;width:50%;text-align:right}.collection .brainwashed{border-radius:3px;background-color:#dcdddf;color:#000!important}.collection .chieftain,.collection .flavortext{font-style:italic}.collection .mull input{margin-left:0;margin-top:1px}.collection .Collapsible__contentInner input,.collection .mull input{vertical-align:middle}.collection .Collapsible__contentInner .centeredCheckBox{width:50%}.collection .tribes{width:96%;text-align:center}.collection .and,.collection .disciplines{text-align:center}.collection .and{vertical-align:text-bottom;width:15%;border-radius:5px;border-color:transparent;margin:2%}}.collection .disciplines input{width:30px;height:14px;text-align:center;margin-top:2px}.collection .mcbp input{width:24px;height:14px;padding:unset;text-align:center;margin-top:2px}.collection .card .icon14,.collection .card .icon16,.collection .card .icon20,.collection .card .icon24{vertical-align:middle}.collection .thumb{width:100px;height:98px}.collection .card .thumb{float:left}.collection .Collapsible{margin-bottom:5px;margin-top:5px;width:96%}.collection .Collapsible__trigger{background-color:#333;display:block;position:relative;padding-top:5px;padding-bottom:5px;text-indent:5px;font-weight:700;white-space:pre}.collection .Collapsible__trigger:hover{background-color:red}.collection .Collapsible__trigger:after{content:"^";position:absolute;right:10px;top:10px;display:block;transition:transform .4s}.collection .Collapsible__trigger.is-open:after{transform:rotate(180deg);right:5px;top:5px}.collection .Collapsible__trigger.is-disabled{opacity:.5;background-color:grey}.collection .Collapsible__contentInner{margin-top:5px}.collection .left{position:relative}.collection .card_img{position:absolute;width:100%;z-index:2;left:-11px}.collection .card_img .hidden{display:none;max-height:0}.collection .card_img img{max-width:250px;max-height:350px}.collection .entries{text-align:left;width:100%}.collection .entries input[type=button]{margin:0 0 2% 1%}.collection .list-nav-top{display:flex}.collection .extended .fullcard{max-width:250px;max-height:350px}.collection hr{width:96%;margin-inline-start:0}.collection .none{display:inline}.collection .none>span{top:-3px;position:relative}.collection label{user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-o-user-select:none;-moz-user-select:none}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
.icon14{height:14px;padding-bottom:2px}.icon16{height:16px}.icon20{height:20px}.icon24{height:24px}.bigger{font-size:14px}.name{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.name .subname:before{content:"\a ";white-space:pre}.name .subname{font-size:13px;padding-bottom:4px;display:inherit}.portal .navbar h1{font-size:16px}.portal .navbar ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333}.portal .navbar li{float:left}.portal .navbar .dropbtn,.portal .navbar li a{display:inline-block;color:#fff;text-align:center;padding:14px 16px;text-decoration:none}.portal .navbar .dropdown:hover .dropbtn,.portal .navbar li a:hover{background-color:red}.portal .navbar li.dropdown{display:inline-block}.portal .navbar .dropdown-content{display:none;position:absolute;background-color:#333;min-width:140px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.portal .navbar .dropdown-content a{color:#fff;padding:12px 16px;text-decoration:none;display:block;text-align:left}.portal .navbar .dropdown:hover .dropdown-content{display:block}.portal .magnifying-glass{cursor:pointer;transition:color .2s;z-index:1;vertical-align:middle;fill:currentColor;height:18px;min-width:18px;width:18px}.portal .search .results div{padding-bottom:10px}.portal .search .results a{font-size:16px;line-height:20px}.portal .entry{font-size:1.2em}.portal .entry .title{font-weight:700;font-size:16px}.portal .entry .left{float:left;width:100px}.portal .entry .right{float:right;width:86%}.portal .entry .left .title{text-align:left;padding-bottom:10px}.portal .entry .icon14,.portal .entry .icon16,.portal .entry .icon20,.portal .entry .icon24{vertical-align:middle}.portal .entry .entry_content{min-height:550px;height:calc(100vh - 300px);overflow-y:auto;width:100%;position:relative}.portal .entry .entry_content .entry_splash{padding-bottom:4px}.portal .entry .entry_content .entry_splash img{max-width:100%}.portal .entry .entry_content .entry_splash .arrow{position:absolute;color:#f1f1f1;font-size:40px;font-weight:700;width:100%;top:95%}.portal .entry .entry_content .entry_body{position:relative;max-width:100%;padding-bottom:4px;display:flex;flex-wrap:wrap}.portal .entry .entry_content .entry_body hr{margin:0}.portal .entry .entry_content .entry_body .title{min-width:100%}.portal .entry .entry_content .entry_body .title hr{margin-top:8px}.portal .entry .entry_content .entry_body .column>div,.portal .entry .entry_content .entry_body .nocolumn>div{padding:8px}.portal .entry .entry_content .entry_body .column:nth-child(2){flex-grow:1;text-align:left;min-width:0;width:30%}.portal .entry .entry_content .entry_body .column:last-child{flex-grow:2;min-width:0;flex:60%;border-left:1px solid #fff}.portal .entry .entry_content .entry_body .ability{white-space:pre-line;word-wrap:break-all}.portal .entry .entry_content .entry_body div{white-space:pre-line}.portal .entry .entry_content::-webkit-scrollbar{width:1px}.portal .entry .cat_title{text-align:left;background-color:#1a1a1a;font-weight:700;font-size:16px;padding-top:1px;padding-left:4px}.portal .entry .entry_nav{background-color:#1a1a1a;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.portal .entry .entry_nav>div{display:inline-block}.portal .entry .entry_nav>div img{margin-right:3px;margin-left:3px;height:100px}.portal .entry.base_path .cat_title,.portal .entry.base_path .entry_nav{background-color:inherit}.portal .entry.base_path .cat_title{padding-top:1em;padding-bottom:1em}.portal .entry.base_path .entry_nav{overflow-y:auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-content:space-between}.portal .entry.base_path .entry_nav>div{overflow-wrap:break-word;margin:3px;max-width:106px}.portal .entry .modal{position:fixed;z-index:10;padding-top:50px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.9)}.portal .entry .modal.hidden{display:none}.portal .entry .modal-content{margin:auto;display:block;max-height:calc(100vh - 100px);max-width:90vw}.portal .entry .caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0;height:150px}.portal .entry #caption,.portal .entry .modal-content{-webkit-animation-name:zoom;-webkit-animation-duration:.6s;animation-name:zoom;animation-duration:.6s}@-webkit-keyframes zoom{0%{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes zoom{0%{transform:scale(0)}to{transform:scale(1)}}.portal .entry .close{position:fixed;top:35px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s}.portal .entry .close:focus,.portal .entry .close:hover{color:#bbb;text-decoration:none;cursor:pointer}
.icon14{height:14px;padding-bottom:2px}.icon16{height:16px}.icon20{height:20px}.icon24{height:24px}.bigger{font-size:14px}.name{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.name .subname:before{content:"\a ";white-space:pre}.name .subname{font-size:13px;padding-bottom:4px;display:inherit}.portal .navbar h1{font-size:16px}.portal .navbar ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333}.portal .navbar li{float:left}.portal .navbar .dropbtn,.portal .navbar li a{display:inline-block;color:#fff;text-align:center;padding:14px 16px;text-decoration:none}.portal .navbar .dropdown:hover .dropbtn,.portal .navbar li a:hover{background-color:red}.portal .navbar li.dropdown{display:inline-block}.portal .navbar .dropdown-content{display:none;position:absolute;background-color:#333;min-width:140px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.portal .navbar .dropdown-content a{color:#fff;padding:12px 16px;text-decoration:none;display:block;text-align:left}.portal .navbar .dropdown:hover .dropdown-content{display:block}.portal .magnifying-glass{cursor:pointer;transition:color .2s;z-index:1;vertical-align:middle;fill:currentColor;height:18px;min-width:18px;width:18px}.portal .search .results div{padding-bottom:10px}.portal .search .results a{font-size:16px;line-height:20px}.portal .entry{font-size:1.2em}.portal .entry .title{font-weight:700;font-size:16px}.portal .entry .left{float:left;width:100px}.portal .entry .right{float:right;width:86%}.portal .entry .left .title{text-align:left;padding-bottom:10px}.portal .entry .icon14,.portal .entry .icon16,.portal .entry .icon20,.portal .entry .icon24{vertical-align:middle}.portal .entry .entry_content{min-height:550px;height:calc(100vh - 300px);overflow-y:auto;width:100%;position:relative}.portal .entry .entry_content .entry_splash{padding-bottom:4px}.portal .entry .entry_content .entry_splash img{max-width:100%}.portal .entry .entry_content .entry_splash .arrow{position:absolute;color:#f1f1f1;font-size:40px;font-weight:700;width:100%;top:95%}.portal .entry .entry_content .entry_body{position:relative;max-width:100%;padding-bottom:4px;display:flex;flex-wrap:wrap}.portal .entry .entry_content .entry_body hr{margin:0}.portal .entry .entry_content .entry_body .title{min-width:100%}.portal .entry .entry_content .entry_body .title hr{margin-top:8px}.portal .entry .entry_content .entry_body .column>div,.portal .entry .entry_content .entry_body .nocolumn>div{padding:8px}.portal .entry .entry_content .entry_body .column:nth-child(2){flex-grow:1;text-align:left;min-width:0;width:30%}.portal .entry .entry_content .entry_body .column:last-child{flex-grow:2;min-width:0;flex:60%;border-left:1px solid #fff}.portal .entry .entry_content .entry_body .ability{white-space:pre-line;word-wrap:break-all}.portal .entry .entry_content .entry_body div{white-space:pre-line}.portal .entry .entry_content::-webkit-scrollbar{width:1px}.portal .entry .cat_title{text-align:left;background-color:#1a1a1a;font-weight:700;font-size:16px;padding-top:1px;padding-left:4px}.portal .entry .entry_nav{background-color:#1a1a1a;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.portal .entry .entry_nav .nav_item{display:inline-block;margin-right:3px;margin-left:3px}.portal .entry .entry_nav .nav_item img{min-width:96px;height:100px}.portal .entry.base_path .cat_title,.portal .entry.base_path .entry_nav{background-color:inherit}.portal .entry.base_path .cat_title{padding-top:1em;padding-bottom:1em}.portal .entry.base_path .entry_nav{overflow-y:auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-content:space-between}.portal .entry.base_path .entry_nav .nav_item{overflow-wrap:break-word;margin:3px;max-width:106px}.portal .entry .modal{position:fixed;z-index:10;padding-top:50px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.9)}.portal .entry .modal.hidden{display:none}.portal .entry .modal-content{margin:auto;display:block;max-height:calc(100vh - 100px);max-width:90vw}.portal .entry .caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0;height:150px}.portal .entry #caption,.portal .entry .modal-content{-webkit-animation-name:zoom;-webkit-animation-duration:.6s;animation-name:zoom;animation-duration:.6s}@-webkit-keyframes zoom{0%{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes zoom{0%{transform:scale(0)}to{transform:scale(1)}}.portal .entry .close{position:fixed;top:35px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s}.portal .entry .close:focus,.portal .entry .close:hover{color:#bbb;text-decoration:none;cursor:pointer}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,11 +1,16 @@
@import '../base';
@media only screen and (min-width: 975px) {
.collection {
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
}
}
.collection {
@media only screen and (min-width: 975px) {
> .left {
font-family: Roboto, Arial, sans-serif;
@ -18,12 +23,6 @@
float: right;
width: 70%;
}
}
}
.collection {
@media only screen and (min-width: 975px) {
#buttons {
border-radius: 5px;
@ -179,13 +178,6 @@
font-style: italic;
}
.disciplines input {
width: 30px;
height: 14px;
text-align: center;
margin-top: 2px;
}
.mull input {
margin-left: 0px;
margin-top: 1px;
@ -201,14 +193,6 @@
width: 50%;
}
.mcbp input {
width: 24px;
height: 14px;
padding: unset;
text-align: center;
margin-top: 2px;
}
.tribes {
width: 96%;
text-align: center;
@ -230,6 +214,21 @@
}
/* desktop */
.disciplines input {
width: 30px;
height: 14px;
text-align: center;
margin-top: 2px;
}
.mcbp input {
width: 24px;
height: 14px;
padding: unset;
text-align: center;
margin-top: 2px;
}
.card .icon14, .card .icon16,
.card .icon20, .card .icon24 {
vertical-align: middle;

View File

@ -10,6 +10,7 @@ import search_api from './search';
export default class SearchCollection extends React.Component {
@observable loaded = false;
@observable input;
@observable collapsed;
list = ["sets", "types", "rarity", "tribes", "elements", "mull", "gender"];
constructor(props) {
@ -19,10 +20,35 @@ export default class SearchCollection extends React.Component {
this.search = this.search.bind(this);
this.handleChange = this.handleChange.bind(this);
this.reset = this.reset.bind(this);
this.handleTriggerClick = this.handleTriggerClick.bind(this);
this.props.handleContent([{'text': 'Loading...'}]);
this.cleanInput();
this.parseQuery();
this.fetchCollapsed();
}
fetchCollapsed = () => {
let collapsed = localStorage.getItem("collapsed")
if (collapsed) collapsed = JSON.parse(collapsed);
else collapsed = {
disciplines: true,
energy: true,
bpmc: true,
types: true,
rarity: false,
sets: false
}
this.collapsed = collapsed;
}
handleTriggerClick = (type) => {
this.collapsed[type] = !this.collapsed[type];
localStorage.setItem("collapsed", JSON.stringify(this.collapsed));
}
cleanInput = () => {
@ -249,38 +275,70 @@ export default class SearchCollection extends React.Component {
<input type="button" value={this.input.elements.none ? "only" : "and"} className="and" disabled={this.input.elements.and} onClick={(e)=>{this.input.elements.and=true;}} />
</div>
<hr />
<div className="disciplines">
{disciplines}
</div>
<Collapsible open={true} trigger="Energy">
<CollapsibleWrapper
type="disciplines"
trigger="Disciplines"
open={this.collapsed.disciplines}
onClick={this.handleTriggerClick}
>
<div className="disciplines">
{disciplines}
</div>
</CollapsibleWrapper>
<CollapsibleWrapper
type="energy"
trigger="Energy"
open={this.collapsed.energy}
onClick={this.handleTriggerClick}
>
<div className="minMax">
<label className="mcbp">Min <input type="text" name="min" value={this.input.energy.min} onChange={e => this.handleChange(e, "energy")} /></label>
<label className="mcbp">Max <input type="text" name="max" value={this.input.energy.max} onChange={e => this.handleChange(e, "energy")} /></label>
</div>
</Collapsible>
<Collapsible open={true} trigger="Build Points&#10;Mugic Counters/Cost">
</CollapsibleWrapper>
<CollapsibleWrapper
type="bpmc"
trigger="Build Points&#10;Mugic Counters/Cost"
open={this.collapsed.bpmc}
onClick={this.handleTriggerClick}
>
<div className="minMax">
<label className="mcbp">Min <input type="text" name="min" value={this.input.mcbp.min} onChange={e => this.handleChange(e, "mcbp")} /></label>
<label className="mcbp">Max <input type="text" name="max" value={this.input.mcbp.max} onChange={e => this.handleChange(e, "mcbp")} /></label>
</div>
</Collapsible>
<Collapsible open={true} trigger="Types">
</CollapsibleWrapper>
<CollapsibleWrapper
type="types"
trigger="Card Type"
open={this.collapsed.types}
onClick={this.handleTriggerClick}
>
<div className="centeredCheckBox">
{types}
</div>
</Collapsible>
<Collapsible trigger="Rarity">
</CollapsibleWrapper>
<CollapsibleWrapper
type="rarity"
trigger="Rarity"
open={this.collapsed.rarity}
onClick={this.handleTriggerClick}
>
<div className="centeredCheckBox">
{rarity}
</div>
</Collapsible>
<Collapsible trigger="Sets">
</CollapsibleWrapper>
<CollapsibleWrapper
type="sets"
trigger="Sets"
open={this.collapsed.sets}
onClick={this.handleTriggerClick}
>
<div className="setBox">
<div className="centeredCheckBox" id="sets">
{sets}
</div>
</div>
</Collapsible>
</CollapsibleWrapper>
{/*<Collapsible trigger="Gender (fan content)">{gender}</Collapsible>*/}
<div className="centeredButtons">
<input id="search" type="submit" value="Search" />
@ -290,5 +348,18 @@ export default class SearchCollection extends React.Component {
</div>
);
}
}
function CollapsibleWrapper(props) {
const {type, children, onClick, ...rest} = props;
return (
<span onClick={() => onClick(type)} >
<Collapsible
{...rest}
>
{children}
</Collapsible>
</span>
);
}

View File

@ -66,24 +66,26 @@ export default function search_api(input) {
return ({'$regex': new RegExp(item.trim(), 'i')});
});
// clean text
let inputtext = input.text.replace(/\\/g, '').replace(/\(|\)/g, (match) => {return ("\\"+match)});
let inputtext = new RegExp(input.text.replace(/\\/g, '').replace(/\(|\)/g, (match) => {return ("\\"+match)}), "i");
console.log(inputtext);
let parm = (() => {
let list = [
{'gsx$tags': {"$or": textList}},
{'gsx$ability': {"$or": {'$regex': new RegExp(inputtext, 'i')}}}
{'gsx$ability': {'$regex': inputtext}}
]
if (input.flavor) {
list.push({'gsx$flavortext': {"$or": textList}});
list.push({'gsx$artist': {"$or": textList}});
}
console.log(list);
return list;
})();
attackResults = attackResults.find({'$or': parm});
battlegearResults = battlegearResults.find({'$or': parm});
creatureResults = creatureResults.find({'$or':
(parm.concat([{'gsx$brainwashed': {"$or": textList}}]))
(parm.concat([{'gsx$brainwashed': {'$regex': inputtext}}]))
});
locationResults = locationResults.find({'$or': parm});
mugicResults = mugicResults.find({'$or': parm});

View File

@ -33,7 +33,7 @@ export default class Category extends React.Component {
// Prevent site from crashing due to misspelled/missing data
if (!data) return (<div key={i}></div>);
return (<div key={i}>
return (<div key={i} className="nav_item">
<Interactive as={Link}
to={url || `/portal/${this.props.type}/${card.gsx$name}`}
{...s.link}

View File

@ -221,11 +221,13 @@
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
> div {
.nav_item {
display: inline-block;
margin-right: 3px;
margin-left: 3px;
img {
margin-right: 3px;
margin-left: 3px;
min-width: 96px;
height: 100px;
}
@ -247,7 +249,8 @@
flex-wrap: wrap;
justify-content: flex-start;
align-content: space-between;
> div {
.nav_item {
overflow-wrap: break-word;
margin: 3px;
max-width: 106px;