JSFiddle - React, Tailwind, and code Playground

by simpleshadow

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.3.js"></script>
<script src="https://raw.github.com/MilkyWayJoe/cdnjs/master/ajax/libs/ember-data.js/0.12.00-latest20130328/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="conversations">
    <section class="navigation"></section>

    <section id="content">
        
        <section id="conversations">
            <div class="wrapper">
                
                {{#each model}}
                
                    {{#linkTo 'conversation' this}}
                    <div class="scrolls">
                        <div class="imageDiv">
                            <div class="messages">
                                <div class="message">
                                    <div class="time">{{messages.0.captures.0.date}}</div>
                                    <div class="conversation">{{messages.0.text}}</div>
                                </div>
                            </div>
                            <div class="imageWrapper">
                                {{#each this.messages}}
                                    {{#each this.captures}}
                                        <img {{bindAttr src="this.src"}} />
                                    {{/each}}
                                {{/each}}
                            </div> <!-- imageWrapper -->
                        </div> <!-- imageDiv -->        
                        <div class="names">{{messages.0.text}}</div>
                    </div>
                    {{/linkTo}} <!-- scrolls -->
                
                {{/each}}
                
            </div>
       ...

CSS

* { font-family: open_sans, Arial; }

html, body {
	background: #e0e0e0;
	-webkit-font-smoothing: antialiased;
	color: #424242;
	font-smooth:auto;
	font-size: 16px;
	margin: 0px;
}

.navigation {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 45px;
	background-color: #27a6d5;
	-webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, .4);
	z-index: 9000;
}

#content {
	position: absolute;
	overflow: auto;
	width: 100%;
	top: 45px;
	bottom: 0;
	left: 0;
}
#conversations {
	position: absolute;
	overflow: auto;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
}

.wrapper { 
	background:#EFEFEF; 
	margin: auto; 
	position: relative;
	overflow: auto;
	/*border-top: #e0e0e0 solid 1px;*/
	border-bottom: 1px #e0e0e0 solid;
}

.scrolls { 
	position: relative;
	overflow-x: scroll;
	overflow-y: hidden;
	background-color: #fff;
	border-bottom: 1px #e0e0e0 solid;
}

.imageDiv { 
	position: relative;
	height: 88px;
	width: 0;
	margin: 0;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}

.messages {
	float: left;
	height: 88px;
}
	.names {
		position: absolute;
		background-color: #ffffff;
		top: 5px;
		left: 0px;
		padding: 5px 8px 5px 15px;
		font-weight: bold;
	}
	.message {
		height: 100%;
	}
	.message .time {
		position: relative;
		top: 13px;
		right: 10px;
		font-size: 12px;
		color: #b2b1b1;
		text-align: right;
		padding-right: 13px;
	}
	.message .conversation {
		position: relative;
		top: 12px;
		left: 0;
		padding: 10px;
		padding-left: 15px;
		padding-right: 13px;
		color: #666666;
		font-size: 15px;
	}

.imageWrapper {
	display:inline-block;
	float: left;
	-webkit-transform: translate3d(0, 0, 0);
}

.imageDiv img {
	display: inline-block;
	position: relative;
	float: right;
	height: 88px;
	-webkit-transform: translate3d(0, 0, 0);
}

.imageDiv img:first-child, img.out {
	position: absolute;
	left:0;
	z-index: 2;
	-webkit-transform: translate3d(0, 0, 0);
}

JavaScript

'use strict';

var App = Ember.Application.create({
	
	LOG_TRANSITIONS: true,
    
	ready: function () {}
    
});

App.Store = DS.Store.extend({
	revision: 12,
	adapter: 'DS.FixtureAdapter'
});

App.Router.map(function() {
	this.resource('conversations', function () {
		this.resource('conversation', { path: ':conversation_id' }, function () {
			this.resource('capture', { path: ':capture_id' }, function () {});
		});
	});
});

/*App.Router.reopen({
	location: 'none'
});*/

App.IndexRoute = Ember.Route.extend({
    redirect: function () {
        this.transitionTo('conversations');
    }
});

App.ConversationsRoute = Ember.Route.extend({
    model: function () {
        return App.Conversation.find()
    }
});

App.Conversation = DS.Model.extend({
    messages: DS.hasMany('App.Message')
});

App.Message = DS.Model.extend({
    conversation: DS.belongsTo('App.Conversation'),
    captures: DS.hasMany('App.Capture'),
    
    user: DS.belongsTo('App.User'),
    text: DS.attr('string')
});

App.Capture = DS.Model.extend({
	message: DS.belongsTo('App.Message'),

	type: DS.attr('string'),
	src: DS.attr('string'),
	date: DS.attr('date')
});

App.User = DS.Model.extend({
    username: DS.attr('string'),
    name: DS.attr('string'),
    messages: DS.hasMany('App.Conversation')
});

App.Conversation.FIXTURES = [
{
    id: 1,
    messages: [1, 2, 3, 4, 5]
}];


App.Message.FIXTURES = [
{
    id: 1,
    user: 2,
    text: "We are having such a blast at Sam's birthday party!",
    captures: [1]
}, {
    id: 2,
    user: 2,
    text: "Wish you were here! Lama.",
    captures: [2]   
}, {
    id: 3,
    user: 1,
    text: "This is the view from our hotel. How's the party?",
    captures: [3] 
}, {
    id: 4,
    user: 2,
    text: "Jenae and Adam just got here. How's San Diego?",
    captures: [4] 
}, {
    id: 5,
    user: 1,
    text: "We miss you too! Remember this!? :P",
    captures: [5] 
}];

var now = new Date();
App.Capture.FIXTURES = [
{
    id: 1,
    type: 'image',
 ...