Ratstail91/kingdombattles
Archived
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Centered common text on mobile

Browse Source
This commit is contained in:
Kayne Ruse
2019-06-03 11:50:07 +10:00
parent f456113467
commit 6b272d06e4
3 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/content/task_list.md
-1
View File
@@ -17,7 +17,6 @@ Patch
* Game Balance. * Game Balance.
* Images to social media instead of links. * Images to social media instead of links.
* Center the common links on mobile.
Wishlist Wishlist
--- ---
public/styles/shared.css
+8
View File
@@ -301,6 +301,10 @@ pre {
display: none; display: none;
} }
.centered.mobile {
text-align: initial;
}
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.show.mobile { .show.mobile {
display: block; display: block;
@@ -309,6 +313,10 @@ pre {
.hide.mobile { .hide.mobile {
display: none; display: none;
} }
.centered.mobile {
text-align: center;
}
} }
.central p.equipmentTextPadding { .central p.equipmentTextPadding {
src/components/panels/common_links.jsx
+13 -13
View File
@@ -28,13 +28,13 @@ class CommonLinks extends React.Component {
if (this.props.loggedIn) { if (this.props.loggedIn) {
return ( return (
<div className='panel'> <div className='panel'>
<p><Link to='/profile' onClick={this.props.onClickProfile}>Your Kingdom</Link></p> <p className='mobile centered'><Link to='/profile' onClick={this.props.onClickProfile}>Your Kingdom</Link></p>
<p><Link to='/equipment' onClick={this.props.onClickCombatLog}>Your Equipment</Link></p> <p className='mobile centered'><Link to='/equipment' onClick={this.props.onClickCombatLog}>Your Equipment</Link></p>
<p><Link to='/ladder' onClick={this.props.onClickLadder}>Game Ladder</Link></p> <p className='mobile centered'><Link to='/ladder' onClick={this.props.onClickLadder}>Game Ladder</Link></p>
<p><Link to='/combatlog' onClick={this.props.onClickCombatLog}>Combat Log</Link></p> <p className='mobile centered'><Link to='/combatlog' onClick={this.props.onClickCombatLog}>Combat Log</Link></p>
<p><Link to='/passwordchange' onClick={this.props.onClickPasswordChange}>Change Password</Link></p> <p className='mobile centered'><Link to='/passwordchange' onClick={this.props.onClickPasswordChange}>Change Password</Link></p>
<p><Link to='/tasklist' onClick={this.props.onClickTaskList}>Task List</Link></p> <p className='mobile centered'><Link to='/tasklist' onClick={this.props.onClickTaskList}>Task List</Link></p>
<p><Link to='/patronlist' onClick={this.props.onClickTaskList}>Patron List</Link></p> <p className='mobile centered'><Link to='/patronlist' onClick={this.props.onClickTaskList}>Patron List</Link></p>
<Extra /> <Extra />
@@ -44,12 +44,12 @@ class CommonLinks extends React.Component {
} else { //if not logged in } else { //if not logged in
return ( return (
<div className='panel'> <div className='panel'>
<p><Link to='/signup' onClick={this.props.onClickSignup}>Sign Up</Link></p> <p className='mobile centered'><Link to='/signup' onClick={this.props.onClickSignup}>Sign Up</Link></p>
<p><Link to='/login' onClick={this.props.onClickLogin}>Login</Link></p> <p className='mobile centered'><Link to='/login' onClick={this.props.onClickLogin}>Login</Link></p>
<p><Link to='/passwordrecover' onClick={this.props.onClickPasswordRecover}>Recover Password</Link></p> <p className='mobile centered'><Link to='/passwordrecover' onClick={this.props.onClickPasswordRecover}>Recover Password</Link></p>
<p><Link to='/ladder' onClick={this.props.onClickLadder}>Game Ladder</Link></p> <p className='mobile centered'><Link to='/ladder' onClick={this.props.onClickLadder}>Game Ladder</Link></p>
<p><Link to='/tasklist' onClick={this.props.onClickTaskList}>Task List</Link></p> <p className='mobile centered'><Link to='/tasklist' onClick={this.props.onClickTaskList}>Task List</Link></p>
<p><Link to='/patronlist' onClick={this.props.onClickTaskList}>Patron List</Link></p> <p className='mobile centered'><Link to='/patronlist' onClick={this.props.onClickTaskList}>Patron List</Link></p>
<Extra /> <Extra />
</div> </div>