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

Added table collapsing

Browse Source
This commit is contained in:
Kayne Ruse
2019-05-29 08:47:20 +10:00
parent 6e0aaa7b9e
commit 799998c5bf
2 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/shared.css
+12
View File
@@ -232,6 +232,14 @@ footer {
.row {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
@media screen and (max-width: 480px) {
.row {
flex-direction: column;
}
}
.col {
@@ -251,3 +259,7 @@ footer {
margin-top: 1em;
margin-bottom: 2em;
}
.minWidth { /* hacky */
min-width: 80px;
}
src/components/panels/paged_combat_log.jsx
+17 -17
View File
@@ -20,24 +20,24 @@ class PagedCombatLog extends React.Component {
return (
<div className='table'>
<div className='row'>
<p className='col centered'>When</p>
<p className='col centered'>Attacker</p>
<p className='col centered'>Attacking Force</p>
<p className='col centered'>Defending Force</p>
<p className='col centered'>Undefended?</p>
<p className='col centered'>Victor</p>
<p className='col centered'>Gold Lost</p>
<p className='col centered'>Victor Casualties</p>
<p className='col centered minWidth'>When</p>
<p className='col centered minWidth'>Attacker</p>
<p className='col centered minWidth'>Attacking Force</p>
<p className='col centered minWidth'>Defending Force</p>
<p className='col centered minWidth'>Undefended?</p>
<p className='col centered minWidth'>Victor</p>
<p className='col centered minWidth'>Gold Lost</p>
<p className='col centered minWidth'>Victor Casualties</p>
</div>
{Object.keys(this.state.data).map((key) => <div key={key} className={'row centered'}>
<p className='col centered'>{ this.parseDate(this.state.data[key].eventTime) }</p>
<p className='col centered'><Link to={`/profile?username=${this.state.data[key].attackerUsername}`} className={'col'}>{this.state.data[key].attackerUsername}</Link></p>
<p className='col centered'>{this.state.data[key].attackingUnits}</p>
<p className='col centered'>{this.state.data[key].defendingUnits}</p>
<p className='col centered'>{this.state.data[key].undefended ? 'yes' : 'no'}</p>
<p className='col centered'>{this.state.data[key].victor}</p>
<p className='col centered'>{this.state.data[key].spoilsGold}</p>
<p className='col centered'>{this.state.data[key].casualtiesVictor}</p>
{Object.keys(this.state.data).map((key) => <div key={key} className={'row'}>
<p className='col centered minWidth'>{ this.parseDate(this.state.data[key].eventTime) }</p>
<p className='col centered minWidth'><Link to={`/profile?username=${this.state.data[key].attackerUsername}`} className={'col'}>{this.state.data[key].attackerUsername}</Link></p>
<p className='col centered minWidth'>{this.state.data[key].attackingUnits}</p>
<p className='col centered minWidth'>{this.state.data[key].defendingUnits}</p>
<p className='col centered minWidth'>{this.state.data[key].undefended ? 'yes' : 'no'}</p>
<p className='col centered minWidth'>{this.state.data[key].victor}</p>
<p className='col centered minWidth'>{this.state.data[key].spoilsGold}</p>
<p className='col centered minWidth'>{this.state.data[key].casualtiesVictor}</p>
</div>)}
</div>
);