From 96c840a973dc9da0a16d83503125748c43f5bd6b Mon Sep 17 00:00:00 2001
From: Hope Casey-Allen <hcaseyal@stanford.edu>
Date: Sun, 3 Dec 2017 19:20:37 -0800
Subject: [PATCH] organized filters better

---
 index.css  |  4 ++++
 index.html | 68 +++++++++++++++++++++++++++++++-----------------------
 2 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/index.css b/index.css
index 8fa1099..9623f77 100644
--- a/index.css
+++ b/index.css
@@ -77,4 +77,8 @@
 .filter-cell-header {
 	text-align: right;
 	font-weight: bold;
+}
+
+.tenPx {
+	width: 10px;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index ea0705e..11c4ab3 100644
--- a/index.html
+++ b/index.html
@@ -34,36 +34,46 @@
 			</div>
 
 			<div class="filters">
-				<table>
-					<tbody>
-						<tr>
-							<td class="filter-cell filter-cell-header">Self:</td>
-							<td class="filter-cell"><select class="championSelect-self" multiple="multiple"></select></td>
-							<td class="filter-cell"><select class="roleSelect-self" multiple="multiple"></select></td>
-						</tr>
-						<tr>
-							<td class="filter-cell filter-cell-header">Allies:</td>
-							<td class="filter-cell"><select class="championSelect-ally" multiple="multiple"></select></td>
-							<td class="filter-cell"><select class="roleSelect-ally" multiple="multiple"></select></td>
-						</tr>
-						<tr>
-							<td class="filter-cell filter-cell-header">Enemies:</td>
-							<td class="filter-cell"><select class="championSelect-enemy" multiple="multiple"></select></td>
-							<td class="filter-cell"><select class="roleSelect-enemy" multiple="multiple"></select></td>
-						</tr>
-					</tbody>
-				</table>
-
-				<input type="radio" name="sideSelect" id="blueSide" value="blueSide" onclick="blueSideSelected()" />Blue
-				<input type="radio" name="sideSelect" id="redSide" value="redSide" onclick="redSideSelected()" />Red
-				<input type="radio" name="sideSelect" id="bothSides" value="bothSides" onclick="bothSidesSelected()" checked />Both
-
-				<br/>
-				<input type="radio" name="outcomeSelect" id="winOutcome" value="winOutcome" onclick="winOutcomeSelected()" />Win
-				<input type="radio" name="outcomeSelect" id="lossOutcome" value="lossOutcome" onclick="lossOutcomeSelected()" />Loss
-				<input type="radio" name="outcomeSelect" id="bothOutcomes" value="bothOutcomes" onclick="bothOutcomesSelected()" checked />Both
+				<div class="pt-card">
+					<table>
+						<tbody>
+							<tr>
+								<td class="filter-cell filter-cell-header">Self:</td>
+								<td class="filter-cell"><select class="championSelect-self" multiple="multiple"></select></td>
+								<td class="filter-cell"><select class="roleSelect-self" multiple="multiple"></select></td>
+							</tr>
+							<tr>
+								<td class="filter-cell filter-cell-header">Allies:</td>
+								<td class="filter-cell"><select class="championSelect-ally" multiple="multiple"></select></td>
+								<td class="filter-cell"><select class="roleSelect-ally" multiple="multiple"></select></td>
+							</tr>
+							<tr>
+								<td class="filter-cell filter-cell-header">Enemies:</td>
+								<td class="filter-cell"><select class="championSelect-enemy" multiple="multiple"></select></td>
+								<td class="filter-cell"><select class="roleSelect-enemy" multiple="multiple"></select></td>
+							</tr>
+							<tr>
+								<td class="filter-cell filter-cell-header">Starting side:</td>
+								<td class="filter-cell">
+									<input type="radio" name="sideSelect" id="blueSide" value="blueSide" onclick="blueSideSelected()" />Blue
+									<input type="radio" name="sideSelect" id="redSide" value="redSide" onclick="redSideSelected()" />Red
+									<input type="radio" name="sideSelect" id="bothSides" value="bothSides" onclick="bothSidesSelected()" checked />Both
+								</td>
+								<td></td>
+							</tr>
+							<tr>
+								<td class="filter-cell filter-cell-header">Match outcome:</td>
+								<td class="filter-cell">
+									<input type="radio" name="outcomeSelect" id="winOutcome" value="winOutcome" onclick="winOutcomeSelected()" />Win
+									<input type="radio" name="outcomeSelect" id="lossOutcome" value="lossOutcome" onclick="lossOutcomeSelected()" />Loss
+									<input type="radio" name="outcomeSelect" id="bothOutcomes" value="bothOutcomes" onclick="bothOutcomesSelected()" checked />Both
+								</td>
+								<td></td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
 				<br/>
-
 				<div class="flexContainer">
 					<div class="flexAreaFilterContainer">
 						<label class="pt-control pt-switch areaFilter-switch">