BB: Card Collection

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.16/backbone.localStorage-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script type="text/x-handlebars-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/x-handlebars-template" class="tmpl-card--layout">
	<header class="rb-card__header">
		<h1>{{type}}</h1>

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

<script type="text/x-handlebars-template" class="tmpl-order--single">
	<div class="cell cell--{{s}}  js-show-order" data-id="{{id}}">
        <small class="cell__label soft-half--sides weight--semibold">{{s}}</small>
        <div class="cell__details soft-half--top">
            <div class="cell__column">
                <h2 class="flush">{{n}}</h2>
            </div>
            <div class="text--center soft--sides">
                <h3 class="cell__val flush">{{p}}</h3>
                <p class="flush">{{fq}} / {{dq}}</p>
            </div>
        </div>

        <div class="cell__columns text--center">
            <div class="column column--bid">
                <h5 class="flush">Bid</h5>
             ...

SCSS

$commonui-button-color--negative: #D60101 !default;
$commonui-brand-color--neutral__grey-lightest: rgb(218,223,225) !default;
$commonui-font-color-on-dark: #FFF !default;
$commonui-base-radius-unit: 4px;
$commonui-link-color: #1971C4 !default;

.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
}


.cell {
    $cellPadding: 4px !default;

    border-bottom: 2px solid $commonui-brand-color--neutral__grey-lightest;
    display: flex;
    justify-content: space-between;
    padding: $cellPadding 0;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    opacity: 1;
    transition: opacity .3s;

    &:first-child {
        border-top: 2px solid $commonui-brand-color--neutral__grey-lightest;
    }

    &:hover {
        opacity: 0.75;
    }
    
    .is-loading & {
        background: lightGreen;
    }

    &__details {
        display: flex;
        flex: 1;
        align-items: center;
    }

    &__label {
        background: $commonui-button-color--negative;
        color: $commonui-font-color-on-dark;
        position: absolute;
        top: 0;
        left: 0;
    }

    &__column {
        flex: 0 1 50%;
    }

    &__columns {
        display: flex;
        border: 2px solid $commonui-brand-color--neutral__grey-lightest;
        border-radius: $commonui-base-radius-unit;
        @include commonui-font-size(12px, 16px);
        align-items: center;
        flex: 0 1 100px;
        justify-content: space-around;
    }

    &--sell {
        .cell__label {
            background-color:...

JavaScript

console.clear();

var cardData = {
	"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 orderData = [{
    "C": "d-B8570DDD-A,0|O,1|J,0|D,0|P,0|L,2|Q,1|R,0",
    "M": [{
        "H": "mob",
        "M": "o",
        "A": [
            [{
                "hdf": 10,
                "id": 6599401,
                "url": "6599401",
                "n": "BUY CL Sep16",
                "s": "B",
                "p": "41.02",
                "q": "10",
                "fq": "-",
                "dq": "-",
                "b": {
                    "p": "41.02",
                    "q": "10"
                },
                "st": "Working",
                "sv": 1,
                "ot": "LIM",
                "od": "2016-03-07T11:15:32.699Z"
            }]
        ]
    }]
}, {
    "C": "d-B8570DDD-A,0|O,1|J,0|D,0|P,0|L,2|Q,1|R,0",
    "M": [{
        "H": "mob",
        "M": "o",
        "A": [
            [{
                "hdf": 10,
                "id": 346987,
                "url": "346987",
                "n": "SELL CL Sep16",
                "s": "S",
                "p": "41.02",
                "q": "10",
                "fq": "-",
                "dq": "-",
                "b": {
                    "p": "41.02",
                    "q": "10"
                },
                "st": "Working",
                "sv": 1,
                "ot": "LIM",
                "od": "2016-03-07T11:15:32.699Z"
            }]
        ]
    }]
}];

var marketData = [{
    "C": "d-B8570DDD-A,0|O,1|J,0|D,0|P,0|L,2|Q,1|R,0",
    "M":...