JSFiddle - React, Tailwind, and code Playground

by programmieraffe

HTML

<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.19/angular-0.9.19.js"></script>

<div ng:controller="EventsCatCtrl">
    
    <div ng:controller="EventsListCtrl">
        <div id=mytitle>
            <h1>{{params.place}}</h1>
        </div>
        
        <ul id="controls">
            <li>
                Search: <input type="text" name="query" />
            </li>
            <li>
                Sort by:
                <select name="orderProp">
                    <option value="date">Date</option>
                    <option value="genre">Genre</option>
                </select>
            </li>
        </ul>
        
        <div id="info" ng:controller="PlacesDetailCtrl">
            <h2>Where is it?</h2>
            <p> {{place.address}}</p>
            <p> {{place.postal}}</p>
            <p> {{place.tel}}</p>
            
            <br />
            
            <h2>About this place</h2>
            <p> {{place.details}}</p>        
        </div>
        
        
        <div id="event" ng:controller="EventsListCtrl">
            <table summary="Your list of live music gigs in Singapore">
                <thead>
                    <tr>
                        <th scope="column">Date</th>
                        <th scope="column">Day</th>    
                        <th scope="column">Artiste</th>
                        <th scope="column">Genre</th>
                        <th scope="column">Time</th>
                        <th scope="column">Price</th>
                        <th scope="column">Description</th>    
                    </tr>    
                </thead>
                
                <tbody>
                    <tr ng:repeat="event in events.$filter({place: params.place}).$orderBy(orderProp)">
                        <td>{{event.date}}</td>
                        <td>{{event.day}}</td>
                        <td><a href="#/artiste/{{event.artiste}}">{{event.artiste}}</a></td>
                ...

CSS

/* app css stylesheet */
.menu {
    list-style: none;
    border-bottom: 0.1em solid black;
    margin-bottom: 2em;
    padding: 0 0 0.5em;
}

.menu:before {
    content: "[";
}

.menu:after {
    content: "]";
}

.menu > li {
    display: inline;
}

.menu > li:before {
    content: "|";
    padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
    content: "";
    padding: 0;
}

ul#controls {
    list-style-type: none;
    margin-bottom: 30px;
    padding: 0px;
}

ul#controls li {
    display: inline;
    margin: auto 100px;        
}

body {
    width: 1000px;
}

div#mytitle {
    background-color: #B4DBE6;
    text-align: center;
    margin: auto 100px;
}

div#events {
    position: absolute;
    margin: auto 100px;
}

table {
    border: 1px solid black; 
    border-collapse:collapse; 
    table-layout: fixed;
    width: 1000px;
    margin-bottom: 30px;
    
}

th { 
    overflow: scroll;
    border-spacing: 0px 1px; 
    color: white; 
    background: #0675ad;
    vertical-align: bottom; 
    padding: 3px; 
    border-spacing: 0px 1px; 
}

td {
    border-bottom: 1px solid black;
    text-align: center;
    table-layout: fixed;
    height:20px;
    overflow: scroll;
}

JavaScript

/* App Controllers */

function EventsCatCtrl($route) {
    var self = this;

    $route.when('/events', {
        template: 'partials/events-list.html',
        controller: EventsListCtrl
    });
    $route.when('/place/:place', {
        template: 'partials/place-detail.html',
        controller: EventsListCtrl
    });
    $route.when('/artiste/:artiste', {
        template: 'partials/artiste-detail.html',
        controller: EventsListCtrl
    });
    $route.otherwise({
        redirectTo: '/events'
    });
    $route.onChange(function() {
        self.params = $route.current.params;
    });

    $route.parent(this);
}

//EventsCatCtrl.$inject = ['$route'];

function EventsListCtrl() {
    var self = this;
    this.events = [
        {
        "date": "7/4/2011",
        "day": "Monday",
        "place": "Acid Bar",
        "artiste": "Nelson",
        "genre": "Acoustic",
        "time": "1900-2100",
        "price": "$$$ + $20 cover",
        "description": "none",
        },
    {
        "date": "7/4/2011",
        "day": "Monday",
        "place": "Acid Bar",
        "artiste": "Tuna Pop",
        "genre": "Acoustic",
        "time": "2130-0045",
        "price": "$$$ + $20 cover",
        "description": "none",
        },
    {
        "date": "7/4/2011",
        "day": "Monday",
        "place": "Blujaz Cafe",
        "artiste": "Greg Lyons and 10 piece band, Omniform",
        "genre": "Jazz",
        "time": "2130",
        "price": "$$ (Free entry)",
        "description": "What started off as a chance to play Greg’s arrangements has evolved to include all the individual characters that form the band. The repertoire is still made up largely of Greg’s compositions and wholly of his arrangements which draw from just about every genre of music. Omniform also features some awesome and very individual soloists. Monster Trio, sometimes a quartet consists of talented musicians.",
        },
    {
        "date": "7/4/2011",
        "day": "Monday",
       ...