testing some new CSS layouts

public/styles/shared.css

@@ -88,11 +88,6 @@ a {
 	text-overflow: ellipsis;
 }
 
-.badwrap {
-	overflow: wrap;
-	overflow-wrap: break-word;
-}
-
 /* footer */
 footer {
 	flex: 0 1 auto;
@@ -193,8 +188,6 @@ footer {
 	align-self: stretch;
 }
 
-/* custom styling */
-
 /* SidePanelPage structure */
 .sidePanelPage {
 	flex: 1;
@@ -210,7 +203,7 @@ footer {
 	}
 }
 
-/* left panel */
+/* side panel */
 .sidePanel {
 	flex: 0 1 auto;
 	display: flex;
@@ -276,11 +269,62 @@ footer {
 	min-width: 0;
 }
 
+.table .row .col.double {
+	flex: 2 1 2%;
+}
+
+@media screen and (max-width: 480px) {
+	.table .row .col.double {
+		flex: 2 1 2.5%;
+	}
+}
+
 .table.noCollapse .row, .table .row.noCollapse {
 	flex-direction: row;
 	border-style: none;
 }
 
+/* mobile control */
+.mobile.show {
+	display: none;
+}
+
+.mobile.centered {
+	text-align: initial;
+}
+
+@media screen and (max-width: 480px) {
+	.mobile.show {
+		display: inline-block;
+	}
+
+	.mobile.hide {
+		display: none;
+	}
+
+	.mobile.centered {
+		text-align: center;
+	}
+
+	/* hybrid of table and mobile control */
+	.mobile.col.half {
+		flex: 0.5;
+	}
+}
+
+/* --- custom styling below this line --- */
+
+.highlight {
+	background-color: #1a253a;
+}
+
+pre {
+	color: pink;
+	background-color: #1a253a;
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+
 /* bits and pieces */
 .logoutButton {
 	align-self: stretch;
@@ -296,36 +340,7 @@ footer {
 	margin-bottom: 2em;
 }
 
-pre {
-	color: pink;
-	background-color: #1a253a;
-	margin-top: 1em;
-	margin-bottom: 1em;
-}
-
-.show.mobile {
-	display: none;
-}
-
-.centered.mobile {
-	text-align: initial;
-}
-
-@media screen and (max-width: 480px) {
-	.show.mobile {
-		display: inline-block;
-	}
-
-	.hide.mobile {
-		display: none;
-	}
-
-	.centered.mobile {
-		text-align: center;
-	}
-}
-
-.central p.equipmentTextPadding {
+.central p.equipmentTextPadding { /* for the row layout (makes the button bigger) */
 	padding-top: .25em;
 	padding-bottom: .25em;
 }
@@ -347,7 +362,3 @@ pre {
 		color-stop(1.00, violet)
 	);
 }
-
-.highlight {
-	background-color: #1a253a;
-}

src/components/pages/profile.jsx

@@ -138,49 +138,48 @@ class Profile extends React.Component {
 				<h1 className='centered'>Your Kingdom</h1>
 				<div className='table noCollapse'>
 					<div className='row'>
-						<p className='col'>Username:</p>
-						<BadgeText name={this.props.profile.activeBadge} filename={this.props.profile.activeBadgeFilename} size={'small'} className='col'>{this.props.profile.username}</BadgeText>
+						<p className='col truncate'>Username:</p>
+						<BadgeText className={'col'} name={this.props.profile.activeBadge} filename={this.props.profile.activeBadgeFilename} size={'small'}>{this.props.profile.username}</BadgeText>
 
-						<div className='col'></div>
-						<div className='col'></div>
+						<div className='col double'></div>
 					</div>
 
 					<div className='row'>
-						<p className='col'>Gold:</p>
-						<p className='col'>{this.props.profile.gold}</p>
+						<p className='col truncate'>Gold:</p>
+						<p className='col mobile half truncate'>{this.props.profile.gold}</p>
 
-						<p className='col truncate' style={{flex: '2 1 2%'}}>(+1 gold for each recruit every half hour)</p>
+						<p className='col double truncate'>(+1 gold for each recruit)</p>
 					</div>
 
 					<div className='row'>
-						<p className='col'>Recruits:</p>
-						<p className='col'>{this.props.profile.recruits}</p>
+						<p className='col truncate'>Recruits:</p>
+						<p className='col mobile half truncate'>{this.props.profile.recruits}</p>
 
-						<button className='col' style={{flex: '2 1 2%'}} onClick={ () => this.sendRequest('/recruitrequest') }>Recruit More Units</button>
+						<button className='col double truncate' onClick={ () => this.sendRequest('/recruitrequest') }>Recruit More Units</button>
 					</div>
 
 					<div className='row'>
-						<p className='col'>Soldiers:</p>
-						<p className='col'>{this.props.profile.soldiers}</p>
+						<p className='col truncate'>Soldiers:</p>
+						<p className='col mobile half truncate'>{this.props.profile.soldiers}</p>
 
-						<button className='col' onClick={ () => this.sendRequest('/trainrequest', {role: 'soldier'}) }>Train Soldier (100 gold)</button>
-						<button className='col' onClick={ () => window.confirm('Are you sure you want to untrain? (you won\'t get your gold back!)') && this.sendRequest('/untrainrequest', {role: 'soldier'}) }>Untrain Soldier</button>
+						<button className='col truncate' onClick={ () => this.sendRequest('/trainrequest', {role: 'soldier'}) }>Train Soldier (100 gold)</button>
+						<button className='col truncate' onClick={ () => window.confirm('Are you sure you want to untrain? (you won\'t get your gold back!)') && this.sendRequest('/untrainrequest', {role: 'soldier'}) }>Untrain Soldier</button>
 					</div>
 
 					<div className='row'>
-						<p className='col'>Scientists:</p>
-						<p className='col'>{this.props.profile.scientists}</p>
+						<p className='col truncate'>Scientists:</p>
+						<p className='col mobile half truncate'>{this.props.profile.scientists}</p>
 
-						<button className='col' onClick={ () => this.sendRequest('/trainrequest', {role: 'scientist'}) }>Train Scientist (120 gold)</button>
-						<button className='col' onClick={ () => window.confirm('Are you sure you want to untrain? (you won\'t get your gold back!)') && this.sendRequest('/untrainrequest', {role: 'scientist'}) }>Untrain Scientist</button>
+						<button className='col truncate' onClick={ () => this.sendRequest('/trainrequest', {role: 'scientist'}) }>Train Scientist (120 gold)</button>
+						<button className='col truncate' onClick={ () => window.confirm('Are you sure you want to untrain? (you won\'t get your gold back!)') && this.sendRequest('/untrainrequest', {role: 'scientist'}) }>Untrain Scientist</button>
 					</div>
 
 					<div className='row'>
-						<p className='col'>Spies:</p>
-						<p className='col'>{this.props.profile.spies}</p>
+						<p className='col truncate'>Spies:</p>
+						<p className='col mobile half truncate'>{this.props.profile.spies}</p>
 
-						<button className='col' onClick={ () => this.sendRequest('/trainrequest', {role: 'spy'}) }>Train Spy (300 gold)</button>
-						<button className='col' onClick={ () => window.confirm('Are you sure you want to untrain? (you won\'t get your gold back!)') && this.sendRequest('/untrainrequest', {role: 'spy'}) }>Untrain Spy</button>
+						<button className='col truncate' onClick={ () => this.sendRequest('/trainrequest', {role: 'spy'}) }>Train Spy (300 gold)</button>
+						<button className='col truncate' onClick={ () => window.confirm('Are you sure you want to untrain? (you won\'t get your gold back!)') && this.sendRequest('/untrainrequest', {role: 'spy'}) }>Untrain Spy</button>
 					</div>
 				</div>
 
@@ -211,28 +210,25 @@ class Profile extends React.Component {
 				<h1 className='centered'>{this.props.profile.username}'s Kingdom</h1>
 				<div className='table noCollapse'>
 					<div className='row'>
-						<p className='col'>Username:</p>
-						<BadgeText name={this.props.profile.activeBadge} filename={this.props.profile.activeBadgeFilename} size={'small'} className='col'>{this.props.profile.username}</BadgeText>
+						<p className='col truncate'>Username:</p>
+						<BadgeText className={'col'} name={this.props.profile.activeBadge} filename={this.props.profile.activeBadgeFilename} size={'small'}>{this.props.profile.username}</BadgeText>
 
-						<div className='col' />
-						<div className='col' />
+						<div className='col double truncate' />
 					</div>
 
 					<div className='row'>
-						<p className='col'>Gold:</p>
-						<p className='col'>{this.props.profile.gold}</p>
+						<p className='col truncate'>Gold:</p>
+						<p className='col truncate'>{this.props.profile.gold}</p>
 
-						<div className='col' />
-						<div className='col' />
+						<div className='col double' />
 					</div>
 
 					<div className='row'>
-						<p className='col'>Recruits:</p>
-						<p className='col'>{this.props.profile.recruits}</p>
+						<p className='col truncate'>Recruits:</p>
+						<p className='col truncate'>{this.props.profile.recruits}</p>
 
 						<AttackButton
-							className='col'
-							style={{flex: '2 1 2%'}}
+							className={'col double truncate'}
 							setWarning={this.setWarning.bind(this)}
 							attacker={this.props.account.username}
 							defender={this.props.profile.username}
@@ -245,12 +241,11 @@ class Profile extends React.Component {
 					</div>
 
 					<div className='row'>
-						<p className='col'>Soldiers:</p>
-						<p className='col'>{this.props.profile.soldiers}</p>
+						<p className='col truncate'>Soldiers:</p>
+						<p className='col truncate'>{this.props.profile.soldiers}</p>
 
 						<AttackButton
-							className='col'
-							style={{flex: '2 1 2%'}}
+							className={'col double truncate'}
 							setWarning={this.setWarning.bind(this)}
 							attacker={this.props.account.username}
 							defender={this.props.profile.username}
@@ -263,19 +258,17 @@ class Profile extends React.Component {
 					</div>
 
 					<div className='row'>
-						<p className='col'>Scientists:</p>
-						<p className='col'>{this.props.profile.scientists}</p>
+						<p className='col truncate'>Scientists:</p>
+						<p className='col truncate'>{this.props.profile.scientists}</p>
 
-						<div className='col' />
-						<div className='col' />
+						<div className='col double' />
 					</div>
 
 					<div className='row'>
-						<p className='col'>Spies:</p>
-						<p className='col'>{this.props.profile.spies}</p>
+						<p className='col truncate'>Spies:</p>
+						<p className='col truncate'>{this.props.profile.spies}</p>
 
-						<div className='col' />
-						<div className='col' />
+						<div className='col double' />
 					</div>
 				</div>
 			</div>
@@ -296,51 +289,45 @@ class Profile extends React.Component {
 				<h1 className='centered'>{this.props.profile.username}'s Kingdom</h1>
 				<div className='table noCollapse'>
 					<div className='row'>
-						<p className='col'>Username:</p>
-						<BadgeText name={this.props.profile.activeBadge} filename={this.props.profile.activeBadgeFilename} size={'small'} className='col'>{this.props.profile.username}</BadgeText>
+						<p className='col truncate'>Username:</p>
+						<BadgeText className={'col'} name={this.props.profile.activeBadge} filename={this.props.profile.activeBadgeFilename} size={'small'}>{this.props.profile.username}</BadgeText>
 
-						<div className='col' />
-						<div className='col' />
+						<div className='col double' />
 					</div>
 
 					<div className='row'>
-						<p className='col'>Gold:</p>
-						<p className='col'>{this.props.profile.gold}</p>
+						<p className='col truncate'>Gold:</p>
+						<p className='col truncate'>{this.props.profile.gold}</p>
 
-						<div className='col' />
-						<div className='col' />
+						<div className='col double' />
 					</div>
 
 					<div className='row'>
-						<p className='col'>Recruits:</p>
-						<p className='col'>{this.props.profile.recruits}</p>
+						<p className='col truncate'>Recruits:</p>
+						<p className='col truncate'>{this.props.profile.recruits}</p>
 
-						<div className='col' />
-						<div className='col' />
+						<div className='col double' />
 					</div>
 
 					<div className='row'>
-						<p className='col'>Soldiers:</p>
-						<p className='col'>{this.props.profile.soldiers}</p>
+						<p className='col truncate'>Soldiers:</p>
+						<p className='col truncate'>{this.props.profile.soldiers}</p>
 
-						<div className='col' />
-						<div className='col' />
+						<div className='col double' />
 					</div>
 
 					<div className='row'>
-						<p className='col'>Scientists:</p>
-						<p className='col'>{this.props.profile.scientists}</p>
+						<p className='col truncate'>Scientists:</p>
+						<p className='col truncate'>{this.props.profile.scientists}</p>
 
-						<div className='col' />
-						<div className='col' />
+						<div className='col double' />
 					</div>
 
 					<div className='row'>
-						<p className='col'>Spies:</p>
-						<p className='col'>{this.props.profile.spies}</p>
+						<p className='col truncate'>Spies:</p>
+						<p className='col truncate'>{this.props.profile.spies}</p>
 
-						<div className='col' />
-						<div className='col' />
+						<div className='col double' />
 					</div>
 				</div>
 			</div>