Improved ladder appearance on mobile

public/content/instructions.md

@@ -35,7 +35,7 @@ The best way to gain gold in this game is to attack other players. You can do th
 
 <div class="break" />
 
-Untrained recruits gain you 1 gold piece evey 5 minutes - the only unit type that grants a passive income. They also act as a defense force when your soldiers are away, but they have lower combat skills. When recriuts are attacked, it is marked as "undefended" in the combat log. Recruits can still use equipment.
+Untrained recruits gain you 1 gold piece evey 10 minutes - the only unit type that grants a passive income. They also act as a defense force when your soldiers are away, but they have lower combat skills. When recriuts are attacked, it is marked as "undefended" in the combat log. Recruits can still use equipment.
 
 <div class="break" />
 

public/styles/shared.css

@@ -313,7 +313,7 @@ pre {
 
 @media screen and (max-width: 480px) {
 	.show.mobile {
-		display: block;
+		display: inline-block;
 	}
 
 	.hide.mobile {

server/profiles.js

@@ -370,7 +370,7 @@ const ladderRequest = (connection) => (req, res) => {
 };
 
 const runGoldTick = (connection) => {
-	let goldTickJob = new CronJob('0 */5 * * * *', () => {
+	let goldTickJob = new CronJob('0 */10 * * * *', () => {
 		let query = 'UPDATE profiles SET gold = gold + recruits;';
 		connection.query(query, (err) => {
 			if (err) throw err;

src/components/pages/ladder.jsx

@@ -37,7 +37,9 @@ class Ladder extends React.Component {
 					<div className='mainPanel'>
 						<h1 className='centered'>Game Ladder</h1>
 						<ButtonHeader />
-						<br />
+
+						<div className='half break mobile hide' />
+
 						<PagedLadder
 							start={this.state.start}
 							length={this.state.length}

src/components/panels/paged_ladder.jsx

@@ -17,7 +17,7 @@ class PagedLadder extends React.Component {
 	render() {
 		return (
 			<div className='table'>
-				<div className='row'>
+				<div className='row mobile hide'>
 					<p className='col centered'>Username</p>
 					<p className='col centered'>Soldiers</p>
 					<p className='col centered'>Recruits</p>
@@ -28,9 +28,9 @@ class PagedLadder extends React.Component {
 					<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>
+						<p className={'col centered truncate'}><span className='mobile show' style={{whiteSpace: 'pre'}}>Soldiers: </span>{this.state[key].soldiers}</p>
+						<p className={'col centered truncate'}><span className='mobile show' style={{whiteSpace: 'pre'}}>Recruits: </span>{this.state[key].recruits}</p>
+						<p className={'col centered truncate'}><span className='mobile show' style={{whiteSpace: 'pre'}}>Gold: </span>{this.state[key].gold}</p>
 					</div>
 				</div>)}
 			</div>