Polishing the sidebar so more

client/naturalCrit/encounter/monsterCard/monsterCard.jsx

@@ -131,13 +131,10 @@ var MonsterCard = React.createClass({
 		var self = this;
 		var usedItems = this.state.usedItems.slice(0);
 		return _.map(this.props.items, function(item, index){
-
 			var used = _.contains(usedItems, item);
-
 			if(used){
 				usedItems.splice(usedItems.indexOf(item), 1);
 			}
-
 			return <span
 				key={index}
 				className={cx({'used' : used})}
@@ -174,11 +171,13 @@ var MonsterCard = React.createClass({
 					{this.renderSpells()}
 				</div>
 
-
+				<div className='abilitiesContainer'>
+					{this.props.abilities}
+				</div>
 				<div className='itemContainer'>
+					<i className='fa fa-flask' />
 					{this.renderItems()}
 				</div>
-
 			</div>
 		);
 	}

client/naturalCrit/encounter/monsterCard/monsterCard.less

@@ -1,4 +1,5 @@
 
+@marginSize : 10px;
 .noselect(){
 	-webkit-touch-callout : none;
 	-webkit-user-select   : none;
@@ -7,9 +8,6 @@
 	-ms-user-select       : none;
 	user-select           : none;
 }
-
-@marginSize : 10px;
-
 .playerCard{
 	display          : inline-block;
 	box-sizing       : border-box;
@@ -17,25 +15,21 @@
 	padding          : 10px;
 	background-color : white;
 	border           : 1px solid #bbb;
-
 	.name{
-		margin-right: 20px;
+		margin-right : 20px;
 	}
 	.initiative{
-		font-size: 0.8em;
+		font-size : 0.8em;
 		i{
-			font-size: 0.8em;
+			font-size : 0.8em;
 		}
 	}
-
 	&:nth-child(5n + 1){ background-color: fade(@blue, 25%); }
 	&:nth-child(5n + 2){ background-color: fade(@purple, 25%); }
 	&:nth-child(5n + 3){ background-color: fade(@steel, 25%); }
 	&:nth-child(5n + 4){ background-color: fade(@green, 25%); }
 	&:nth-child(5n + 5){ background-color: fade(@orange, 25%); }
 }
-
-
 .monsterCard{
 	position         : relative;
 	display          : inline-block;
@@ -50,19 +44,19 @@
 		position         : absolute;
 		top              : 0px;
 		left             : 0px;
+		z-index          : 50;
 		height           : 3px;
 		max-width        : 100%;
 		background-color : @green;
-		z-index : 50;
 	}
 	.overhealbar{
 		position         : absolute;
 		top              : 0px;
 		left             : 0px;
+		z-index          : 100;
 		height           : 3px;
 		max-width        : 100%;
 		background-color : @blueLight;
-		z-index : 100;
 	}
 	&.hurt{
 		.healthbar{
@@ -70,26 +64,25 @@
 		}
 	}
 	&.last_legs{
-		background-color: lighten(@red, 49%);
+		background-color : lighten(@red, 49%);
 		.healthbar{
 			background-color : red;
 		}
 	}
 	&.dead{
-		opacity: 0.3;
+		opacity : 0.3;
 	}
-
 	&>.info{
-		margin-bottom: 10px;
+		margin-bottom : 10px;
 		.name{
-			font-size: 1.5em;
-			margin-right: 10px;
+			margin-right : 10px;
+			font-size    : 1.5em;
 		}
 		.stat{
-			font-size: 0.7em;
-			margin-right: 5px;
+			margin-right : 5px;
+			font-size    : 0.7em;
 			i{
-				font-size: 0.7em;
+				font-size : 0.7em;
 			}
 		}
 	}
@@ -118,17 +111,21 @@
 			font-weight : 800;
 		}
 	}
-
+	.abilitiesContainer{
+		margin-top : 5px;
+	}
 	.itemContainer{
-
+		margin-top : 5px;
+		i{
+			font-size : 0.7em;
+		}
 		span{
-			cursor: pointer;
-			font-size: 0.7em;
-			margin-right: 5px;
+			margin-right : 5px;
+			cursor       : pointer;
+			font-size    : 0.7em;
 			&.used{
-				text-decoration: line-through;
+				text-decoration : line-through;
 			}
 		}
-
 	}
 }