List styling

public/content/task_list.md

@@ -9,16 +9,15 @@ Minor
 ---
 
 * Disable attack button with no soldiers.
-* Implement combat log rows.
 * Implement game ladder sorting.
 * Implement badges.
-* Implement Patreon thank you page.
 
 Patch
 ---
 
 * Game Balance.
 * Images to social media instead of links.
+* Center the common links on mobile.
 
 Wishlist
 ---

public/styles/shared.css

@@ -47,13 +47,21 @@ h2 {
 }
 
 br {
-	padding-bottom: .5rem;
+	padding-bottom: .5em;
+}
+
+div.break.half {
+	padding-bottom: .25em;
+}
+
+div.break {
+	padding-bottom: .5em;
 }
 
 ul {
 	list-style-type: disc;
 	list-style-position: inside;
-	padding-bottom: .5rem;
+	padding-bottom: .5em;
 }
 
 a {
@@ -106,7 +114,7 @@ footer {
 }
 
 .central p {
-	padding-bottom: .5rem;
+	padding-bottom: .5em;
 }
 
 /* components */
@@ -244,7 +252,7 @@ footer {
 	justify-content: flex-start;
 }
 
-.row {
+.table .row {
 	flex: 1;
 	display: flex;
 	flex-direction: row;
@@ -252,23 +260,17 @@ footer {
 }
 
 @media screen and (max-width: 480px) {
-	.row {
+	.table .row {
 		flex-direction: column;
-		border-style: solid;
-		border-color: lightblue;
-		border-top: 0;
-		border-left: 0;
-		border-right: 0;
-		border-bottom: 1;
 	}
 }
 
-.col {
+.table .row .col {
 	flex: 1 1 1%;
 	min-width: 0;
 }
 
-.table.noCollapse .row {
+.table.noCollapse .row, .table .row.noCollapse {
 	flex-direction: row;
 	border-style: none;
 }
@@ -276,7 +278,7 @@ footer {
 /* bits and pieces */
 .logoutButton {
 	align-self: stretch;
-	margin-bottom: .5rem;
+	margin-bottom: .5em;
 }
 
 .newsLine {
@@ -294,3 +296,22 @@ pre {
 	margin-top: 1em;
 	margin-bottom: 1em;
 }
+
+.show.mobile {
+	display: none;
+}
+
+@media screen and (max-width: 480px) {
+	.show.mobile {
+		display: block;
+	}
+
+	.hide.mobile {
+		display: none;
+	}
+}
+
+.central p.equipmentTextPadding {
+	padding-top: .25em;
+	padding-bottom: .25em;
+}

src/components/pages/combat_log.jsx

@@ -74,11 +74,11 @@ class CombatLog extends React.Component {
 
 	buttonHeader() {
 		return (
-			<div className='table'>
+			<div className='table noCollapse'>
 				<div className='row'>
 					<button className='col' onClick={ this.decrement.bind(this) }>{'< Back'}</button>
-					<div className='col' />
+					<div className='col hide mobile' />
-					<div className='col' />
+					<div className='col hide mobile' />
 					<button className='col' onClick={ this.increment.bind(this) }>{'Next >'}</button>
 				</div>
 			</div>

src/components/pages/ladder.jsx

@@ -37,6 +37,7 @@ class Ladder extends React.Component {
 					<div className='mainPanel'>
 						<h1 className='centered'>Game Ladder</h1>
 						<ButtonHeader />
+						<br />
 						<PagedLadder
 							start={this.state.start}
 							length={this.state.length}
@@ -52,11 +53,11 @@ class Ladder extends React.Component {
 
 	buttonHeader() {
 		return (
-			<div className='table'>
+			<div className='table noCollapse'>
 				<div className='row'>
 					<button className='col' onClick={this.decrement.bind(this)}>{'< Back'}</button>
-					<div className='col' />
+					<div className='col hide mobile' />
-					<div className='col' />
+					<div className='col hide mobile' />
 					<button className='col' onClick={this.increment.bind(this)}>{'Next >'}</button>
 				</div>
 			</div>

src/components/panels/combat_log_record.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+class CombatLogRecord extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			//
+		};
+	}
+
+	render() {
+		return (
+			<div className='table noCollapse'>
+				<hr />
+				<div className='break' />
+				<div className='row'>
+					<p className='col truncate'>{this.parseDate(this.props.eventTime)}</p>
+					<p className='col truncate'>Atk: {this.prettyName(this.props.attacker)} ({this.props.attackingUnits} units)</p>
+					<p className='col truncate'>Def: {this.prettyName(this.props.defender)} ({this.props.defendingUnits} units)</p>
+				</div>
+
+				<div className='row'>
+					<p className='col truncate'>Victor: {this.capitalizeFirstLetter(this.props.victor)} {this.props.undefended ? '(undefended)' : ''}</p>
+					<p className='col truncate'>Gold: {this.props.spoilsGold}</p>
+					<p className='col truncate'>Atk. Deaths: {this.props.attackerCasualties}</p>
+				</div>
+			</div>
+		);
+	}
+
+	prettyName(name) {
+		//make the enemy name a link
+		if (name === this.props.username) {
+			return name;
+		} else {
+			return (<Link to={`/profile?username=${name}`}>{name}</Link>);
+		}
+	}
+
+	parseDate(eventTime) {
+		let month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+		let date = new Date(eventTime);
+		return `${date.getDate()} ${month[date.getMonth()]}`;
+	}
+
+	capitalizeFirstLetter(str) {
+		return str.charAt(0).toUpperCase() + str.slice(1);
+	}
+};
+
+CombatLogRecord.propTypes = {
+	username: PropTypes.string.isRequired,
+	eventTime: PropTypes.string.isRequired,
+	attacker: PropTypes.string.isRequired,
+	defender: PropTypes.string.isRequired,
+	attackingUnits: PropTypes.number.isRequired,
+	defendingUnits: PropTypes.number.isRequired,
+	undefended: PropTypes.number.isRequired,
+	victor: PropTypes.string.isRequired,
+	spoilsGold: PropTypes.number.isRequired,
+	attackerCasualties: PropTypes.number.isRequired
+};
+
+export default withRouter(CombatLogRecord);

src/components/panels/equipment.jsx

@@ -36,16 +36,25 @@ class Equipment extends React.Component {
 						<p className='col centered truncate'>Name</p>
 						<p className='col centered truncate'>Type</p>
 						<p className='col centered truncate'>Owned</p>
-						<p className='col centered truncate'>Buy</p>
+						<p className='col centered truncate mobile hide'>Buy</p>
-						<p className='col centered truncate'>Sell</p>
+						<p className='col centered truncate mobile hide'>Sell</p>
 					</div>
 
-					{Object.keys(display).map((key) => <div className='row' key={key}>
+					<hr className='mobile show' />
-						<p className='col centered truncate'>{display[key].name}</p>
+
-						<p className='col centered truncate'>{display[key].type}</p>
+					{Object.keys(display).map((key) => <div key={key}>
-						<p className='col centered truncate'>{display[key].owned}</p>
+						<hr className='mobile hide'/>
+						<div className='break' />
+						<div className='row'>
+							<p className='col centered truncate equipmentTextPadding'>{display[key].name}</p>
+							<p className='col centered truncate equipmentTextPadding'>{display[key].type}</p>
+							<p className='col centered truncate equipmentTextPadding'>{display[key].owned}</p>
+							<div className='col row noCollapse' style={{flex: '1 1 20%'}}>
 								{display[key].purchasable ? <button className='col centered truncate' onClick={() => this.sendRequest('/equipmentpurchaserequest', { name: display[key].name, type: display[key].type }) } disabled={display[key].cost > this.props.gold}>Buy ({display[key].cost} gold)</button> : <div className='col centered truncate' />}
 								{display[key].saleable ? <button className='col centered truncate' onClick={() => this.sendRequest('/equipmentsellrequest', { name: display[key].name, type: display[key].type }) } disabled={display[key].owned === 0}>Sell ({Math.floor(display[key].cost/2)} gold)</button> : <div className='col centered truncate' />}
+							</div>
+						</div>
+						<div className='break' />
 					</div>)}
 				</div>
 			</div>

src/components/panels/paged_combat_log.jsx

@@ -3,13 +3,15 @@ import { withRouter, Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
+import CombatLogRecord from './combat_log_record.jsx';
+
 class PagedCombatLog extends React.Component {
 	constructor(props) {
 		super(props);
 
 		this.state = {
 			//
-		}
+		};
 
 		if (props.getFetch) {
 			props.getFetch(() => this.sendRequest('/combatlogrequest', {username: props.username, start: props.start, length: props.length}));
@@ -17,40 +19,9 @@ class PagedCombatLog extends React.Component {
 	}
 
 	render() {
-		//make the enemy name a link
-		const PrettyName = (props) => {
-			if (props.name === this.props.username) {
-				return (<p {...props}>{props.name}</p>);
-			} else {
-				return (<p {...props}><Link to={`/profile?username=${props.name}`}>{props.name}</Link></p>);
-			}
-		};
-
 		return (
-			<div className='table'>
+			<div>
-				<div className='row'>
+				{Object.keys(this.state).map((key) => <CombatLogRecord key={key} username={this.props.username} {...this.state[key]} />)}
-					<p className='col centered badwrap'>When</p>
-					<p className='col centered badwrap'>Attacker</p>
-					<p className='col centered badwrap'>Defender</p>
-					<p className='col centered badwrap'>Attacking Force</p>
-					<p className='col centered badwrap'>Defending Force</p>
-					<p className='col centered badwrap'>Undefended?</p>
-					<p className='col centered badwrap'>Victor</p>
-					<p className='col centered badwrap'>Gold Stolen</p>
-					<p className='col centered badwrap'>Attacker Deaths</p>
-				</div>
-
-				{Object.keys(this.state).map((key) => <div key={key} className={'row'}>
-					<p className='col centered truncate'>{ this.parseDate(this.state[key].eventTime) }</p>
-					<PrettyName className='col centered truncate' name={this.state[key].attacker} />
-					<PrettyName className='col centered truncate' name={this.state[key].defender} />
-					<p className='col centered truncate'>{this.state[key].attackingUnits}</p>
-					<p className='col centered truncate'>{this.state[key].defendingUnits}</p>
-					<p className='col centered truncate'>{this.state[key].undefended ? 'yes' : 'no'}</p>
-					<p className='col centered truncate'>{this.state[key].victor}</p>
-					<p className='col centered truncate'>{this.state[key].spoilsGold}</p>
-					<p className='col centered truncate'>{this.state[key].attackerCasualties}</p>
-				</div>)}
 			</div>
 		);
 	}
@@ -86,13 +57,6 @@ class PagedCombatLog extends React.Component {
 			...args
 		}));
 	}
-
-	parseDate(eventTime) {
-		let month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-
-		let date = new Date(eventTime);
-		return `${date.getDate()} ${month[date.getMonth()]}`;
-	}
 };
 
 PagedCombatLog.propTypes = {

src/components/panels/paged_ladder.jsx

@@ -23,11 +23,15 @@ class PagedLadder extends React.Component {
 					<p className='col centered'>Recruits</p>
 					<p className='col centered'>Gold</p>
 				</div>
-				{Object.keys(this.state).map((key) => <div key={key} className={'row'}>
+				{Object.keys(this.state).map((key) =><div key={key}>
+					<hr />
+					<div className='break' />
+					<div className={'row'}>
 						<p className={'col centered truncate'}><Link to={`/profile?username=${this.state[key].username}`}>{this.state[key].username}</Link></p>
 						<p className={'col centered truncate'}>{this.state[key].soldiers}</p>
 						<p className={'col centered truncate'}>{this.state[key].recruits}</p>
 						<p className={'col centered truncate'}>{this.state[key].gold}</p>
+					</div>
 				</div>)}
 			</div>
 		);