Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-03-21 17:24:14 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

compressed longer search sections

Browse Source
This commit is contained in:
Daniel 2018-02-23 22:38:03 -05:00
parent 3d95330905
commit e3654b0850
3 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -19,8 +19,7 @@
color: inherit;
background: transparent;
}
/*pass window height (w/o scroll bars) down to react app, note can't use vh because that
includes scroll bars and mobile browser footer, etc so doesn't give viewable area*/
/*pass window height (w/o scroll bars) down to react app, note can't use vh because that includes scroll bars and mobile browser footer, etc so doesn't give viewable area*/
html, body { height: 100%; }
html { background-color:#494949; }
#root { min-height: 100%; }

56
src/components/collection/Search.js
View File

@ -3,6 +3,7 @@ import API from '../SpreadsheetData';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import loki from 'lokijs';
import Collapsible from 'react-collapsible';
@inject((stores, props, context) => props) @observer
export default class SearchForm extends React.Component {
@ -101,7 +102,6 @@ export default class SearchForm extends React.Component {
<br />
<label>Text: <input type="text" ref={(input) => this.stones.text = input} /></label>
<br />
{card_types}
<div>
<label>Subtypes | Initiative:<br />
<input type="text" ref={(input) => this.stones.subtypes = input} />
@ -110,15 +110,7 @@ export default class SearchForm extends React.Component {
<label><input type="checkbox" ref={(input) => this.stones.mirage = input}/>Mirage</label>
</div>
<br />
<div>{setsInput}</div>
<br />
{card_rarity}
<br />
<div>
<label><input type="checkbox" ref={(input) => this.stones.unique = input}/>Unique</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.stones.loyal = input}/>Loyal</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.stones.legendary = input}/>Legendary</label>
</div>
{card_types}
<br />
{card_tribes}
<br />
@ -127,29 +119,31 @@ export default class SearchForm extends React.Component {
{card_disciplines}
<br />
<div>
<span>Energy</span>&nbsp;
<span>Energy</span><br />
<label>Min: <input type="text" style={{width: '30px'}} ref={(input) => this.energy.min = input} /></label>&nbsp;
<label>Max: <input type="text" style={{width: '30px'}} ref={(input) => this.energy.max = input} /></label>
</div>
<br />
<div>
<span>Mugic Counters/Cost</span>&nbsp;
<label>Min: <input type="text" style={{width: '20px'}} ref={(input) => this.mc.min = input} /></label>&nbsp;
<label>Max: <input type="text" style={{width: '20px'}} ref={(input) => this.mc.max = input} /></label>
<span>Mugic Counters/Cost | Build Points</span><br />
<label>Min: <input type="text" style={{width: '30px'}} ref={(input) => this.mc.min = input} /></label>&nbsp;
<label>Max: <input type="text" style={{width: '30px'}} ref={(input) => this.mc.max = input} /></label>
</div>
<br />
<div>
<span>Build Points</span>&nbsp;
<label>Min: <input type="text" style={{width: '20px'}} ref={(input) => this.bp.min = input} /></label>&nbsp;
<label>Max: <input type="text" style={{width: '20px'}} ref={(input) => this.bp.max = input} /></label>
<label><input type="checkbox" ref={(input) => this.stones.unique = input}/>Unique</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.stones.loyal = input}/>Loyal</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.stones.mixed = input}/>Mixed</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.stones.legendary = input}/>Legendary</label>
</div>
<br />
<div>
<span>Gender (fan content):</span><br />
<Collapsible trigger="Rarity">{card_rarity}</Collapsible>
<Collapsible trigger="Sets">{setsInput}</Collapsible>
<Collapsible trigger="Gender (fan content)">
<label><input type="checkbox" ref={(input) => this.gender.Ambiguous = input}/>Ambiguous</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.gender.Female = input}/>Female</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.gender.Male = input}/>Male</label>
</div>
</Collapsible>
<br />
<input type="submit" value="Search" />&nbsp;&nbsp;
<input type="button" value="Reset" disabled onClick={this.reset()} />
@ -329,16 +323,17 @@ export default class SearchForm extends React.Component {
}
if (this.mc.min.value !== "" && this.mc.min.value >= 0) {
attackResults = attackResults.find({'gsx$bp': {'$gte': this.mc.min.value}});
creatureResults = creatureResults.find({'gsx$mugicability': {'$gte': this.mc.min.value}});
mugicResults = mugicResults.find({'gsx$cost': {'$gte': this.mc.min.value}});
}
if (this.mc.max.value !== "" && this.mc.max.value >= 0 && this.mc.max.value >= this.mc.min.value) {
attackResults = attackResults.find({'gsx$bp': {'$lte': this.mc.max.value}});
creatureResults = creatureResults.find({'gsx$mugicability': {'$lte': this.mc.max.value}});
mugicResults = mugicResults.find({'gsx$cost': {'$lte': this.mc.max.value}});
}
if (this.mc.max.value !== "" || this.mc.min.value !== "") {
attackResults = attackResults.limit(0);
battlegearResults = battlegearResults.limit(0);
locationResults = locationResults.limit(0);
}
@ -370,21 +365,6 @@ export default class SearchForm extends React.Component {
mugicResults = mugicResults.limit(0);
}
if (this.bp.min.value !== "" && this.bp.min.value >= 0) {
attackResults = attackResults.find({'gsx$bp': {'$gte': this.bp.min.value}});
}
if (this.bp.max.value !== "" && this.bp.max.value >= 0 && this.bp.max.value >= this.bp.min.value) {
attackResults = attackResults.find({'gsx$bp': {'$lte': this.bp.max.value}});
}
if (this.bp.min.value !== "" || this.bp.max.value !== "") {
battlegearResults = battlegearResults.limit(0);
creatureResults = creatureResults.limit(0);
locationResults = locationResults.limit(0);
mugicResults = mugicResults.limit(0);
}
if (this.stones.unique.checked) {
attackResults = attackResults.find({'gsx$unique': {'$gt': 0}});
battlegearResults = battlegearResults.find({'gsx$unique': {'$gt': 0}});
@ -400,6 +380,10 @@ export default class SearchForm extends React.Component {
mugicResults = mugicResults.find({'gsx$loyal': {'$gt': 0}});
}
if (this.stones.mixed.checked) {
creatureResults = creatureResults.find({'gsx$loyal': {'$lte': 0}});
}
if (this.stones.legendary.checked) {
attackResults = attackResults.find({'gsx$legendary': {'$gt': 0}});
battlegearResults = battlegearResults.find({'gsx$legendary': {'$gt': 0}});

17
src/css/collection.css
View File

@ -111,3 +111,20 @@
width: 100px;
height: 98px;
}
.Collapsible {
margin-bottom: 10px;
}
.Collapsible__trigger {
background-color: #333;
width: 250px;
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
text-indent: 5px;
}
.Collapsible__trigger:hover {
background-color: red;
}