extended view button

src/components/collection/List.js

@@ -10,6 +10,11 @@ import Mugic from './types/Mugic';
 @inject((stores, props, context) => props) @observer
 export default class CardList extends React.Component {
 
+  setImage(img) {
+    if (this.props.ext == false)
+      this.props.setImage(img);
+  }
+
   render() {
     let cards = this.props.cards;
 
@@ -21,15 +26,15 @@ export default class CardList extends React.Component {
     return cards.map((card, i) => {
       switch (card.gsx$type) {
       case "Attacks":
-        return (<Attack attack={card} key={i} setImage={this.props.setImage.bind(this)}/>);
+        return (<Attack attack={card} key={i} setImage={this.setImage.bind(this)}/>);
       case "Battlegear":
-        return (<Battlegear battlegear={card} key={i} setImage={this.props.setImage.bind(this)}/>);
+        return (<Battlegear battlegear={card} key={i} setImage={this.setImage.bind(this)}/>);
       case "Creatures":
-        return (<Creature creature={card} key={i} setImage={this.props.setImage.bind(this)}/>);
+        return (<Creature creature={card} key={i} setImage={this.setImage.bind(this)}/>);
       case "Locations":
-        return (<Location location={card} key={i} setImage={this.props.setImage.bind(this)}/>);
+        return (<Location location={card} key={i} setImage={this.setImage.bind(this)}/>);
       case "Mugic":
-        return (<Mugic mugic={card} key={i} setImage={this.props.setImage.bind(this)}/>);
+        return (<Mugic mugic={card} key={i} setImage={this.setImage.bind(this)}/>);
       default:
         return (<div key={i}>Invalid Type</div>);
       }

src/components/collection/index.js

@@ -12,6 +12,7 @@ export default class Home extends React.Component {
   @observable loaded = false;
   @observable n = 10;
   @observable p = 1;
+  @observable ext = false;
   @observable content = [];
   @observable card_img = API.card_back;
 
@@ -33,9 +34,12 @@ export default class Home extends React.Component {
           <SearchForm handleContent={this.handleContent.bind(this)} {...this.props} />
         </div>
         <div className="right">
-          {this.navigation()}
+          <div className="list-nav-top">
+            {this.navigation()}
+            {this.extended()}
+          </div>
           <br />
-          <CardList cards={this.content.slice(this.n * (this.p-1), this.n * this.p)} setImage={this.setImage.bind(this)}/>
+          <CardList ext={this.ext} cards={this.content.slice(this.n * (this.p-1), this.n * this.p)} setImage={this.setImage.bind(this)}/>
           <br />
           {this.navigation()}
         </div>
@@ -43,6 +47,15 @@ export default class Home extends React.Component {
     );
   }
 
+  extended() {
+    return (
+      <div className="extended">
+        <button onClick={(e) => this.ext = !this.ext}
+          >{this.ext ? "Short Format" : "Extended Format"}</button>
+      </div>
+    );
+  }
+
   navigation() {
     let numpages = Math.ceil(this.content.length / this.n);
 
@@ -57,7 +70,7 @@ export default class Home extends React.Component {
     }
 
     return (
-      <div style={{textAlign: 'left'}} className="entries">
+      <div className="entries">
         {this.content.length} results - page {this.p} of {numpages} {prev()} {next()}
         <br/>Entries per page:&nbsp;
         {/*<input type="text" style={{width: '40px'}} value={this.n}
@@ -73,7 +86,7 @@ export default class Home extends React.Component {
 
 }
 
-const onClickOutside = require("react-onclickoutside").default;
+
 
 @observer
 class imgbase extends React.Component {
@@ -87,7 +100,7 @@ class imgbase extends React.Component {
   changeImage = () => {
     this.display = true;
   }
-   
+
   render() {
     return(
       <div className="card_img">
@@ -97,6 +110,9 @@ class imgbase extends React.Component {
   }
 }
 
+const onClickOutside = require("react-onclickoutside").default;
+const ImagePreview = onClickOutside(imgbase);
+
 // var clickOutsideConfig = {
 //   handleClickOutside: function(instance) {
 //     console.log(instance);
@@ -106,8 +122,6 @@ class imgbase extends React.Component {
 //
 // const ImagePreview = onClickOutside(imgbase, clickOutsideConfig);
 
-const ImagePreview = onClickOutside(imgbase);
-
 // const createReactClass = require("create-react-class");
 // const ImagePreview = onClickOutside(createReactClass({
 //     handleClickOutside: function(event) {

src/scss/collection.scss

@@ -163,3 +163,17 @@
    max-width: 250px;
    max-height: 350px;
 }
+
+.entries {
+    text-align: left;
+}
+
+.list-nav-top {
+    display: flex;
+
+    .extended {
+        float: right;
+        margin: auto 0 0 auto;
+    }
+}
+