added popup image #27

src/components/collection/Search.js

@@ -113,7 +113,6 @@ export default class SearchForm extends React.Component {
             <label><input type="checkbox" ref={(input) => this.stones.mirage = input}/>Mirage</label>
           </div>
           <br />
-          <Collapsible trigger="Types">{card_types}</Collapsible>
           {card_tribes}
           <br />
           {card_elements}
@@ -141,6 +140,7 @@ export default class SearchForm extends React.Component {
             <label><input type="checkbox" ref={(input) => this.stones.mixed = input}/>Non-Loyal</label>
           </div>
           <br />
+          <Collapsible trigger="Types">{card_types}</Collapsible>
           <Collapsible trigger="Rarity">{card_rarity}</Collapsible>
           <Collapsible trigger="Sets">{setsInput}</Collapsible>
           <Collapsible trigger="Gender (fan content)">

src/components/collection/index.js

@@ -21,6 +21,7 @@ export default class Home extends React.Component {
 
   setImage(img) {
     this.card_img = (img || API.card_back);
+    this.changeImage();
   }
 
   render() {
@@ -43,9 +44,7 @@ export default class Home extends React.Component {
       <div className="collection">
         <link rel="stylesheet" href="/src/css/collection.css" />
         <div className="left">
-          <div className="card_img">
-            <img src={API.base_image + this.card_img} />
-          </div>
+          <ImagePreview url={API.base_image + this.card_img} ref={n => {if (n) this.changeImage = n.getInstance().changeImage}} />
           <SearchForm handleContent={this.handleContent.bind(this)} />
         </div>
         <div className="right">
@@ -89,3 +88,53 @@ export default class Home extends React.Component {
 
 }
 
+const onClickOutside = require("react-onclickoutside").default;
+
+@observer
+class imgbase extends React.Component {
+  @observable display = false;
+
+  handleClickOutside = (event) => {
+    // event.preventDefault();
+    this.display = false;
+  }
+
+  changeImage = () => {
+    this.display = true;
+  }
+   
+  render() {
+    return(
+      <div className="card_img">
+        <img className={(this.display?"":"hidden")} src={this.props.url} />
+      </div>
+    );
+  }
+}
+
+// var clickOutsideConfig = {
+//   handleClickOutside: function(instance) {
+//     console.log(instance);
+//     return instance.handleClickOutside;
+//   }
+// };
+//
+// const ImagePreview = onClickOutside(imgbase, clickOutsideConfig);
+
+const ImagePreview = onClickOutside(imgbase);
+
+// const createReactClass = require("create-react-class");
+// const ImagePreview = onClickOutside(createReactClass({
+//     handleClickOutside: function(event) {
+//       console.log("click outside");
+//       this.display = false;
+//     },
+//     render: function() {
+//       return(
+//         <div className="card_img">
+//           <img className={(this.display?"":"hidden")} src={API.base_image + this.props.url} />
+//         </div>
+//       );
+//     }
+//   })
+// );

src/components/collection/types/Attack.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import Interactive from 'react-interactive';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observable} from "mobx";

src/css/collection.css

@@ -94,16 +94,6 @@
     height: 24px;
 }
 
-.card_img {
-    width: 250px;
-    height: 350px;
-}
-
-.card_img img {
-   max-width: 250px;
-   max-height: 350px;
-}
-
 .bigger {
     font-size: 14px;
 }
@@ -151,3 +141,25 @@
     opacity: 0.5;
     background-color: grey;
 }
+
+.left {
+    position: relative;
+}
+
+
+.card_img {
+    position: absolute;
+    width: 100%;
+    left: -10px;
+    z-index: 2;
+}
+
+.card_img .hidden {
+    display: none;
+    max-height 0;
+}
+
+.card_img img {
+   max-width: 250px;
+   max-height: 350px;
+}

src/scss/collection.scss

@@ -0,0 +1,153 @@
+@media only screen and (min-width: 975px) {
+
+.collection > .left {
+    float: left;
+    width: 30%;
+}
+
+.collection > .right {
+    float: right;
+    width: 70%;
+}
+
+.card {
+    text-align: left;
+    display: flex;
+    border: 1px solid #AEAEAE;
+}
+
+.card .left,
+.card .right,
+.card .stats {
+    padding-top: 2px;
+}
+
+.card .left {
+    vertical-align: text-top;
+    float: left;
+    width: 210px;
+    padding-left: 4px;
+}
+
+.card .right {
+    float: left;
+    width: calc(100% - (100px + 4px + 4px + 4px + 210px));
+    border-left: 2px solid #AEAEAE;
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-bottom: 6px;
+    white-space: pre-line;
+}
+
+.creature .right {
+    width: calc(100% - (100px + 4px + 4px + 4px + 210px + 40px + 4px));
+}
+
+.creature .stats {
+    vertical-align: text-top;
+    float: left;
+    text-align: right;
+    width: 40px;
+    padding-right: 4px;
+}
+
+.SearchForm {
+    text-align: left;
+}
+
+.brainwashed {
+    background-color: #dcdddf;
+    color: black !important;
+}
+
+.flavortext,
+.chieftain {
+    font-style: italic;
+}
+
+.disciplines input {
+    width: 30px;
+    height: 14px;
+}
+
+} /* desktop */
+
+.card .icon14, .card .icon16,
+.card .icon20, .card .icon24 {
+    vertical-align: middle;
+}
+
+.icon14 {
+    height: 14px;
+    padding-bottom: 2px;
+}
+
+.icon16 {
+    height: 16px;
+}
+
+.icon20 {
+    height: 20px;
+}
+
+.icon24 {
+    height: 24px;
+}
+
+.card_img {
+    width: 250px;
+    height: 350px;
+}
+
+.card_img img {
+   max-width: 250px;
+   max-height: 350px;
+}
+
+.bigger {
+    font-size: 14px;
+}
+
+.thumb {
+    width: 100px;
+    height: 98px;
+}
+
+.Collapsible {
+    margin-bottom: 10px;
+    width: 250px;
+}
+
+.Collapsible__trigger {
+    background-color: #333;
+    display: block;
+    position: relative;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    text-indent: 5px;
+}
+
+.Collapsible__trigger:hover {
+    background-color: red;
+}
+
+.Collapsible__trigger:after {
+    content: '^';
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    display: block;
+    transition: transform 400ms;
+}
+
+.Collapsible__trigger.is-open:after {
+    transform: rotateZ(180deg);
+    right: 5px;
+    top: 5px;
+}
+
+
+.Collapsible__trigger.is-disabled {
+    opacity: 0.5;
+    background-color: grey;
+}