Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-04-22 16:47:30 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

improved collection card readability

Browse Source
This commit is contained in:
Daniel 2018-01-14 23:53:50 -05:00
parent afc4c5e270
commit 989a78d846
3 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build/bundle.js
View File

File diff suppressed because one or more lines are too long

6
src/components/collection/types/Creature.js
View File

@ -18,7 +18,7 @@ export default class Creature extends React.Component {
}
return(
<div className="card">
<div className="card creature">
<img className="thumb" style={{float: 'left'}} src={API.base_image + (creature.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(creature.gsx$image)} />
<div className="left">
<Name name={creature.gsx$name} /><br />
@ -33,14 +33,14 @@ export default class Creature extends React.Component {
<span>{mugic}</span>
</div>
<br />
<div className="right" style={{width: 'calc(100% - (100px + 230px + 50px))', 'whiteSpace': 'pre-line'}} >
<div className="right" >
<Ability ability={creature.gsx$ability} tribe={creature.gsx$tribe} />
<Ability type="brainwashed" tribe={creature.gsx$tribe} ability={creature.gsx$brainwashed} />
<Unique data={{unique: creature.gsx$unique, loyal: creature.gsx$loyal, legendary: creature.gsx$legendary, tribe: creature.gsx$tribe}} />
<span className="flavortext">{creature.gsx$flavortext}</span>
</div>
<br />
<div style={{verticalAlign: 'text-top', float: 'left', width: '50px', textAlign: 'right'}}>
<div className="stats">
<span>{creature.gsx$courage}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/courage.png"}></img></span><br />
<span>{creature.gsx$power}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/power.png"}></img></span><br />
<span>{creature.gsx$wisdom}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/wisdom.png"}></img></span><br />

31
src/css/collection.css
View File

@ -1,19 +1,42 @@
.card {
text-align: left;
display: flex;
border: 1px solid #AEAEAE;
}
.card .left,
.card .right,
.card .stats {
padding-top: 2px;
}
.card .left {
vertical-align: text-top;
float: left;
width: 220px;
width: 210px;
padding-left: 4px;
}
.card .right {
float: left;
width: calc(100% - (100px + 230px));
border-left: 1px solid white;
padding-left: 10px;
width: calc(100% - (100px + 4px + 4px + 4px + 210px));
border-left: 2px solid #AEAEAE;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 6px;
white-space: pre-line;
}
.creature .right {
width: calc(100% - (100px + 4px + 4px + 4px + 210px + 40px + 4px));
}
.creature .stats {
vertical-align: text-top;
float: left;
text-align: right;
width: 40px;
padding-right: 4px;
}
.card .icon14, .card .icon16,