modularize css

9 files changed, 123 insertions, 77 deletions

diff --git a/js/Components/Exception.js b/js/Components/Exception.js
index c23cde2..9854bc3 100644
--- a/js/Components/Exception.js
+++ b/js/Components/Exception.js
@@ -1,6 +1,8 @@
 import {Component} from 'react/addons';
 import {TraceLine} from './TraceLine.js';
 
+import style from './Exception.less';
+
 export class Exception extends Component {
 	state = {
 		expanded: false
@@ -21,7 +23,7 @@ export class Exception extends Component {
 				);
 			});
 			traceElements = (
-				<ol className="trace" start="0">
+				<ol className={style.trace} start="0">
 					{traceElements}
 				</ol>
 			)
@@ -30,10 +32,10 @@ export class Exception extends Component {
 		}
 		return (
 			<span
-				className={"exceptionRow " + (this.state.expanded ? 'expanded':'retracted')}
+				className={style.exceptionRow + ' ' + (this.state.expanded ? style.expanded:style.retracted)}
 				onClick={this.clickHandler}>
-				<span className="exception">{this.props.Exception}</span>:&nbsp;
-				<span className="message">{this.props.Message}</span>
+				<span className={style.exception}>{this.props.Exception}</span>:&nbsp;
+				<span className={style.messsage}>{this.props.Message}</span>
 				{traceElements}
 			</span>
 		);
diff --git a/js/Components/Exception.less b/js/Components/Exception.less
new file mode 100644
index 0000000..2e0ed3d
--- /dev/null
+++ b/js/Components/Exception.less
@@ -0,0 +1,32 @@
+.exceptionRow {
+  display: inline-block;
+  width: 100%;
+  cursor: pointer;
+
+  * {
+    cursor: inherit;
+  }
+
+  .exception {
+    font-weight: bold;
+  }
+
+  ol.trace {
+    padding-top: 0.5em;
+  }
+}
+
+.retracted::after, .expanded::after {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  margin: 10px;
+}
+
+.retracted::after {
+  content: '▼';
+}
+
+.expanded::after {
+  content: '▲';
+}
diff --git a/js/Components/LogTable.js b/js/Components/LogTable.js
index 07d9980..6f5cce7 100644
--- a/js/Components/LogTable.js
+++ b/js/Components/LogTable.js
@@ -3,27 +3,29 @@ import {LogEntry} from './LogEntry.js';
 import {LogLevel} from './LogLevel.js';
 import Timestamp from 'react-time';
 
+import style from './LogTable.less';
+
 export class LogTable extends Component {
 	render () {
 		var rows = this.props.entries.map((entry, i) => {
 			var time = new Date(entry.time);
 			return (
-				<tr className={"level_" + entry.level} key={i}>
-					<td className="level"><LogLevel level={entry.level}/></td>
-					<td className="app">{entry.app}</td>
-					<td className="messsage"><LogEntry message={entry.message}/></td>
-					<td className="time"><Timestamp value={time} relative/></td>
+				<tr className={style['level_' + entry.level]} key={i}>
+					<td className={style.level}><LogLevel level={entry.level}/></td>
+					<td className={style.app}>{entry.app}</td>
+					<td className={style.message}><LogEntry message={entry.message}/></td>
+					<td className={style.time}><Timestamp value={time} relative/></td>
 				</tr>
 			)
 		});
 		return (
-			<table className="logs grid">
+			<table className={style.logs}>
 				<thead>
 				<tr>
-					<th className="level">Level</th>
-					<th className="app">App</th>
-					<th className="messsage">Message</th>
-					<th className="time">Time</th>
+					<th className={style.level}>Level</th>
+					<th className={style.app}>App</th>
+					<th className={style.message}>Message</th>
+					<th className={style.time}>Time</th>
 				</tr>
 				</thead>
 				<tbody>
diff --git a/js/Components/LogTable.less b/js/Components/LogTable.less
index ad37c8f..eeff837 100644
--- a/js/Components/LogTable.less
+++ b/js/Components/LogTable.less
@@ -1,46 +1,46 @@
 .logs {
-	width: 100%;
-	white-space: normal;
-	margin-bottom: 14px;
-}
-
-.logs td, table.logs th {
-	vertical-align: top;
-	border-bottom: 1px solid #ddd;
-	padding: .8em;
-	text-align: left;
-	font-weight: normal;
-	position: relative;
-}
-
-.logs .time {
-	width: 100px;
-}
-
-.logs .app {
-	width: 150px;
-}
-
-.logs .level {
-	width: 100px;
-}
-
-/*info*/
-.logs tr.level_1 {
-	background-color: #BDE5F8;
-}
-
-/* warning*/
-.logs tr.level_2 {
-	background-color: #FEEFB3;
-}
-
-/*error*/
-.logs tr.level_3 {
-	background-color: #FFBABA;
-}
-
-/*fatal*/
-.logs tr.level_4 {
-	background-color: #ff8080;
+  width: 100%;
+  white-space: normal;
+  margin-bottom: 14px;
+
+  td, th {
+    vertical-align: top;
+    border-bottom: 1px solid #ddd;
+    padding: .8em;
+    text-align: left;
+    font-weight: normal;
+    position: relative;
+  }
+
+  .time {
+    width: 100px;
+  }
+
+  .app {
+    width: 150px;
+  }
+
+  .level {
+    width: 100px;
+  }
+
+  /*info*/
+  tr.level_1 {
+    background-color: #BDE5F8;
+  }
+
+  /* warning*/
+  tr.level_2 {
+    background-color: #FEEFB3;
+  }
+
+  /*error*/
+  tr.level_3 {
+    background-color: #FFBABA;
+  }
+
+  /*fatal*/
+  tr.level_4 {
+    background-color: #ff8080;
+  }
 }
diff --git a/js/Components/ToggleEntry.js b/js/Components/ToggleEntry.js
index db849dc..237980f 100644
--- a/js/Components/ToggleEntry.js
+++ b/js/Components/ToggleEntry.js
@@ -1,5 +1,7 @@
 import {Component} from 'react/addons';
 
+import style from './ToggleEntry.less';
+
 export class ToggleEntry extends Component {
 	static idCounter = 0;
 	_id = null;
@@ -30,8 +32,8 @@ export class ToggleEntry extends Component {
 
 	render () {
 		return (
-			<li>
-				<a className="checkbox-holder" onClick={this.onClick}>
+			<li className={style.toggleEntry}>
+				<a className={style['checkbox-holder']} onClick={this.onClick}>
 					<input id={this.getCheckBoxId()} type="checkbox"
 						   checked={this.state.active}
 						   readOnly/>
diff --git a/js/Components/ToggleEntry.less b/js/Components/ToggleEntry.less
index bef362c..d2ec080 100644
--- a/js/Components/ToggleEntry.less
+++ b/js/Components/ToggleEntry.less
@@ -1,11 +1,12 @@
-.toggleEntry a {
-	line-height: 30px;
+.toggleEntry {
+  a {
+    line-height: 30px;
+  }
+  input[type="checkbox"] {
+    margin: 5px;
+  }
+  label {
+    margin: 5px;
+  }
 }
 
-.toggleEntry input[type="checkbox"] {
-	margin: 5px;
-}
-
-.toggleEntry label {
-	margin: 5px;
-}
diff --git a/js/Components/TraceLine.js b/js/Components/TraceLine.js
index ebf8923..a3017ba 100644
--- a/js/Components/TraceLine.js
+++ b/js/Components/TraceLine.js
@@ -1,14 +1,16 @@
 import {Component} from 'react/addons';
 
+import style from './TraceLine.less';
+
 export class TraceLine extends Component {
 	render () {
 		return (
-			<li>
-				<span className="file">{this.props.file}</span>
+			<li className={style.line}>
+				<span className={style.file}>{this.props.file}</span>
 				<span
-					className="line">{this.props.lineNumber ? ' - line ' + this.props.lineNumber + ': ' : ''}
+					className={style.line}>{this.props.lineNumber ? ' - line ' + this.props.lineNumber + ': ' : ''}
 				</span>
-				<span className="call">{this.props.call}</span>
+				<span className={style.call}>{this.props.call}</span>
 			</li>
 		);
 	}
diff --git a/js/Components/TraceLine.less b/js/Components/TraceLine.less
new file mode 100644
index 0000000..8a942a6
--- /dev/null
+++ b/js/Components/TraceLine.less
@@ -0,0 +1,7 @@
+.line {
+  padding: 0.3em;
+
+  .file, .line {
+    font-style: italic;
+  }
+}
diff --git a/js/index.js b/js/index.js
index 43eeab5..321f3d9 100644
--- a/js/index.js
+++ b/js/index.js
@@ -4,10 +4,8 @@ import {App} from './App.js';
 
 var React = require('react/addons');
 
-if (process.env.NODE_ENV !== 'production') {
-	// Enable React devtools
-	window.React = React;
-}
+// Enable React devtools
+window.React = React;
 
 $(document).ready(() => {
 	React.render(<App />, document.getElementById('content'));