styling

public/less/admin/admin.less

@@ -10,6 +10,7 @@
 @import "./appearance/customise";
 @import "./appearance/themes";
 @import "./extend/plugins";
+@import "./extend/rewards";
 @import "./advanced/database";
 
 @import "./modules/alerts";

public/less/admin/extend/rewards.less

@@ -0,0 +1,17 @@
+#rewards {
+	.well {
+		vertical-align: top;
+		min-height: 100px;
+	}
+
+	ul {
+		list-style-type: none;
+		padding: 0px;
+		margin: 0px;
+
+		> li {
+			border-bottom: 1px solid #ddd;
+			margin-bottom: 20px;
+		}
+	}
+}

public/src/admin/extend/rewards.js

@@ -40,7 +40,7 @@ define('admin/extend/rewards', function() {
 	}
 
 	function selectReward(el) {
-		var div = el.parent().find('.inputs'),
+		var div = el.parents('li').find('.inputs'),
 			inputs,
 			html = '';
 

src/views/admin/extend/rewards.tpl

@@ -7,25 +7,31 @@
 					<ul>
 						<!-- BEGIN active -->
 						<li>
-							If User's
-							<select name="condition" data-selected="{active.condition}">
-								<!-- BEGIN conditions -->
-								<option value="{conditions.condition}">{conditions.name}</option>
-								<!-- END conditions -->
-							</select>
-							Is
-							<select name="conditional" data-selected="{active.conditional}">
-								<!-- BEGIN conditionals -->
-								<option value="{conditionals.conditional}">{conditionals.name}</option>
-								<!-- END conditionals -->
-							</select>
-							<input type="text" value="{active.value}" />
-							Then
-							<select name="reward" data-selected="{active.rewardID}">
-								<!-- BEGIN rewards -->
-								<option value="{rewards.rewardID}">{rewards.name}</option>
-								<!-- END rewards -->
-							</select>
+							<div class="well inline-block">
+								<label for="condition">If User's</label><br />
+								<select name="condition" data-selected="{active.condition}">
+									<!-- BEGIN conditions -->
+									<option value="{conditions.condition}">{conditions.name}</option>
+									<!-- END conditions -->
+								</select>
+							</div>
+							<div class="well inline-block">
+								<label for="condition">Is:</label><br />
+								<select name="conditional" data-selected="{active.conditional}">
+									<!-- BEGIN conditionals -->
+									<option value="{conditionals.conditional}">{conditionals.name}</option>
+									<!-- END conditionals -->
+								</select>
+								<input type="text" value="{active.value}" />
+							</div>
+							<div class="well inline-block">
+								<label for="condition">Then:</label><br />
+								<select name="reward" data-selected="{active.rewardID}">
+									<!-- BEGIN rewards -->
+									<option value="{rewards.rewardID}">{rewards.name}</option>
+									<!-- END rewards -->
+								</select>
+							</div>
 							<div class="inputs well inline-block"></div>
 						</li>
 						<!-- END active -->