added popup image #27

index.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" type="text/css" href="/build/style.css">
     <link rel="stylesheet" type="text/css" href="/src/css/legacy.css">
     <style>
-      html, body, div, span, a, p, ul, li, h1, code, nav {
+      html, body, div, span, a, p, ul, li, h1 {
         margin: 0;
         border: 0;
         padding: 0;

package.json

@@ -1,9 +1,9 @@
 {
   "name": "chaoticbackup",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Chaotic Backup",
   "scripts": {
-    "start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback --progress",
+    "start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback --progress --display-error-details",
     "build": "webpack -p"
   },
   "repository": {
@@ -13,6 +13,7 @@
   "author": "Danude Sandstorm",
   "license": "MIT",
   "dependencies": {
+    "create-react-class": "^15.6.3",
     "lokijs": "^1.5.1",
     "mobx": "^3.3.1",
     "mobx-react": "^4.3.3",
@@ -22,6 +23,7 @@
     "react-digit-input": "^1.0.0",
     "react-dom": "^16.0.0",
     "react-interactive": "^0.8.1",
+    "react-onclickoutside": "^6.7.1",
     "react-process-string": "^1.2.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",

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;
+}

webpack.config.babel.js

@@ -19,9 +19,14 @@ export default {
       },
       {
         test: /\.scss$/,
-        loader: ExtractTextPlugin.extract('css!sass')
+        loader: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          loader: ['css-loader', 'sass-loader']
+        })
       },
     ],
+    rules: [       
+    ],
   },
 
   resolve: {
@@ -32,6 +37,12 @@ export default {
     fs: 'empty',
   },
 
+  plugins: [
+    new ExtractTextPlugin('build/style.css', {
+      allChunks: true
+    }),
+  ],
+
   plugins: process.argv.indexOf('-p') === -1 ? null : [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
@@ -41,8 +52,5 @@ export default {
         comments: false,
       },
     }),
-    new ExtractTextPlugin('build/style.css', {
-        allChunks: true
-    }),
   ],
 };