JSFiddle - React, Tailwind, and code Playground

by tronne

HTML

<script src="http://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://torontographic.com/wordpress/mouseSwipe/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://raw.github.com/HumbleSoftware/Flotr2/master/examples/examples.css">
<script src="https://rawgithub.com/HumbleSoftware/Flotr2/master/flotr2.min.js"></script>
<script src="https://raw.github.com/x1024/jquery-fastbutton/master/bin/fastbutton.js"></script>
<!-- http://fiddle.jshell.net/tronne/spcd6Lo2/45/show/ -->
<meta name="viewport" content="width=device-width, initial-scale=1">
 <div data-role="header" data-theme="b" id="headnav"> 
    
    <a href="#left-panel" data-icon="gear" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon" id="l-panel">Open left panel</a>

    <div data-role="controlgroup" data-type="horizontal" class="navbut"> 
     <a href="#" data-href="#eat" data-transition="none" data-role="button" id="eat-link" data-icon="check" data-title="Eat">Eat</a>
     <a href="#" data-href="#coach" data-transition="none" data-role="button" data-icon="bullets" id="coach-link" data-title="Coach">Coach</a>
     <a href="#" data-href="#stats" id="stats-link" data-transition="none" data-role="button" data-icon="info" data-title="Stats">Stats</a>

    </div>
<a href="#right-panel" data-icon="plus" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon" id="r-panel">Open right panel</a>

</div>
<!-- /header -->
<div data-role="panel" id="left-panel" data-theme="b" data-display="push" data-position="left">
     <!--<h2>Tips</h2>-->

    <ul data-role="listview">
        <li><a href="#account">Tu cuenta</a>

        </li>
        <li><a href="#preferences">Preferencias</a>

        </li>
    ...

CSS

/* Hightlight new DOM */
@-webkit-keyframes yellow-fade {
   0% {background: yellow;}
   100% {background: none;}
}

@-moz-keyframes yellow-fade {
   0% {background: yellow;}
   100% {background: none;}
}

@-ms-keyframes yellow-fade {
   0% {background: yellow;}
   100% {background: none;}
}

@-o-keyframes yellow-fade {
   0% {background: yellow;}
   100% {background: none;}
}

@keyframes yellow-fade {
   0% {background: yellow;}
   100% {background: none;}
}


.highlight {
   -webkit-animation: yellow-fade 2s ease-in 1;
   -moz-animation:  yellow-fade 2s ease-in 1;
   -ms-animation:  yellow-fade 2s ease-in 1;
   -o-animation:  yellow-fade 2s ease-in 1;
   animation:  yellow-fade 2s ease-in 1;
}


/*Tabla*/
.movie-list thead th, .movie-list tbody tr:last-child {
    border-bottom: 1px solid #d6d6d6;
    /* non-RGBA fallback */
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.movie-list tbody th, .movie-list tbody td {
    border-bottom: 1px solid #e6e6e6;
    /* non-RGBA fallback  */
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.movie-list tbody tr:last-child th, .movie-list tbody tr:last-child td {
    border-bottom: 0;
}
.movie-list tbody tr:nth-child(odd) td, .movie-list tbody tr:nth-child(odd) th {
    background-color: #eeeeee;
    /* non-RGBA fallback  */
    background-color: rgba(0, 0, 0, .04);
}
.ui-field-contain > label, .ui-field-contain .ui-controlgroup-label, .ui-field-contain > .ui-rangeslider > label {
    width: 180px !important;
}
.ui-field-contain > label ~[class*="ui-"], .ui-field-contain .ui-controlgroup-controls {
    width: 200px !important;
}
.ui-block-foot-a {
    float: left;
    width: 90%;
    margin-left: 2%;
}
.ui-block-foot-b {
    float: left;
    width: 5%;
}
.ui-block-foot-b a {
    width: 30px;
}

/*Graphs*/
#editor-render-0 {
    /*width: 340px;*/
    width: auto;
    height: 220px;
    margin: 24px auto;
}
#editor-render-1 {
    width: auto;
    height: 220px;
    margin: 24px auto;
}
/* General Blueprint Style */
...

JavaScript

//implementar esto http://demos.jquerymobile.com/1.3.2/examples/swipe/swipe-page.html y http://jsfiddle.net/alexwhin/kt270xc6/ y http://tympanus.net/Blueprints/VerticalTimeline/ y http://jsfiddle.net/necolas/vhZds/



//########BUGS########
//1. Si pulsas muy rapido losbotones del navbar se bloquea porque no ha dado tiempo a que se cargase la page por lo que habrá que poner algún contador e inabilitar los botones hasta que parge la pagina
//2. The active button is dectivated when you click the arrow to display the panel
//3. Fontawesome no va porque hay que meterle ficheros locales y cambiar lo que pone aqui http://stackoverflow.com/questions/17897285/im-using-phonegap-and-in-my-pages-im-trying-to-use-fontawesome-but-it-doesnt
//4. Con el panel de la izquierda el content se ve una franja abajo
//5. Segundo click en curiosidades no cierra panel
//6. Ver si funciona el fastclick en el movil





$(function () {
    $("[data-role='header'],[data-role='footer']").toolbar();
});

$(function () {
    $("[data-role='panel']").panel();
    $("[data-role='listview']").listview();
});



//hack screen size
var screen = $.mobile.getScreenHeight();

var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();

var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent + 2; //lo he cambiado respecto del original porque al añadir el panel title se estropeaba

$(".ui-content").height(content);




//############################################ charts
//otra libreria js por si acaso http://www.flotcharts.org/ y donuts http://codepen.io/arlekino/pen/Kkrah
//line chart data




$(document).on("pagechange", function (event, data) {
    var toPage = data.toPage[0].id;
    if (toPage == "stats")

    (function...