JSFiddle - React, Tailwind, and code Playground

by stevescotthome

HTML

<script src="http://dl.dropbox.com/u/3234184/knockout-2.0.0.js"></script>
<script src="http://dl.dropbox.com/u/3234184/knockout.mapping.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
    <div id="main-container">
        <!-- Header Area -->
        <div id="capacity-header">
            <div class="pod">
                Choose Rotation:
            </div>
            <div class="pod">
                Launch Date:
            </div>
            <div class="pod">
                Due Date:
            </div>
            <div class="clear">
            </div>
        </div>
        <h1 id="clekership-header" data-bind="text: Clerkship">Loading...</h1>
        <div id="campus-wrapper">

        </div>
    </div>

CSS

#main-container{position:absolute;width:100%;height:100%;background:#f0f0f0}
#capacity-header{width:100%;border-bottom:1px solid #d0d0d0;background:#f0f0f0}
#capacity-header .pod{float:left;padding:10px;border-right:1px solid #d0d0d0;border-left:1px solid #fff;background:#f5f5f5;font-size:13px;font-weight:bold}
#capacity-header .pod:first-child{border-left:0}
.region-wrapper{padding:10px}
.region-wrapper .region-header{border:1px solid #d0d0d0;background:#f5f5f5;margin-bottom:10px}
.region-wrapper .region-header h1{margin:0;padding:0;font-size:20px;color:#fff}
.region-wrapper .region-header .pod-left{float:left;padding:10px}
.region-wrapper .region-header .pod-button{float:right;padding:12px;padding-bottom:13px;font-weight:bold;padding-left:40px;cursor:pointer;color:#fff}
.region-wrapper .region-header .pod-button.add{background:url("") no-repeat 10px 10px}
.region-wrapper .region-header .pod-button.release{background:url("") no-repeat 10px 10px}
.region-wrapper .region-header{background:#ff6e6e;border:1px solid #c65b5b}
.region-wrapper .region-header h1{text-shadow:0 -1px 0 #c65b5b}
.region-wrapper .region-header .pod-button{border-left:1px solid #c65b5b}
.region-wrapper .region-header.released{background:#82e8c9;border:1px solid #63d1b5}
.region-wrapper .region-header.released h1{text-shadow:0 -1px 0 #63d1b5}
.region-wrapper .region-header.released .pod-button{border-left:1px solid #63d1b5}
.region-wrapper .rotation{border:1px solid #d0d0d0;background:#fff;padding:10px 0 0 10px;margin-bottom:10px}
.region-wrapper .rotation .region-sites{clear:both}
.region-wrapper .rotation .site{position:relative;padding:10px 90px 2px 10px;border:1px solid #d0d0d0;background:#f4f4f4;width:auto;float:left;margin-right:10px;margin-bottom:10px;height:30px}
.region-wrapper .rotation .site .capacity{position:absolute;top:5px;right:5px;padding:5px;background:#fff;border:1px solid #d0d0d0}
.region-wrapper .rotation .site .edit{position:absolute;top:10px;right:52px;background:url("")...

JavaScript

var viewModel = null;

$(document).ready(function(){
   var json = {"ClerkshipID":1,"Clerkship":"Psychiatry","IsSelective":false,"StartDate":"2012-05-03T09:33:12.1235561-04:00","EndDate":"2012-06-02T09:33:12.1235561-04:00","Campuses":[{"CampusID":0,"Campus":"Hamilton","Released":false,"AvailableToHamilton":false,"Rotations":[{"RotationID":1,"Rotation":"Psychiatry","Sites":[{"SiteID":10,"Site":"St. Joes","Min":0,"Max":6},{"SiteID":10,"Site":"MUMC","Min":0,"Max":6}]}]},{"CampusID":2,"Campus":"Waterloo Regional Campus","Released":true,"AvailableToHamilton":true,"Rotations":[{"RotationID":1,"Rotation":"Psychiatry","Sites":[{"SiteID":10,"Site":"St. Joes","Min":0,"Max":6},{"SiteID":10,"Site":"MUMC","Min":0,"Max":6}]}]},{"CampusID":0,"Campus":"Niagara Regional Campus","Released":false,"AvailableToHamilton":false,"Rotations":[{"RotationID":1,"Rotation":"Psychiatry","Sites":[{"SiteID":10,"Site":"St. Joes","Min":0,"Max":6},{"SiteID":10,"Site":"MUMC","Min":0,"Max":6}]}]}]};

    createViewModel(json);
    
    
});
    
function createViewModel(json) {
    viewModel = kendo.observable({
        periodDS: new kendo.data.DataSource({
            data: json
        }),
    });

    kendo.bind($("#main-container"), viewModel);
    
    //Add in the extra clears on the site level
        $(".region-sites").each(function () {
            $(this).append("<div class='clear'></div>");
        });
}