improve log table on small screens

Author: icewind1991

css/app.css

@@ -0,0 +1,3 @@
+.content {
+	width: 100%;
+}

js/App.js

@@ -4,11 +4,11 @@ import ReactScrolla from 'react-scrolla';
 import {LogProvider} from './Providers/LogProvider.js';
 import {LogTable} from './Components/LogTable.js';
 import {ToggleEntry} from './Components/ToggleEntry.js';
-import {App as AppContainer, SideBar} from 'oc-react-components';
+import {App as AppContainer, SideBar, Content} from 'oc-react-components';
 
 import {LogSearch} from './Search.js';
 
-require('../css/app.css');
+import styles from '../css/app.css';
 
 export class App extends Component {
 	state = {
@@ -71,7 +71,9 @@ export class App extends Component {
 					percentage={85}
 					onPercentage={this.fetchNextPage}
 					isLoading={this.state.loading}>
-					<LogTable entries={entries}/>
+					<div className={styles.content}>
+						<LogTable entries={entries}/>
+					</div>
 				</ReactScrolla>
 			</AppContainer>
 		);

js/Components/LogTable.js

@@ -2,6 +2,7 @@ import {Component} from 'react/addons';
 import {LogEntry} from './LogEntry.js';
 import {LogLevel} from './LogLevel.js';
 import Timestamp from 'react-time';
+import MediaQuery from 'react-responsive';
 
 import style from './LogTable.less';
 
@@ -11,27 +12,56 @@ export class LogTable extends Component {
 			var time = new Date(entry.time);
 			return (
 				<tr className={style['level_' + entry.level]} key={i}>
-					<td className={style.level}><LogLevel level={entry.level}/></td>
+					<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>
+					<td className={style.message}><LogEntry
+						message={entry.message}/></td>
+					<td className={style.time}><Timestamp value={time}
+														  relative/></td>
 				</tr>
 			)
 		});
+
+		var smallRows = this.props.entries.map((entry, i) => {
+			var time = new Date(entry.time);
+			return (
+				<div className={style['level_' + entry.level] + ' ' + style.row} key={i}>
+					<div className={style.level + ' ' + style.column}><LogLevel level={entry.level}/>
+					</div>
+					<div className={style.app + ' ' + style.column}>{entry.app}</div>
+
+					<div className={style.time + ' ' + style.column}><Timestamp value={time}
+														   relative/></div>
+					<div className={style.message + ' ' + style.column}><LogEntry
+						message={entry.message}/></div>
+				</div>
+			)
+		});
+
 		return (
-			<table className={style.logs}>
-				<thead>
-				<tr>
-					<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>
-				{rows}
-				</tbody>
-			</table>
+			<div>
+				<MediaQuery minWidth={750}>
+					<table className={style.logs}>
+						<thead>
+						<tr>
+							<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>
+						{rows}
+						</tbody>
+					</table>
+				</MediaQuery>
+				<MediaQuery maxWidth={750}>
+					<div className={style.logs}>
+						{smallRows}
+					</div>
+				</MediaQuery>
+			</div>
 		);
 	}
 }

js/Components/LogTable.less

@@ -2,6 +2,7 @@
   width: 100%;
   white-space: normal;
   margin-bottom: 14px;
+  table-layout: fixed;
 
   td, th {
     vertical-align: top;
@@ -25,22 +26,49 @@
   }
 
   /*info*/
-  tr.level_1 {
+  .level_1 {
     background-color: #BDE5F8;
   }
 
   /* warning*/
-  tr.level_2 {
+  .level_2 {
     background-color: #FEEFB3;
   }
 
   /*error*/
-  tr.level_3 {
+  .level_3 {
     background-color: #FFBABA;
   }
 
   /*fatal*/
-  tr.level_4 {
+  .level_4 {
     background-color: #ff8080;
   }
+
+  div.column {
+    box-sizing: border-box;
+    padding: 7px;
+  }
+  
+  div.level {
+    font-weight: bold;
+  }
+
+  div.level, div.app, div.time {
+    display: inline-block;
+    width: 33%;
+  }
+
+  div.time {
+    text-align: right;
+    padding-right: 20px;
+  }
+
+  div.row {
+    position: relative;
+  }
+
+  div.message {
+    border-bottom: 1px solid #888;
+  }
 }

js/index.js

@@ -8,5 +8,5 @@ var React = require('react/addons');
 window.React = React;
 
 $(document).ready(() => {
-	React.render(<App />, document.getElementById('content'));
+	React.render(<App />, document.getElementById('content-wrapper'));
 });

package.json

@@ -60,6 +60,7 @@
     "less-loader": "^2.2.0",
     "oc-react-components": "^0.1.5",
     "react": "^0.13.3",
+    "react-responsive": "0.0.8",
     "react-scrolla": "^0.1.0",
     "react-time": "^3.0.0"
   }