BB: Drawer Example

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/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="drawer js-region--drawer">
  	<div class="movies-ctn">
		<h2>Buddys</h2>
		<div class="scrollable">
		    <div class="scrollable__inner  js-region--movies"></div>
		</div>
	</div>
	<div class="watchlist-ctn">
		<h2>Buddy Chat</h2>
		<div class="js-region--watchlist"></div>
	</div>
</div>

<script type="text/template" class="tmpl-movie">
    <h1><%= title %></h1>
    <% if(watchlist) { %>
		<button class="glyphicon glyphicon-minus js-remove" aria-hidden="true"></button>
    <% } else { %>
		<button class="glyphicon glyphicon-plus js-add" aria-hidden="true"></button>
    <% } %>
</script>

SCSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);

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

html,
body {
  height: 100%;
}

body {
    font-family: Roboto;
    color: #191919;
}

a {
    color: #191919;
}
h1 {
    font-size: 22px;
    display: inline-block;
}

.drawer {
  display: flex;
  overflow: hidden;
  height: 100%;
  
  > div {
    flex: 1 0 50%;
  }
}

h2 {
	text-align: center;
	text-decoration: underline;
}

button {
	outline: none;
	border: none;
	background: transparent;
}

.movies-ctn {
	border-right: 1px solid #191919;
}

.watchlist-ctn {
	background: #eee;
}

.scrollable {
    //position: fixed;
    top: 0;
    left: 0;
    //background: rgba(0,0,0,.75);
    //color: white;
    width: 100%;
    height: 100%;
    z-index: 999999;
    padding: 0;
}

.scrollable__inner {
    overflow: auto;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    margin: auto;
}

.movie {
  border-bottom: 1px solid #191919;
  padding: 5px;
}

JavaScript

console.clear();

var data = [{
	"page": 1,
	"results": [{
		"adult": false,
		"backdrop_path": "/kiWvoV78Cc3fUwkOHKzyBgVdrDD.jpg",
		"genre_ids": [18, 12],
		"id": 281957,
		"original_language": "en",
		"original_title": "The Revenant",
		"overview": "In the 1820s, a frontiersman, Hugh Glass, sets out on a path of vengeance against those who left him for dead after a bear mauling.",
		"release_date": "2015-12-25",
		"poster_path": "/oXUWEc5i3wYyFnL1Ycu8ppxxPvs.jpg",
		"popularity": 2.295314,
		"title": "The Revenant",
		"video": false,
		"vote_average": 5,
		"vote_count": 20
	}, {
		"adult": false,
		"backdrop_path": "/pgSkCrrPO5NWZcvHpXG2l8DxTou.jpg",
		"genre_ids": [28, 12, 878, 14],
		"id": 140607,
		"original_language": "en",
		"original_title": "Star Wars: Episode VII - The Force Awakens",
		"overview": "A continuation of the saga created by George Lucas, set thirty years after Star Wars: Episode VI – Return of the Jedi.",
		"release_date": "2015-12-18",
		"poster_path": "/fYzpM9GmpBlIC893fNjoWCwE24H.jpg",
		"popularity": 12.066421,
		"title": "Star Wars: Episode VII - The Force Awakens",
		"video": false,
		"vote_average": 7.8,
		"vote_count": 115
	}, {
		"adult": false,
		"backdrop_path": "/qcWUzAumOrQyypDk0jcKlInhUgk.jpg",
		"genre_ids": [28, 12, 18],
		"id": 205775,
		"original_language": "en",
		"original_title": "In the Heart of the Sea",
		"overview": "In the winter of 1820, the New England whaling ship Essex was assaulted by something no one could believe: a whale of mammoth size and will, and an almost human sense of vengeance.  The real-life maritime disaster would inspire Herman Melville’s Moby-Dick.",
		"release_date": "2015-12-03",
		"poster_path": "/uekIGnzTACciWrfR7jOuof7xHgR.jpg",
		"popularity": 3.656257,
		"title": "In the Heart of the Sea",
		"video": false,
		"vote_average": 3.2,
		"vote_count": 27
	}, {
		"adult": false,
		"backdrop_path": "/sSvgNBeBNzAuKl8U8sP50ETJPgx.jpg",
		"genre_ids": [37],
		"id": 273248,
		"original_language":...