BB: Card Collection View

by kyllle

HTML

<script type="text/template" class="tmpl-canvas">
	<div class="canvas__controls">
		<button class="btn btn--add-card push--right push  js-action--add-card">+ Add Card</button>
	</div>
	<div class="js-region--cards">
		<!-- .grid -->
	</div>
</script>

<script type="text/template" class="tmpl-card">
	<header class="rb-card__header">
		<h1><%= contract %></h1>

		<nav class="rb-card__controls">
			<button class="btn btn--negative  js-action--remove-card">X</button>
		</nav>
	</header>
	<div class="rb-card__contents  js-region--card-contents">
		<p>Contents</p>
	</div>
</script>

CSS

.rb-card {
	border: 1px solid rgba(black, 0.1);
	padding: 5px;
	
	&__header {
		display: flex;
		justify-content: space-between;
	}
}

.canvas__controls {
	display: flex;
	justify-content: flex-end;
}

.btn {
	display: inline-block;
    vertical-align: middle;
    font: inherit;
    text-align: center;
    margin: 0;
    cursor: pointer;
    overflow: visible;
    padding: 5px 11px;
    background-color: #0195E7;
    border: 1px solid #0195E7;
    border-radius: 4px;
	color: white;
	margin-bottom: 10
}

JavaScript

console.clear();

var cardPathsOrderBook = {
    "ORDER BOOK": {
        "name": "Order Book",
        "path": "views/cards/CMEDMobile/OrderBookView",
        "icon": "OrderBook"
    },
    "MARKET DATA": {
        "name": "Market Data",
        "path": "views/cards/CMEDMobile/MarketDataView",
        "icon": "MarketData"
    }
}
var proper__response = {
	"type":"preference", 
	"info": {
		"cards": {
			"364a3764-94ca-6207-3e60-2772d3dad45a": {
				"id": "364a3764-94ca-6207-3e60-2772d3dad45a", 
				"type": "order book", 
				"view": "TraderCMED", 
				"position": "1"
			}, 
			"d2e7c007-6840-6a24-9be5-3eb3bd857137": {
				"id": "d2e7c007-6840-6a24-9be5-3eb3bd857137", 
				"type": "market data", 
				"view": "TraderCMED", 
				"position": "0"
			}
		}, 
	"actionConfirm": "true", 
	"messagesBlink": "false", 
	"convertTimeToLocal": "true"
	}
}
var cards__response = [
    {
        "id": "6599401",
        "contract": "BUY NG Sep 16",
        "quantity": 5,
        "disclosed": 0,
        "price": 2.349,
        "type": "LIM",
        "fill": 5,
        "bid": {
            "quantity": 5,
            "price": 3.097
        },
        "offer": {
            "quantity": 0,
            "price": 0
        },
        "last": 0,
        "type": "buy"
    },
    {
        "id": "6599662",
        "contract": "SELL NG Sep 16",
        "quantity": 10,
        "disclosed": 0,
        "price": 2.343,
        "type": "LIM",
        "fill": 5,
        "bid": {
            "quantity": 5,
            "price": 3.097
        },
        "offer": {
            "quantity": 0,
            "price": 0
        },
        "last": 39.75,
        "type": "sell"
    },
    {
        "id": "6599662",
        "contract": "SELL NG Sep 16",
        "quantity": 10,
        "disclosed": 0,
        "price": 2.343,
        "type": "LIM",
        "fill": 5,
        "bid": {
            "quantity": 5,
            "price": 3.097
        },
        "offer": {
            "quantity": 0,
            "price":...