[update] reduce collection search to fit on screen

build/bundle.js.LICENSE

@@ -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.

src/components/collection/search/index.js

@@ -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(() => { 
+        .then(() => {
-          this.loaded = true; 
+          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&#10;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>

src/scss/collection.scss

@@ -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;
+        padding-top: 4px;
-      }
-
-      .stats {
-        padding-top: 2%;
       }
 
       .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;
+    margin-bottom: 5px;
-    width: 250px;
+    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 {