BB Skeleton

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<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>
<div class="js-ctn"></div>

<script type="text/x-handlebars-template" class="tmpl-card--layout">
    <div class="rb-card">
        <header class="rb-card__header">
            <h1>{{n}}</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--orders"></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>
                <p class="column__val flush">{{b.p}}</p>
                <p class="column__val flush">{{b.q}}</p>
            </div>

            <div class="column column--offer">
                <h5 class="flush">Offer</h5>
                <p class="column__val flush">{{b.p}}</p>
                <p class="column__val flush">{{b.q}}</p>
            </div>
        </div>
    </div>
</script>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

.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 {
    border-top: 2px solid #eee;
    border-bottom: 2px solid #eee;
    cursor: pointer;
}

JavaScript

console.clear();

/**
 *	@todos
 *	- Create data JSON
 *	- Create card Template
 *		- Do some work on updating s to Sell 
 *	- Create card Layout View -- 2 regions -- header + content
 *		- Header Region
 *		- Content Region -- spin up based on card.type (order, market)
 */

var data = [{
    "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 App = {
 	M: {}, V: {}, C:{},
    
    start: function() {
    	var orders = new App.C.Orders(data, { parse: true });
        				
		var card = new App.V.CardLayout({
			collection: orders,
			childViewEl: '.js-region--orders'
		});
		
		$('.js-ctn').html( card.render().el );

    }
 };

// Create Order Model and Collection
App.M.Order =...