MobileApp Mockup

by amindunited

HTML

<link rel="stylesheet" href="https://rawgithub.com/ducksboard/gridster.js/master/dist/jquery.gridster.css" />
<link rel="stylesheet" href="https://s3.amazonaws.com/kiddsoftware-jsfiddle/qunit-1.11.0.css"/>


<script type="text/x-handlebars" data-template-name="application">
    
    <div class="pageWrap">
        {{outlet}}
    </div>
    <nav class="mainNav">
        <div class="url">
            {{controller.history.lastObject}}
        </div>
        <ul>
            <li>{{#link-to 'home'}}Home{{/link-to}}</li>
            <li>{{#link-to 'styleguide'}}Styleguide{{/link-to}}</li>
            <li>{{back-button action="goBack"}}</li>
        </ul>
    </nav>
    <footer>
        <h3>Footer</h3>
        <button id="changePageStyle">Change Page Style</button>
    </footer>
    
</script>
<script type="text/x-handlebars" data-template-name="home">
    
    <div {{bind-attr class=":page view.current view.previous view.next"}}>
        <h1>Home Page</h1>
        <ul class="itemList">
        {{#each item in view.content}}
            <li>{{item.name}}</li>
        {{/each}}
        </ul>
    </div>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="styleguide">
    
    <div {{bind-attr class=":page view.current view.previous view.next"}}>
        <h1>Style Guide</h1>
        <nav class="sideNav">
            <ul>
                {{#each medium in controller.content.media}}
                <li>
                    {{#link-to 'media' medium.id}}
                        {{medium.title}}
                    {{/link-to}}
                </li>
                {{/each}}
            </ul>
        </nav>
    </div>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="media">
    
    <div {{bind-attr class=":page view.current view.previous view.next"}}>
        <h1>Media</h1>
        
        <nav class="sideNav">
            <ul>
                {{#each publication in controller.content}}
                <li>
             ...

CSS

/////////////////
// Semantic.gs // for LESS: http://lesscss.org/
/////////////////

// Defaults which you can freely override
@column-width: 60;
@gutter-width: 20;
@columns: 12;

// Utility variable — you should never need to modify this
@gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;

// Set @total-width to 100% for a fluid layout
@total-width: @gridsystem-width;

// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
// @min-width: 960;
// @correction: 0.5 / @min-width * 100 * 1%;

// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
	*zoom:1;
	
	&:before,
	&:after {
	    content:"";
	    display:table;
	}
	&:after {
	    clear:both;
	}
}


//////////
// GRID //
//////////

body {
	width: 100%;
	.clearfix;
}

.row(@columns:@columns) {
	display: block;
	width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width);
	margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1);
	// *width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width)-@correction;
	// *margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1)-@correction;
	.clearfix;
}
.column(@x,@columns:@columns) {
	display: inline;
	float: left;
	width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width);
	margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width);
	// *width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width)-@correction;
	// *margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width)-@correction;
}
.push(@offset:1) {
	margin-left: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
}
.pull(@offset:1) {
	margin-right: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) +...

JavaScript

//Set up less styles
(function(){ 
    $('head style[type="text/css"]').attr('type', 'text/less');
    less.refreshStyles(); 
})();

//Set up global environment vars
env = {
    testing: false
}

App = Em.Application.create();

App.ApplicationController = Em.Controller.extend({
  history: [],

  hasHistory: function(){
    return this.get('history.length')>1;
  }.property('history.length'),

  watchHistory: function(){
    this.get('history').pushObject(this.get('currentPath'));
  }.observes('currentPath'),

    actions: {
        goBack: function(){
            // implement your own history popping that actually works ;)
            this.get('history').popObject();
            window.history.back(); 
            this.get('history').popObject(); // get rid of route change here, don't need it
        }
    }
 });


App.Router.map(function(){
    this.resource('home', {path:'/'}, function(){
        this.resource('styleguide', {path:'/styleguide'}, function(){
            this.resource('media', {path:'/:media_id'}, function(){
                this.resource('publication', {path:'/:publication_id'}, function(){
                    this.resource('element', {path:'/:element_id'}, function(){
                    
                    });
                    
                });
            });
        });
    });
});

App.PageView = Em.View.extend({
    
    current: false,
	previous: false,
	next: true,
    
	animateIn: function(done){
		
		this.get('parentView').set('previous', true);
		this.get('parentView').set('next', false);
		this.get('parentView').set('current', false);
		
		var pp = this.get('parentView').$('.page').first();
		pp.addClass('transition');

        done.call(this);
		
        PrefixedEvent(pp[0], 'transitionEnd', function(e){
			$(e.target).removeClass('transition');
		});
	},
	animateOut: function(done){
		//
		this.set('previous', false);
		this.set('next', true);
		this.set('current', false);
		
		var pp =...