mirror of
https://github.com/chaoticbackup/chaoticbackup.github.io.git
synced 2026-03-28 20:44:36 -05:00
[update] reduce collection search to fit on screen
This commit is contained in:
Daniel
parent
cf4b021f6a
commit
bf071fbfac
File diff suppressed because one or more lines are too long
|
|
@ -19,7 +19,7 @@ object-assign
|
|||
@license MIT
|
||||
*/
|
||||
|
||||
/** @license React v16.7.0
|
||||
/** @license React v16.8.6
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
|
|
@ -28,7 +28,7 @@ object-assign
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** @license React v16.7.0
|
||||
/** @license React v16.8.6
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
|
|
@ -37,7 +37,7 @@ object-assign
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** @license React v0.12.0
|
||||
/** @license React v0.13.6
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -168,8 +168,8 @@ export default class SearchCollection extends React.Component {
|
|||
render() {
|
||||
if (this.loaded == false) {
|
||||
API.LoadDB([{'cards': 'attacks'}, {'cards': 'battlegear'}, {'cards': 'creatures'}, {'cards': 'locations'}, {'cards': 'mugic'}])
|
||||
.then(() => {
|
||||
this.loaded = true;
|
||||
.then(() => {
|
||||
this.loaded = true;
|
||||
this.search();
|
||||
});
|
||||
return (<Loading />);
|
||||
|
|
@ -226,35 +226,27 @@ export default class SearchCollection extends React.Component {
|
|||
<div className="text-entry">
|
||||
<input type="text" name="text" placeholder="Card Text" value={this.input.text} onChange={this.handleChange} />
|
||||
</div>
|
||||
<div className="text-entry">
|
||||
<input type="text" name="subtypes" placeholder="Subtypes | Initiative" value={this.input.subtypes} onChange={this.handleChange} />
|
||||
</div>
|
||||
<br />
|
||||
<div className="centeredCheckBox">
|
||||
<label className="mull"><input type="checkbox" name="flavor" value={!this.input.flavor} onChange={(e) => {this.input.flavor = !e.target.checked}} />Ignore Flavortext</label>
|
||||
</div>
|
||||
<div className="centeredCheckBox">
|
||||
<div className="text-entry">
|
||||
<input type="text" name="subtypes" placeholder="Subtypes | Initiative" value={this.input.subtypes} onChange={this.handleChange} />
|
||||
</div>
|
||||
<div className="centeredCheckBox centeredSpacing">
|
||||
<label className="mull"><input type="checkbox" name="past" checked={this.input.past} onChange={this.handleChange} />Past</label>
|
||||
</div>
|
||||
<div className="centeredCheckBox">
|
||||
<label className="mull"><input type="checkbox" name="mirage" checked={this.input.mirage} onChange={this.handleChange} />Mirage</label>
|
||||
</div>
|
||||
<div className="centeredCheckBox">
|
||||
<label className="mull"><input type="checkbox" name="minion" checked={this.input.minion} onChange={this.handleChange} />Minion</label>
|
||||
</div>
|
||||
<div className="centeredCheckBox">
|
||||
<br />
|
||||
<div className="centeredCheckBox centeredSpacing">
|
||||
<label className="mull"><input type="checkbox" name="unique" checked={this.input.mull.unique} onChange={e => this.handleChange(e, "mull")} />Unique</label>
|
||||
</div>
|
||||
<div className="centeredCheckBox">
|
||||
<label className="mull"><input type="checkbox" name="loyal" checked={this.input.mull.loyal} onChange={e => this.handleChange(e, "mull")} />Loyal</label>
|
||||
</div>
|
||||
<div className="centeredCheckBox">
|
||||
<label className="mull"><input type="checkbox" name="legendary" checked={this.input.mull.legendary} onChange={e => this.handleChange(e, "mull")} />Legendary</label>
|
||||
</div>
|
||||
<div className="centeredCheckBox">
|
||||
<label className="mull"><input type="checkbox" name="mixed" checked={this.input.mull.mixed} onChange={e => this.handleChange(e, "mull")} />Non-Loyal</label>
|
||||
</div>
|
||||
<br /><hr />
|
||||
<hr />
|
||||
<div className="tribes">
|
||||
{tribes}
|
||||
</div>
|
||||
|
|
@ -269,22 +261,17 @@ export default class SearchCollection extends React.Component {
|
|||
</div>
|
||||
<hr />
|
||||
<div className="disciplines">
|
||||
{disciplines}
|
||||
{disciplines}
|
||||
</div>
|
||||
<hr />
|
||||
<Collapsible open={true} trigger="Energy">
|
||||
<div className="minMax">
|
||||
<label className="mcbp">Min <input type="text" name="min" value={this.input.energy.min} onChange={e => this.handleChange(e, "energy")} /></label>
|
||||
</div>
|
||||
<div className="minMax">
|
||||
<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 & Mugic Counters/Cost">
|
||||
<Collapsible open={true} trigger="Build Points Mugic Counters/Cost">
|
||||
<div className="minMax">
|
||||
<label className="mcbp">Min <input type="text" name="min" value={this.input.mcbp.min} onChange={e => this.handleChange(e, "mcbp")} /></label>
|
||||
</div>
|
||||
<div className="minMax">
|
||||
<label className="mcbp">Max <input type="text" name="max" value={this.input.mcbp.max} onChange={e => this.handleChange(e, "mcbp")} /></label>
|
||||
</div>
|
||||
</Collapsible>
|
||||
|
|
|
|||
|
|
@ -42,13 +42,17 @@
|
|||
|
||||
input[type="text"] {
|
||||
margin-bottom: 2px;
|
||||
width: 200px;
|
||||
border-radius: 5px;
|
||||
border-color: transparent;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
.centeredCheckBox {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.text-entry {
|
||||
|
||||
display: flex;
|
||||
|
|
@ -68,11 +72,7 @@
|
|||
.left,
|
||||
.right,
|
||||
.stats {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
padding-top: 2%;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.bigger {
|
||||
|
|
@ -112,7 +112,6 @@
|
|||
float: left;
|
||||
text-align: right;
|
||||
width: 40px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.SearchForm {
|
||||
|
|
@ -130,10 +129,14 @@
|
|||
|
||||
.centeredCheckBox {
|
||||
margin: 0 auto;
|
||||
width: 43%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.centeredSpacing {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.setBox {
|
||||
width: 80%;
|
||||
float: right;
|
||||
|
|
@ -158,8 +161,10 @@
|
|||
}
|
||||
|
||||
.minMax {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
width: 25%;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
@ -181,11 +186,21 @@
|
|||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.mull input {
|
||||
margin-left: 0px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.mull input,
|
||||
.Collapsible__contentInner input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.Collapsible__contentInner
|
||||
.centeredCheckBox {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.mcbp input {
|
||||
width: 24px;
|
||||
height: 14px;
|
||||
|
|
@ -230,8 +245,9 @@
|
|||
}
|
||||
|
||||
.Collapsible {
|
||||
margin-bottom: 10px;
|
||||
width: 250px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
.Collapsible__trigger {
|
||||
|
|
@ -241,6 +257,8 @@
|
|||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
text-indent: 5px;
|
||||
font-weight: bold;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.Collapsible__trigger:hover {
|
||||
|
|
@ -269,11 +287,12 @@
|
|||
}
|
||||
|
||||
.Collapsible__contentOuter {
|
||||
width: 96%;
|
||||
// width: 96%;
|
||||
}
|
||||
|
||||
.Collapsible__contentInner {
|
||||
width: 96%;
|
||||
// width: 96%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.left {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user