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

testing some new CSS layouts

Browse Source
This commit is contained in:
Kayne Ruse
2019-06-11 19:56:02 +10:00
parent 12b665248e
commit 7a0877020c
2 changed files with 110 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/shared.css
+53 -42
View File
@@ -88,11 +88,6 @@ a {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.badwrap {
overflow: wrap;
overflow-wrap: break-word;
}
/* footer */ /* footer */
footer { footer {
flex: 0 1 auto; flex: 0 1 auto;
@@ -193,8 +188,6 @@ footer {
align-self: stretch; align-self: stretch;
} }
/* custom styling */
/* SidePanelPage structure */ /* SidePanelPage structure */
.sidePanelPage { .sidePanelPage {
flex: 1; flex: 1;
@@ -210,7 +203,7 @@ footer {
} }
} }
/* left panel */ /* side panel */
.sidePanel { .sidePanel {
flex: 0 1 auto; flex: 0 1 auto;
display: flex; display: flex;
@@ -276,11 +269,62 @@ footer {
min-width: 0; 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 { .table.noCollapse .row, .table .row.noCollapse {
flex-direction: row; flex-direction: row;
border-style: none; 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 */ /* bits and pieces */
.logoutButton { .logoutButton {
align-self: stretch; align-self: stretch;
@@ -296,36 +340,7 @@ footer {
margin-bottom: 2em; margin-bottom: 2em;
} }
pre { .central p.equipmentTextPadding { /* for the row layout (makes the button bigger) */
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 {
padding-top: .25em; padding-top: .25em;
padding-bottom: .25em; padding-bottom: .25em;
} }
@@ -347,7 +362,3 @@ pre {
color-stop(1.00, violet) color-stop(1.00, violet)
); );
} }
.highlight {
background-color: #1a253a;
}
src/components/pages/profile.jsx
+57 -70
View File
@@ -138,49 +138,48 @@ class Profile extends React.Component {
<h1 className='centered'>Your Kingdom</h1> <h1 className='centered'>Your Kingdom</h1>
<div className='table noCollapse'> <div className='table noCollapse'>
<div className='row'> <div className='row'>
<p className='col'>Username:</p> <p className='col truncate'>Username:</p>
<BadgeText name={this.props.profile.activeBadge} filename={this.props.profile.activeBadgeFilename} size={'small'} className='col'>{this.props.profile.username}</BadgeText> <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 double'></div>
<div className='col'></div>
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Gold:</p> <p className='col truncate'>Gold:</p>
<p className='col'>{this.props.profile.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>
<div className='row'> <div className='row'>
<p className='col'>Recruits:</p> <p className='col truncate'>Recruits:</p>
<p className='col'>{this.props.profile.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>
<div className='row'> <div className='row'>
<p className='col'>Soldiers:</p> <p className='col truncate'>Soldiers:</p>
<p className='col'>{this.props.profile.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 truncate' 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={ () => 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>
<div className='row'> <div className='row'>
<p className='col'>Scientists:</p> <p className='col truncate'>Scientists:</p>
<p className='col'>{this.props.profile.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 truncate' 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={ () => 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>
<div className='row'> <div className='row'>
<p className='col'>Spies:</p> <p className='col truncate'>Spies:</p>
<p className='col'>{this.props.profile.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 truncate' 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={ () => 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>
</div> </div>
@@ -211,28 +210,25 @@ class Profile extends React.Component {
<h1 className='centered'>{this.props.profile.username}'s Kingdom</h1> <h1 className='centered'>{this.props.profile.username}'s Kingdom</h1>
<div className='table noCollapse'> <div className='table noCollapse'>
<div className='row'> <div className='row'>
<p className='col'>Username:</p> <p className='col truncate'>Username:</p>
<BadgeText name={this.props.profile.activeBadge} filename={this.props.profile.activeBadgeFilename} size={'small'} className='col'>{this.props.profile.username}</BadgeText> <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 double truncate' />
<div className='col' />
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Gold:</p> <p className='col truncate'>Gold:</p>
<p className='col'>{this.props.profile.gold}</p> <p className='col truncate'>{this.props.profile.gold}</p>
<div className='col' /> <div className='col double' />
<div className='col' />
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Recruits:</p> <p className='col truncate'>Recruits:</p>
<p className='col'>{this.props.profile.recruits}</p> <p className='col truncate'>{this.props.profile.recruits}</p>
<AttackButton <AttackButton
className='col' className={'col double truncate'}
style={{flex: '2 1 2%'}}
setWarning={this.setWarning.bind(this)} setWarning={this.setWarning.bind(this)}
attacker={this.props.account.username} attacker={this.props.account.username}
defender={this.props.profile.username} defender={this.props.profile.username}
@@ -245,12 +241,11 @@ class Profile extends React.Component {
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Soldiers:</p> <p className='col truncate'>Soldiers:</p>
<p className='col'>{this.props.profile.soldiers}</p> <p className='col truncate'>{this.props.profile.soldiers}</p>
<AttackButton <AttackButton
className='col' className={'col double truncate'}
style={{flex: '2 1 2%'}}
setWarning={this.setWarning.bind(this)} setWarning={this.setWarning.bind(this)}
attacker={this.props.account.username} attacker={this.props.account.username}
defender={this.props.profile.username} defender={this.props.profile.username}
@@ -263,19 +258,17 @@ class Profile extends React.Component {
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Scientists:</p> <p className='col truncate'>Scientists:</p>
<p className='col'>{this.props.profile.scientists}</p> <p className='col truncate'>{this.props.profile.scientists}</p>
<div className='col' /> <div className='col double' />
<div className='col' />
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Spies:</p> <p className='col truncate'>Spies:</p>
<p className='col'>{this.props.profile.spies}</p> <p className='col truncate'>{this.props.profile.spies}</p>
<div className='col' /> <div className='col double' />
<div className='col' />
</div> </div>
</div> </div>
</div> </div>
@@ -296,51 +289,45 @@ class Profile extends React.Component {
<h1 className='centered'>{this.props.profile.username}'s Kingdom</h1> <h1 className='centered'>{this.props.profile.username}'s Kingdom</h1>
<div className='table noCollapse'> <div className='table noCollapse'>
<div className='row'> <div className='row'>
<p className='col'>Username:</p> <p className='col truncate'>Username:</p>
<BadgeText name={this.props.profile.activeBadge} filename={this.props.profile.activeBadgeFilename} size={'small'} className='col'>{this.props.profile.username}</BadgeText> <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 double' />
<div className='col' />
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Gold:</p> <p className='col truncate'>Gold:</p>
<p className='col'>{this.props.profile.gold}</p> <p className='col truncate'>{this.props.profile.gold}</p>
<div className='col' /> <div className='col double' />
<div className='col' />
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Recruits:</p> <p className='col truncate'>Recruits:</p>
<p className='col'>{this.props.profile.recruits}</p> <p className='col truncate'>{this.props.profile.recruits}</p>
<div className='col' /> <div className='col double' />
<div className='col' />
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Soldiers:</p> <p className='col truncate'>Soldiers:</p>
<p className='col'>{this.props.profile.soldiers}</p> <p className='col truncate'>{this.props.profile.soldiers}</p>
<div className='col' /> <div className='col double' />
<div className='col' />
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Scientists:</p> <p className='col truncate'>Scientists:</p>
<p className='col'>{this.props.profile.scientists}</p> <p className='col truncate'>{this.props.profile.scientists}</p>
<div className='col' /> <div className='col double' />
<div className='col' />
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Spies:</p> <p className='col truncate'>Spies:</p>
<p className='col'>{this.props.profile.spies}</p> <p className='col truncate'>{this.props.profile.spies}</p>
<div className='col' /> <div className='col double' />
<div className='col' />
</div> </div>
</div> </div>
</div> </div>