Changed layout to fit screen, introduced scss styles.

yuricus · yuricus · commit d4691476abbc · 2016-12-21T13:41:16.000+03:00
diff --git a/package.json b/package.json
@@ -17,13 +17,15 @@
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
     "css-loader": "0.23.1",
+    "sass-loader": "4.0.2",
+    "style-loader": "0.13.1",
+    "node-sass": "3.10.1",
     "exports-loader": "0.6.3",
     "expose-loader": "0.7.1",
     "file-loader": "0.8.5",
     "html-webpack-plugin": "2.22.0",
     "imports-loader": "0.6.5",
     "json-loader": "0.5.4",
-    "style-loader": "0.13.1",
     "url-loader": "0.5.7",
     "webpack": "1.13.2",
     "webpack-dev-server": "1.14.1"
diff --git a/src/GraphViz.jsx b/src/GraphViz.jsx
@@ -286,8 +286,8 @@ export default class GraphViz extends React.PureComponent {
 
     render() {
         return (
-            <div>
-                <div id="graph" style={{width: '100%', height: '700px'}} ref={(element) => this.registerSigmaElement(element)}/>
+            <div className="graph-view">
+                <div id="graph" className='graph-container' ref={(element) => this.registerSigmaElement(element)}/>
                 {this.renderSizeMenu()}
                 {this.renderFilterPanel()}
                {/* <div id="nodeSizePanel" style={{position: 'absolute', right: '10px', bottom: 0, width: '260px', height: '170px'}} className="card">
diff --git a/src/GraphWorkspace.jsx b/src/GraphWorkspace.jsx
@@ -20,16 +20,12 @@ export default class GraphWorkspace extends React.PureComponent {
     render() {
         return (
                 (this.props.graph && this.props.graph.nodes.length) > 0 ?
-                    <div className="row">
-                        <div className="col-md-3 col-space">
-                            {this.selectedBlock()}
-                        </div>
-                        <div className="col-md-9 col-space">
-                            {this.graphBlock()}
-                        </div>
+                    <div className="row graph-workspace">
+                        {this.selectedBlock()}
+                        {this.graphBlock()}
                     </div>
                             :
-                    <div className="row" >
+                    <div className="row graph-workspace" >
                         <div className="col-md-12">No data to visualize</div>
                     </div>
         );
@@ -38,17 +34,17 @@ export default class GraphWorkspace extends React.PureComponent {
 
 
     selectedBlock = () => {
-        return <div className="card">
-            <div className="card-block">
+        return <div className="card selected-nodes-panel">
+            <div className="card-block selected-nodes-block">
                 <h4 className="card-title">Selected Nodes</h4>
                 <SelectedTable selectedNodes={this.state.selectedNodes} onRemoved={this.onTableRemoved}/>
             </div>
         </div>;
     };
 
     graphBlock = () => {
-        return <div className="card">
-            <div className="card-block">
+        return <div className="card graph-panel">
+            <div className="card-block graph-block">
                 <h4 className="card-title">Graph visualization</h4>
                 <GraphViz graph={this.props.graph} selectedNodes={this.state.selectedNodes}
                           onSelectionAdd={this.onSelectionAdd} onSelectionRemove={this.onSelectionRemove}/>
diff --git a/src/ScenarioSelector.jsx b/src/ScenarioSelector.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import GraphWorkspace from './GraphWorkspace'
+require('./styles.scss')
 
 export default class ScenarioSelector extends React.Component {
 
@@ -13,8 +14,8 @@ export default class ScenarioSelector extends React.Component {
 
     render() {
         return (
-            <div className="container-fluid">
-                <div className="row">
+            <div className="container-fluid demo-root">
+                <div className="row scenario-selection">
                     <div className="card col-md-12">
                         <div className="card-block">
                             <h4 className="card-title">Scenario Selection</h4>
diff --git a/src/SelectedTable.jsx b/src/SelectedTable.jsx
@@ -1,15 +1,15 @@
 import React from 'react'
 import * as fileSaver from 'file-saver'
-
+require('./styles.scss')
 export default class SelectedTable extends React.Component {
     propTypes: {
         selectedNodes: React.PropTypes.array.isRequired
     };
     render() {
         return (
-            <div>
+            <div className="flex-column">
                 <div className="text-muted">Count: {this.props.selectedNodes.length} nodes</div>
-                <div style={{height: 635, overflowY: 'auto'}}>
+                <div style={{overflowY: 'auto'}}>
                     <table className="table table-sm small">
                         <tbody>
                         <tr><th>id</th><th>value</th><th>parent</th><th>link</th><th>&nbsp;</th>{/*<th>frq</th><th>sc</th><th>sprd</th>*/}</tr>
@@ -28,7 +28,7 @@ export default class SelectedTable extends React.Component {
                         </tbody>
                     </table>
                 </div>
-                <button type="button" className="btn btn-primary" onClick={() => console.log(this.exportCsv())}>Export CSV</button>
+                <button type="button" className="btn btn-primary export-css" onClick={() => console.log(this.exportCsv())} disabled={this.props.selectedNodes.length == 0}>Export CSV</button>
             </div>
         );
     }
diff --git a/src/examples/template.ejs b/src/examples/template.ejs
@@ -5,27 +5,13 @@
         <link rel="icon" href="data:;base64,iVBORw0KGgo=">
         <title><%= htmlWebpackPlugin.options.title %></title>
     </head>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
-             integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap-flex.css"
+             crossorigin="anonymous">
     <style>
         html, body, #root {
             height: 100%;
             overflow: hidden;
         }
-
-        .form-inline .form-group {
-            margin-right: 10px;
-        }
-
-        .table-sm td, .table-sm th {
-            padding: .2rem;
-        }
-
-        .form-inline label,
-        .form-inline .form-control {
-            margin-right: 5px;
-        }
-
     </style>
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
     <body>
diff --git a/src/styles.scss b/src/styles.scss
@@ -0,0 +1,72 @@
+.form-inline .form-group {
+  margin-right: 10px;
+}
+
+.table-sm td, .table-sm th {
+  padding: .2rem;
+}
+
+.form-inline label,
+.form-inline .form-control {
+  margin-right: 5px;
+}
+
+.demo-root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.scenario-selection {
+  flex: 0 0 auto;
+}
+
+.graph-workspace {
+  flex: 1 1 100%;
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.selected-nodes-panel {
+  flex: 0 0 400px;
+  margin-right: 20px;
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+}
+
+.selected-nodes-block {
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.export-css {
+  flex: 0 0 auto;
+  margin: 20px 0 0;
+}
+
+.graph-panel {
+  flex: 1 1 100%;
+  display: flex;
+}
+
+.graph-block {
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.graph-view {
+  display: flex;
+  flex: 1 1 100%;
+}
+
+.graph-container {
+  width: 100%;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -23,7 +23,7 @@ module.exports = {
             {test: /\.gif$/, loader: 'url-loader?mimetype=image/gif'},
             {test: /\.png$/, loader: 'url-loader?mimetype=image/png'},
             {
-                test: /\.js$/,
+                test: /\.js.?$/,
                 exclude: /(node_modules)/,
                 loader: 'babel-loader',
                 query: {

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ module.exports = {`
`23`	`23`	`{test: /\.gif$/, loader: 'url-loader?mimetype=image/gif'},`
`24`	`24`	`{test: /\.png$/, loader: 'url-loader?mimetype=image/png'},`
`25`	`25`	`{`
`26`		`- test: /\.js$/,`
	`26`	`+ test: /\.js.?$/,`
`27`	`27`	`exclude: /(node_modules)/,`
`28`	`28`	`loader: 'babel-loader',`
`29`	`29`	`query: {`