From e37de7e85ddc65dfcf76fe3cca10811154bda321 Mon Sep 17 00:00:00 2001
From: Gabe Rogan <rogangabe@gmail.com>
Date: Wed, 8 Mar 2017 22:24:15 -0500
Subject: [PATCH] Fixed categories

---
 app/pages/categories/style.styl |  7 +++
 app/pages/categories/view.html  | 89 +++++++++------------------------
 assets/css/main.css             |  9 ++++
 3 files changed, 39 insertions(+), 66 deletions(-)

diff --git a/app/pages/categories/style.styl b/app/pages/categories/style.styl
index 2c7caed..5920623 100644
--- a/app/pages/categories/style.styl
+++ b/app/pages/categories/style.styl
@@ -20,3 +20,10 @@ select {
 	+above(700px)
 		min-width: 680px
 	margin 0 auto
+.rulesWrap
+	display flex
+	flex-wrap wrap
+	.card
+		flex-grow 1
+		margin 1em
+		max-width calc(50% - 2em)
diff --git a/app/pages/categories/view.html b/app/pages/categories/view.html
index 76763d3..1ea9a47 100644
--- a/app/pages/categories/view.html
+++ b/app/pages/categories/view.html
@@ -3,84 +3,41 @@
 		<div class="catsWrap">
 			<ul class="collapsible" data-collapsible="expandable">
 				<li ng-repeat="category in categories">
+
+
+
 		      <div class="collapsible-header">{{ category.name }}</div>
 		      <div class="collapsible-body">
-						<div class="row">
-							<!--<div class="col s12">
-								<div class="input-field col s6">
-				          <input placeholder="Placeholder" id="first_name" type="text" class="validate" ng-model="category.name">
-				          <label for="first_name">Category Name</label>
-				        </div>
-								<button class="btn grey" style="float:right" ng-click="removeCategory(category)">Delete Category</button>
-							</div>-->
-							<div class="col s6" ng-repeat="rule in category.rules[0]">
-								<div class="card">
-			            <div class="card-content">
-			              <div class="row">
-			              	<div class="col s6">
-			              		<select>
-			              			<option ng-repeat="nutrient in nutrients" value="{{nutrient.name}}" ng-selected="nutrient.name==rule.nutrientName">{{nutrient.name}}</option>
-			              		</select>
-			              	</div>
-			              	<div class="col s6">
-			              		<select>
-			              			<option ng-repeat="rank in ranks" value="{{rank.id}}" ng-selected="rule.rank == rank.id">{{ rank.name }}</option>
-			              		</select>
-			              	</div>
-			              	<div class="col s4">
-			              		<select>
-													<option ng-repeat="operation in operations" value="{{operation.name}}" ng-selected="operation.name==rank.operator">{{operation.symbol}}</option>
-												</select>
-			              	</div>
-			              	<div class="col s4">
-			              		<input type="number" ng-model="rule.threshold" value="{{rule.threshold}}">
-			              	</div>
-			              	<div class="col s4">
-			              		<select>
-			              			<option ng-repeat="unit in units" value="{{unit}}" ng-selected="rule.units == unit">{{unit}}</option>
-			              		</select>
-			              	</div>
-			              	<div class="col s4">
-			              		<button class="btn red darken-3" ng-click="removeRule(category, rule)">Delete</button>
-			              	</div>
-			              </div>
-			            </div>
-			          </div>
+
+							<div class="row s12">
+										<button ng-click="addRule(category.name)" class="btn">Add Rule</button>
+										<button class="btn green" ng-click="saveData(category)">Save</button>
+							</div>
+
+							<div class="rulesWrap">
+							<div class="card s6" ng-repeat="rule in category.rules[0]">
+							<div class="card-content">
+	              		<select><option ng-repeat="nutrient in nutrients" value="asdf" ng-selected="nutrient.name==rule.nutrientName">{{nutrient.name}}</option></select>
+	              		<select><option ng-repeat="rank in ranks" value="{{rank.id}}" ng-selected="rule.rank == rank.id">{{ rank.name }}</option></select>
+	              		<select><option ng-repeat="operation in operations" value="{{operation.name}}" ng-selected="operation.name==rank.operator">{{operation.symbol}}</option></select>
+	              		<input type="number" ng-model="rule.threshold" value="{{rule.threshold}}">
+	              		<select><option ng-repeat="unit in units" value="{{unit}}" ng-selected="rule.units == unit">{{unit}}</option></select>
+	              		<button class="btn red darken-3" ng-click="removeRule(category, rule)">Delete</button>
+							</div>
 							</div>
-					    <div class="col s12">
+							</div>
+					</div>
+
 
 
 
-								<button ng-click="addRule(category.name)" class="btn">Add Rule</button>
-								<button class="btn green" ng-click="saveData(category)">Save</button>
-					    </div>
-					  </div>
-					</div>
 		    </li>
 		  </ul>
-			<!--<button class="btn blue" ng-click="addCategory()" onclick="UpdateTextFields()">Add Category</button>-->
 		</div>
-		<!--<div class="col s12 m3">
-			<div class="card grey darken-3">
-				<div class="card-content white-text">
-					<span class="card-title">Filter</span>
-					<div class="row">
-						<div class="col s12">
-				      <div class="row">
-				        <div class="input-field col s12 ">
-				          <input id="by-name" type="text">
-				          <label for="by-name">By Name</label>
-				        </div>
-				      </div>
-
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>-->
 	</div>
 </div>
 
+
 <script>
 function UpdateTextFields() {
 	setTimeout(function() {
diff --git a/assets/css/main.css b/assets/css/main.css
index 8c8f2e4..976b9a1 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -63,6 +63,15 @@ select {
     min-width: 680px;
   }
 }
+.rulesWrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+.rulesWrap .card {
+  flex-grow: 1;
+  margin: 1em;
+  max-width: calc(50% - 2em);
+}
 .food-search {
   padding-top: 0.5em;
 }