better resizing with react-resizable

package.json

@@ -13,6 +13,7 @@
     "gh-pages": "^0.12.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
+    "react-resizable": "^1.6.0",
     "react-router": "^3.0.2"
   },
   "scripts": {

src/About.css

@@ -3,4 +3,7 @@
     background-color: white;
     padding: 10px;
     border-radius: 10px;
+    border-style: solid;
+    background-color: rgb(252, 253, 255);
+    border-color: rgb(220, 240, 255);
 }

src/Songsim.css

@@ -3,38 +3,12 @@
     margin: 10px;
 }
 
-.matrixPane {
-    overflow: auto;
-    resize: both;
+.react-resizable-handle {
+    bottom: -20px !important;
+    right: -20px !important;
+    background-size: 10px !important;
 }
 
 .lyricsPane {
 }
 
-.matrixPane {
-    /*
-    border-style: solid;
-    */
-    width: 300px;
-}
-
-/* TODO: Gonna probably need a solution outside of vanilla CSS. The resize
- * property doesn't allow resizing to a smaller value than the initial width.
- */
-@media (max-width: 800px) {
-    .matrixPane {
-        border-color: red;
-    }
-}
-
-@media (max-width: 1100px) {
-    .matrixPane {
-        border-color: green;
-    }
-}
-
-@media (min-width: 1100px) {
-    .matrixPane {
-        border-color: aqua;
-    }
-}

src/Songsim.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import {Link} from 'react-router';
+import { ResizableBox } from 'react-resizable';
 
 import './Songsim.css';
 
@@ -211,7 +212,7 @@ class Songsim extends Component {
     // TODO: this method is getting pretty huge
     var rowcols = this.focal_rowcols;
     var rows = rowcols[0], cols = rowcols[1];
-    var radios = Object.keys(MODE).map(this.renderRadio)
+    var radios = Object.keys(MODE).map(this.renderRadio);
     var matrix;
     if (!this.state.verse) {
       matrix = <DummyMatrix />;
@@ -241,13 +242,16 @@ class Songsim extends Component {
           <p>Custom: {JSON.stringify(this.state.verse.isCustom())}</p>
         </div>);
     }
+    var defaultMatrixSize = 400; // TODO: have this flow from above (and calculate from screen.height or something)
     return (
         <div>
 
         <div className="mainContainer">
-        <div className="matrixPane">
+        <ResizableBox width={defaultMatrixSize} height={defaultMatrixSize}
+          lockAspectRatio={true}
+          >
             {matrix}
-        </div>
+        </ResizableBox>
 
         <div className="lyricsPane">
             <LyricsPane verse={this.state.verse || CustomVerse.BlankVerse()} 

src/index.css

@@ -2,5 +2,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
+  /*
   background-color: rgb(240, 240, 240) !important;
+  */
 }

src/index.js

@@ -5,6 +5,7 @@ import About from './About.js';
 import {Router, Route, hashHistory} from 'react-router';
 import './index.css';
 
+import 'react-resizable/css/styles.css';
 import 'bootstrap/dist/css/bootstrap.css';
 //import 'bootstrap/dist/css/bootstrap-theme.css';