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

Adjusted mobile view

Browse Source
This commit is contained in:
Kayne Ruse
2019-06-01 06:30:24 +10:00
parent ea947ed869
commit b0c66cd173
2 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/shared.css
+8 -4
View File
@@ -239,15 +239,23 @@ footer {
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.row { .row {
flex-direction: column; flex-direction: column;
border-style: solid;
border-color: lightblue;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1;
} }
} }
.col { .col {
flex: 1; flex: 1;
min-width: 80px;
} }
.table.noCollapse .row { .table.noCollapse .row {
flex-direction: row; flex-direction: row;
border-style: none;
} }
/* bits and pieces */ /* bits and pieces */
@@ -264,10 +272,6 @@ footer {
margin-bottom: 2em; margin-bottom: 2em;
} }
.minWidth { /* hacky */
min-width: 80px;
}
pre { pre {
color: pink; color: pink;
background-color: #222222; background-color: #222222;
src/components/panels/paged_combat_log.jsx
+18 -18
View File
@@ -29,27 +29,27 @@ class PagedCombatLog extends React.Component {
return ( return (
<div className='table'> <div className='table'>
<div className='row'> <div className='row'>
<p className='col centered minWidth'>When</p> <p className='col centered'>When</p>
<p className='col centered minWidth'>Attacker</p> <p className='col centered'>Attacker</p>
<p className='col centered minWidth'>Defender</p> <p className='col centered'>Defender</p>
<p className='col centered minWidth'>Attacking Force</p> <p className='col centered'>Attacking Force</p>
<p className='col centered minWidth'>Defending Force</p> <p className='col centered'>Defending Force</p>
<p className='col centered minWidth'>Undefended?</p> <p className='col centered'>Undefended?</p>
<p className='col centered minWidth'>Victor</p> <p className='col centered'>Victor</p>
<p className='col centered minWidth'>Gold Transferred</p> <p className='col centered'>Gold Transferred</p>
<p className='col centered minWidth'>Victor Casualties</p> <p className='col centered'>Victor Casualties</p>
</div> </div>
{Object.keys(this.state).map((key) => <div key={key} className={'row'}> {Object.keys(this.state).map((key) => <div key={key} className={'row'}>
<p className='col centered minWidth'>{ this.parseDate(this.state[key].eventTime) }</p> <p className='col centered'>{ this.parseDate(this.state[key].eventTime) }</p>
<PrettyName className='col centered minWidth' name={this.state[key].attacker} /> <PrettyName className='col centered' name={this.state[key].attacker} />
<PrettyName className='col centered minWidth' name={this.state[key].defender} /> <PrettyName className='col centered' name={this.state[key].defender} />
<p className='col centered minWidth'>{this.state[key].attackingUnits}</p> <p className='col centered'>{this.state[key].attackingUnits}</p>
<p className='col centered minWidth'>{this.state[key].defendingUnits}</p> <p className='col centered'>{this.state[key].defendingUnits}</p>
<p className='col centered minWidth'>{this.state[key].undefended ? 'yes' : 'no'}</p> <p className='col centered'>{this.state[key].undefended ? 'yes' : 'no'}</p>
<p className='col centered minWidth'>{this.state[key].victor}</p> <p className='col centered'>{this.state[key].victor}</p>
<p className='col centered minWidth'>{this.state[key].spoilsGold}</p> <p className='col centered'>{this.state[key].spoilsGold}</p>
<p className='col centered minWidth'>{this.state[key].casualtiesVictor}</p> <p className='col centered'>{this.state[key].casualtiesVictor}</p>
</div>)} </div>)}
</div> </div>
); );