JSFiddle - React, Tailwind, and code Playground

by lcramer3

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://vitalets.github.io/x-editable/assets/x-editable/jqueryui-editable/js/jqueryui-editable.js"></script>
<link rel="stylesheet" href="https://vitalets.github.io/x-editable/assets/x-editable/jqueryui-editable/css/jqueryui-editable.css">
<div class="container">
	<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">Research Survey</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
    </ul>
    <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="/account">Edit Account</a></li>
              <li class="divider"></li>
              <li><a data-method="delete" href="/signout" rel="nofollow">Sign Out</a></li>
            </ul>
          </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

	
	<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:...

CSS

/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require select2
*= require_tree .
*= require_self
*/
@import "bootstrap_configuration";

@import "bootstrap-sprockets";

@import "bootstrap";

@font-face{
  font-family: AzoftSans;
  src: url('font/azoft-sans.eot');
  src: url('font/azoft-sans.eot?#iefix') format('embedded-opentype'),
       url('font/azoft-sans.ttf') format('truetype');
}

//->Prelang (ui_framework:twitter_bootstrap)

// Give everything in 'yield' margin to separate it.
.yield {
  margin: 30px;
}

// Constrain forms for models (scaffolded models) so they aren't full page width.
.form-model {
  max-width: 750px;
}

//->Prelang (user_login:devise)
.form-user {
  max-width: 450px;
}

body {
   font-family: "Calibri", Helvetica;
}

.active-item-shadow {
  -webkit-box-shadow: rgba(133,133,133,0.1) 0 0 5px 2px,rgba(133,133,133,0.3) 0 0 2px;
  -moz-box-shadow: rgba(133,133,133,0.1) 0 0 5px 2px,rgba(133,133,133,0.3) 0 0 2px;
  box-shadow: rgba(133,133,133,0.1) 0 0 5px 2px,rgba(133,133,133,0.3) 0 0 2px;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

.vert-space-sm{
  display: block;
  height: 1.2em;
  width: 100%;
  clear: both;
}
.vert-space-lg {
  display: block;
  height: 3em;
  width: 100%;
  clear: both;
}

.progress-text {
  color: rgb(50,50,50);
  font-style: italic;
  font-size: .835em;

}

.btn-surv {
  margin-bottom: 30px !important;

}

CoffeeScript

jQuery ->
  if $('#sortable').length > 0
    table_width = $('#sortable').width()
    cells = $('.table').find('tr')[0].cells.length
    desired_width = table_width / cells + 'px'
    $('.table td').css('width', desired_width)

    $('#sortable').sortable(
      axis: 'y'
      items: '.item'
      cursor: 'move'

      sort: (e, ui) ->
        ui.item.addClass('active-item-shadow')
      stop: (e, ui) ->
        ui.item.removeClass('active-item-shadow')
        # highlight the row on drop to indicate an update
        ui.item.children('td').effect('highlight', {}, 1000)
      update: (e, ui) ->
        item_id = ui.item.data('item-id')
        console.log(item_id)
        position = ui.item.index() # this will not work with paginated items, as the index is zero on every page
        $.ajax(
          type: 'PATCH'
          url: '/food_ranks/'
          dataType: 'json'
          data: { food_rank: {food_rank_id: item_id, row_order_position: position } }
        )
    )