Merge remote-tracking branch 'origin/#29-open-orders' into #29-open-o…

…rders Conflicts: build/styles.css src/modules/open-orders/less/open-order.less
tinybike · Jul 26, 2016 · 36fbc82 · 36fbc82
2 parents b5089ad + 80615ce
commit 36fbc82
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 84 deletions.
diff --git a/build/components.jsx b/build/components.jsx
diff --git a/build/styles.css b/build/styles.css
diff --git a/src/modules/common/less/general.less b/src/modules/common/less/general.less
@@ -38,6 +38,14 @@ a {
 	}
 }
 
+th {
+    padding: 0 0.5em;
+    text-align: left;
+    font-size: 0.8em;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
 hr {
 	border-color: @color-border;
 }

diff --git a/src/modules/common/less/variables.less b/src/modules/common/less/variables.less
@@ -35,7 +35,7 @@
 @color-plain-active: #76838f;
 
 @color-dark-normal: #222229;
-@color-dark-hover: #32323a;
+@color-dark-hover: #32323a; // font/text color
 @color-dark-active: #43505c;
 
 @color-light-normal: #eaeaef;

diff --git a/src/modules/market/components/market-page.jsx b/src/modules/market/components/market-page.jsx
@@ -62,6 +62,18 @@ export default class MarketPage extends Component {
 					/>
 				);
 
+				// open orders
+				if (p.market.userOpenOrdersSummary != null && p.market.userOpenOrdersSummary.openOrdersCount != null && p.market.userOpenOrdersSummary.openOrdersCount.value > 0) {
+					nodes.push(
+						<MarketOpenOrders
+							key="market-open-orders"
+							userOpenOrdersSummary={p.market.userOpenOrdersSummary}
+							outcomes={p.market.outcomes}
+							cancelOrder={p.cancelOrder}
+						/>
+					);
+				}
+
 				// positions
 				if (p.market.positionsSummary && p.market.positionsSummary.numPositions && p.market.positionsSummary.numPositions.value) {
 					nodes.push(
@@ -74,17 +86,6 @@ export default class MarketPage extends Component {
 					);
 				}
 
-				if (p.market.userOpenOrdersSummary != null && p.market.userOpenOrdersSummary.openOrdersCount != null && p.market.userOpenOrdersSummary.openOrdersCount.value != null) {
-					nodes.push(
-						<MarketOpenOrders
-							key="market-open-orders"
-							userOpenOrdersSummary={p.market.userOpenOrdersSummary}
-							outcomes={p.market.outcomes}
-							cancelOrder={p.cancelOrder}
-						/>
-					);
-				}
-
 				// chart
 				nodes.push(
 					<Chart

diff --git a/src/modules/market/less/market.less b/src/modules/market/less/market.less
@@ -1,10 +1,13 @@
 .market {
 	.page-content {
-	  margin-top: @site-header-height;
-	  color: @color-dark-normal;
-		background: white;
+		margin-top: @site-header-height;
+		color: @color-dark-normal;
 		font-size: 1.7vmin;
 
+		.l-container {
+			background: white;
+		}
+
 		.basics {
 			padding: @market-section-padding;
 			line-height: 2em;

diff --git a/src/modules/open-orders/components/open-order.jsx b/src/modules/open-orders/components/open-order.jsx
@@ -8,20 +8,20 @@ import classnames from 'classnames';
 import ValueDenomination from '../../common/components/value-denomination';
 
 const OpenOrder = (p) => (
-	<tr className={classnames('open-order', { isDisabled: p.isCancelling || p.isCancelled })}>
+	<tr className={classnames('open-order', { 'is-disabled': p.isCancelling || p.isCancelled })}>
 		<td className="outcome-name">
 			{p.outcomeName}
 		</td>
-		<td>
+		<td className="type">
 			{p.type}
 		</td>
-		<td>
+		<td className="shares">
 			<ValueDenomination {...p.unmatchedShares} />
 		</td>
-		<td>
+		<td className="price">
 			<ValueDenomination {...p.avgPrice} />
 		</td>
-		<td>
+		<td className="cancel">
 			<button
 				className="button cancel-order-action"
 				disabled={p.isCancelling || p.isCancelled}

diff --git a/src/modules/open-orders/components/open-orders-group.jsx b/src/modules/open-orders/components/open-orders-group.jsx
@@ -15,23 +15,20 @@ const OpenOrdersGroup = (p) => {
 		<table className="open-orders-group">
 			<tbody>
 				<tr>
-					<th>Outcome</th>
-					<th>Type</th>
-					<th>Shares</th>
-					<th>Price</th>
-					<th>&nbsp;</th>
+					<th className="outcome-name">Outcome</th>
+					<th className="type">Type</th>
+					<th className="shares">Shares</th>
+					<th className="price">Price</th>
+					<th className="cancel">&nbsp;</th>
 				</tr>
-				{
-					p.userOpenOrders.map(openOrder => (
-						<OpenOrder
-							key={openOrder.id}
-							outcomeName={p.name}
-							{...openOrder}
-							cancelOrder={p.cancelOrder}
-						/>
-						)
-					)
-				}
+				{p.userOpenOrders.map(openOrder => (
+					<OpenOrder
+						key={openOrder.id}
+						outcomeName={p.name}
+						{...openOrder}
+						cancelOrder={p.cancelOrder}
+					/>
+				))}
 			</tbody>
 		</table>
 	);

diff --git a/src/modules/open-orders/less/open-order.less b/src/modules/open-orders/less/open-order.less
@@ -1,25 +1,71 @@
-.open-orders-list {
-  padding: 4vmin 6vmin;
-}
-
 .market-open-orders {
-  .open-orders-group {
-    display: inline-block;
-    margin-top: 3px;
-    vertical-align: top;
-  }
-
-  .open-order.isDisabled {
-    text-decoration: line-through;
-  }
-
-  .open-order td {
-    padding: 1px 5px;
-  }
-
-  .open-order .outcome-name {
-    text-align: left;
-    text-transform: uppercase;
-    min-width: 9rem;
-  }
+	.open-orders-list {
+		margin: 0 0 0 -1.5em;
+		padding: 4vmin 6vmin;
+
+		.open-orders-group {
+			display: inline-block;
+			margin: 0 0 2em 0;
+			padding: 0 1.5em;
+			vertical-align: top;
+			border-right: 1px solid @color-border;
+
+			td {
+				padding: 0.1em 0.5em;
+			}
+
+			.outcome-name {
+				min-width: 9rem;
+				text-align: left;
+			}
+			.type {
+				text-align: right;
+			}
+			.shares {
+				text-align: right;
+			}
+			.price {
+				text-align: right;
+			}
+			.cancel {
+				padding: 0.1em 0em;
+				text-align: left;
+
+				.cancel-order-action {
+					padding: 0;
+					text-align: left;
+					color: @color-danger-active;
+					background: transparent;
+					font-size: 0.8em;
+
+					&:before {
+						content: '\f00d';
+						display: inline-block; position: relative;
+						bottom: 0.1em; left: -0.2em;
+						font-family: FontAwesome;
+						font-weight: 700;
+
+					}
+
+					&:hover, &:active {
+						font-weight: 900;
+					}
+
+					&[disabled] {
+						color: @color-muted-active !important;
+						background: transparent !important;
+					}
+				}
+			}
+
+			.open-order {
+				.outcome-name {
+					text-transform: uppercase;
+				}
+				.is-disabled {
+					text-decoration: line-through;
+				}
+			}
+		}
+	}
 }
diff --git a/src/modules/trade/less/trade-builder.less b/src/modules/trade/less/trade-builder.less
@@ -4,10 +4,6 @@
     border-spacing: 0 0.6rem;
 
     th {
-        padding: 0 0.5em;
-        font-size: 0.8em;
-        font-weight: 700;
-        text-transform: uppercase;
         border-bottom: solid 1px @color-dark-active;
     }