Commit 7fb24f93 authored by Matthew Odle's avatar Matthew Odle

add more style updates

parent da9de42f
......@@ -23,9 +23,9 @@ export class Building extends React.Component {
return (
<div className={building.producing ? "building active" : "building inactive"} style={progressStyle}>
<div>{building.assignedVillagers.length} - <span className="buildingLabel">{building.label}</span>
<div className="villagerAdjustButtons">
<button type="button" id="addAVillager" onClick={() => this.props.manageVillagerAssignments(building, 1, 'assign')}>+</button>
<button type="button" id="removeAVillger" onClick={() => this.props.manageVillagerAssignments(building, 1, 'unassign')}>-</button>
<div className="adjustVillagerContainer">
<button type="button" className="adjustVillager" id="addAVillager" onClick={() => this.props.manageVillagerAssignments(building, 1, 'assign')}>+</button>
<button type="button" className="adjustVillager" id="removeAVillger" onClick={() => this.props.manageVillagerAssignments(building, 1, 'unassign')}>-</button>
</div>
{ building.goods ? <Goods building={building} /> : null }
{ building.materials ? <Materials building={building} /> : null }
......
......@@ -7,7 +7,7 @@ export class Buildings extends React.Component {
render(props) {
return <div className="buildingContainer">
<div className="buildings">
<h3>Buildings</h3>
<h3>Buildings <label className="assignmentInstruction">(click to assign)</label></h3>
{ this.props.buildings.map( building =>
<Building
key={building.id}
......
......@@ -9,7 +9,7 @@ export class StatusRow extends React.Component {
const count = statusProps.count;
const statusClassNames = statusProps.classNames;
statusClassNames.badThing = statusProps.count > 0 ? true : false;
const statusClassName = classNames(statusClassNames);
const statusClassName = classNames('statusRow', statusClassNames);
return <div className={statusClassName}>
<div className="statusName">{name}</div>
......
......@@ -11,7 +11,6 @@ export class StoreRow extends React.Component {
storeClassNames.badThing = storeItemProps.count <= 0 ? true : false;
const storeClassName = classNames('storeRow', storeClassNames);
// return <div className="storeRow">
return <div className={storeClassName}>
<div className="storeName">{name}</div>
<div className="storeCount">{count}</div>
......
......@@ -10,12 +10,6 @@ button {
text-align: center;
width: 340px;
}
.active {
background-color: lightgreen;
}
.inactive {
background-color: white;
}
.info {
display: inline-block;
}
......@@ -43,6 +37,7 @@ button {
padding: 5px 0;
}
.buildingContainer {
float: left;
margin-right: 1em;
......@@ -52,11 +47,21 @@ button {
min-height: 3.5em;
padding: 2px;
margin: 2px 0;
border: 1px solid black;
}
.active {
border: 2px solid green;
}
.inactive {
border: 2px solid red;
}
.buildingLabel {
font: bold 1em Georgia, serif;
}
.assignmentInstruction {
display: inline;
font: 1em Georgia, serif;
}
.management {
position: relative;
......@@ -77,10 +82,14 @@ button {
.villagerAssignment {
text-align: center;
}
.villagerAdjustButtons {
.adjustVillagerContainer {
float: right;
width: auto;
}
.adjustVillager {
width: 20px;
margin: 0;
}
.villagerStatus {
width: 35px;
margin: 2px;
......@@ -111,15 +120,15 @@ button {
position: relative;
z-index: 10;
cursor: default;
padding: 5px 10px;
width: 140px;
padding: 5px 0px;
}
.resources, .infos {
display: block;
}
.storeRow, .statusRow {
position: relative;
padding: 0 5px;
padding: 1px 10px;
}
.storeName, .statusName {
clear: both;
......@@ -183,7 +192,7 @@ button {
height: 700px;
}
.building {
width: auto;
width: 220px;
}
.storeContainer {
position: absolute;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment