From 799998c5bfb3be76efc7d4101ff61e38a3ecd85c Mon Sep 17 00:00:00 2001
From: Kayne Ruse <kayneruse@gmail.com>
Date: Wed, 29 May 2019 08:47:20 +1000
Subject: [PATCH] Added table collapsing

---
 public/styles/shared.css                   | 12 ++++++++
 src/components/panels/paged_combat_log.jsx | 34 +++++++++++-----------
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/public/styles/shared.css b/public/styles/shared.css
index af759b9..d419505 100644
--- a/public/styles/shared.css
+++ b/public/styles/shared.css
@@ -232,6 +232,14 @@ footer {
 .row {
 	flex: 1;
 	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+}
+
+@media screen and (max-width: 480px) {
+	.row {
+		flex-direction: column;
+	}
 }
 
 .col {
@@ -250,4 +258,8 @@ footer {
 	background-color: lightblue;
 	margin-top: 1em;
 	margin-bottom: 2em;
+}
+
+.minWidth { /* hacky */
+	min-width: 80px;
 }
\ No newline at end of file
diff --git a/src/components/panels/paged_combat_log.jsx b/src/components/panels/paged_combat_log.jsx
index 4734793..9ce22b6 100644
--- a/src/components/panels/paged_combat_log.jsx
+++ b/src/components/panels/paged_combat_log.jsx
@@ -20,24 +20,24 @@ class PagedCombatLog extends React.Component {
 		return (
 			<div className='table'>
 				<div className='row'>
-					<p className='col centered'>When</p>
-					<p className='col centered'>Attacker</p>
-					<p className='col centered'>Attacking Force</p>
-					<p className='col centered'>Defending Force</p>
-					<p className='col centered'>Undefended?</p>
-					<p className='col centered'>Victor</p>
-					<p className='col centered'>Gold Lost</p>
-					<p className='col centered'>Victor Casualties</p>
+					<p className='col centered minWidth'>When</p>
+					<p className='col centered minWidth'>Attacker</p>
+					<p className='col centered minWidth'>Attacking Force</p>
+					<p className='col centered minWidth'>Defending Force</p>
+					<p className='col centered minWidth'>Undefended?</p>
+					<p className='col centered minWidth'>Victor</p>
+					<p className='col centered minWidth'>Gold Lost</p>
+					<p className='col centered minWidth'>Victor Casualties</p>
 				</div>
-				{Object.keys(this.state.data).map((key) => <div key={key} className={'row centered'}>
-					<p className='col centered'>{ this.parseDate(this.state.data[key].eventTime) }</p>
-					<p className='col centered'><Link to={`/profile?username=${this.state.data[key].attackerUsername}`} className={'col'}>{this.state.data[key].attackerUsername}</Link></p>
-					<p className='col centered'>{this.state.data[key].attackingUnits}</p>
-					<p className='col centered'>{this.state.data[key].defendingUnits}</p>
-					<p className='col centered'>{this.state.data[key].undefended ? 'yes' : 'no'}</p>
-					<p className='col centered'>{this.state.data[key].victor}</p>
-					<p className='col centered'>{this.state.data[key].spoilsGold}</p>
-					<p className='col centered'>{this.state.data[key].casualtiesVictor}</p>
+				{Object.keys(this.state.data).map((key) => <div key={key} className={'row'}>
+					<p className='col centered minWidth'>{ this.parseDate(this.state.data[key].eventTime) }</p>
+					<p className='col centered minWidth'><Link to={`/profile?username=${this.state.data[key].attackerUsername}`} className={'col'}>{this.state.data[key].attackerUsername}</Link></p>
+					<p className='col centered minWidth'>{this.state.data[key].attackingUnits}</p>
+					<p className='col centered minWidth'>{this.state.data[key].defendingUnits}</p>
+					<p className='col centered minWidth'>{this.state.data[key].undefended ? 'yes' : 'no'}</p>
+					<p className='col centered minWidth'>{this.state.data[key].victor}</p>
+					<p className='col centered minWidth'>{this.state.data[key].spoilsGold}</p>
+					<p className='col centered minWidth'>{this.state.data[key].casualtiesVictor}</p>
 				</div>)}
 			</div>
 		);