From b0c66cd1737067805b36336b43d9a96711a66c39 Mon Sep 17 00:00:00 2001
From: Kayne Ruse <kayneruse@gmail.com>
Date: Sat, 1 Jun 2019 06:30:24 +1000
Subject: [PATCH] Adjusted mobile view

---
 public/styles/shared.css                   | 12 +++++---
 src/components/panels/paged_combat_log.jsx | 36 +++++++++++-----------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/public/styles/shared.css b/public/styles/shared.css
index f9d7929..62db646 100644
--- a/public/styles/shared.css
+++ b/public/styles/shared.css
@@ -239,15 +239,23 @@ footer {
 @media screen and (max-width: 480px) {
 	.row {
 		flex-direction: column;
+		border-style: solid;
+		border-color: lightblue;
+		border-top: 0;
+		border-left: 0;
+		border-right: 0;
+		border-bottom: 1;
 	}
 }
 
 .col {
 	flex: 1;
+	min-width: 80px;
 }
 
 .table.noCollapse .row {
 	flex-direction: row;
+	border-style: none;
 }
 
 /* bits and pieces */
@@ -264,10 +272,6 @@ footer {
 	margin-bottom: 2em;
 }
 
-.minWidth { /* hacky */
-	min-width: 80px;
-}
-
 pre {
 	color: pink;
 	background-color: #222222;
diff --git a/src/components/panels/paged_combat_log.jsx b/src/components/panels/paged_combat_log.jsx
index 1550624..30ba00d 100644
--- a/src/components/panels/paged_combat_log.jsx
+++ b/src/components/panels/paged_combat_log.jsx
@@ -29,27 +29,27 @@ class PagedCombatLog extends React.Component {
 		return (
 			<div className='table'>
 				<div className='row'>
-					<p className='col centered minWidth'>When</p>
-					<p className='col centered minWidth'>Attacker</p>
-					<p className='col centered minWidth'>Defender</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 Transferred</p>
-					<p className='col centered minWidth'>Victor Casualties</p>
+					<p className='col centered'>When</p>
+					<p className='col centered'>Attacker</p>
+					<p className='col centered'>Defender</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 Transferred</p>
+					<p className='col centered'>Victor Casualties</p>
 				</div>
 
 				{Object.keys(this.state).map((key) => <div key={key} className={'row'}>
-					<p className='col centered minWidth'>{ this.parseDate(this.state[key].eventTime) }</p>
-					<PrettyName className='col centered minWidth' name={this.state[key].attacker} />
-					<PrettyName className='col centered minWidth' name={this.state[key].defender} />
-					<p className='col centered minWidth'>{this.state[key].attackingUnits}</p>
-					<p className='col centered minWidth'>{this.state[key].defendingUnits}</p>
-					<p className='col centered minWidth'>{this.state[key].undefended ? 'yes' : 'no'}</p>
-					<p className='col centered minWidth'>{this.state[key].victor}</p>
-					<p className='col centered minWidth'>{this.state[key].spoilsGold}</p>
-					<p className='col centered minWidth'>{this.state[key].casualtiesVictor}</p>
+					<p className='col centered'>{ this.parseDate(this.state[key].eventTime) }</p>
+					<PrettyName className='col centered' name={this.state[key].attacker} />
+					<PrettyName className='col centered' name={this.state[key].defender} />
+					<p className='col centered'>{this.state[key].attackingUnits}</p>
+					<p className='col centered'>{this.state[key].defendingUnits}</p>
+					<p className='col centered'>{this.state[key].undefended ? 'yes' : 'no'}</p>
+					<p className='col centered'>{this.state[key].victor}</p>
+					<p className='col centered'>{this.state[key].spoilsGold}</p>
+					<p className='col centered'>{this.state[key].casualtiesVictor}</p>
 				</div>)}
 			</div>
 		);