JSFiddle - React, Tailwind, and code Playground

by Spero Koulouras

HTML

<!-- Start of second page: #two -->
<div data-role="page" id="devicePage" data-theme="a">
    <div data-role="header">
        <h1 class="deviceTitleBanner" id="deviceTitle"></h1>
    </div>

    <!-- /header -->
    <div role="main" class="ui-content">
      <form>
        <div class="tableData" data-role="collapsible-set" id="devices">
          <!-- Devices will be injected here -->

          <div data-role='collapsible' data-collapsed='true' class='zoneData ui-grid-a' id='zoneInfo-1'>
            <h2 data-id='ZoneNameNoSpace'> 
              <div class='zoneNameColumn ui-block-a'>
                <input class='zoneNameText hidden' type='text' data-enhanced='true' id='zoneNameText-zoneNameNoSpace'
                       data-id='zoneNameNoSpace' value='zone1'>
                <a href='#' data-role='button' data-transition='slide' class='zoneNameAnchor' id='zoneNameAnchor-1' style='background-color: transparent; border: none; box-shadow: none' data-id='zoneNameNoSpace'>zone1
                </a>
              </div>
              <div class='zoneDeleteColumn ui-block-b'>deleteDiv</div>
            </h2>
            <ul data-role='listview' class='sortable-list deviceData' id='zoneNameNoSpace-list'>

              <li class="deviceData ui-grid-b">
                <div class="deviceName ui-block-a">
                  <button class="dragHandle"></button>
                  <button id="nameButton" data-icon="bars" data-mini="true">Device Name</button>
                  <input id="nameInput" data-mini="true" type="text" value=""/>
                  <div class="deviceInfo">
                    <div class="ui-block-a">
                      <h1 class="deviceInfoLabel">Model:</h1>
                      <span class="deviceInfoValue">Xenio Point</span>
                    </div>
                    <div class="ui-block-a">
                      <h1 class="deviceInfoLabel">Firmware:</h1>
                      <span class="deviceInfoValue">A.01.23</span>
                  ...

CSS

.hidden { display: none }
.right { float: right }
.left { float: left }

.zoneData .zoneDeleteColumn { width: 10% }
.zoneData .zoneNameColumn { width: 80% }


.deviceInfo h1 {  display: inline; padding-left: 1rem; font-size: .6rem; font-weight: 100; width: inherit }
.deviceInfo span {  font-size: .6rem; font-weight: 600; width: inherit }

.deviceName .dragHandle  { position: absolute; height: 2rem; width: 2rem; z-index: 100; }

.resetButton.ui-btn { background: none; border: none; box-shadow: none; font-size: .8rem; font-weight: 100; margin: 4rem 0 0 0; padding: 0 0 1.7rem 0 }

.resetButton.ui-btn:focus,
.resetButton.ui-btn:active,
.resetButton.ui-btn:hover {background: red; color: white; box-shadow: none}

.dragHandle.ui-btn:hover {background: blue}
.dragHandle.ui-btn:focus,
.dragHandle.ui-btn:active { background: transparent; width: 21px; border: none; box-shadow: 0 0 7px 0px #38c;
                            margin-left: 6px; margin-top: 7px;height: 21px; border-radius: 20px; }
.deviceData { padding: .5rem .2rem 0 .5rem; background: #FFFFFF; margin-top: 3rem; border: 1px solid #aaa}

.deviceData fieldset.ui-field-contain,.ui-field-contain label,.ui-field-contain,.ui-btn,.ui-flipswitch,div.ui-slider { margin: 0; }
.deviceData div.ui-slider { height: inherit; padding: .4rem 0 0 0 }

.deviceData .deviceName { width: 16%; margin: 0;}
.deviceData .controls { width: 74%; margin: 0; padding: .2rem; background: #fff}
.deviceData .delete { width: 9.8%; margin: 0 auto; padding: .2rem;   }
.deviceData .status { float: right; margin-top: 2px -10rem 5px 3px; font-size: .6rem; 
                      color: #38C; text-align: right;  }
.deviceData .status .alerts { color: red }
.deviceData .ui-slider-track.ui-mini { height: 8px; top: 8px; margin-left: 2.2rem; 
                                        margin-right: 7px; border: none; box-shadow: none;}
.deviceData .ui-rangeslider-sliders { margin-right: 2rem; margin-left: 0rem; height: auto }
.deviceData...

JavaScript

$('#nameInput').hide()
$('.detailControls,.deviceInfo').hide()

/*
$('#nameButton').on("vclick", function () { $('.detailControls,.deviceInfo').toggle() })
$('#nameButton').on("taphold", function () { $('#nameButton').toggle(); $('#nameInput').val($(this).text()).toggle().focus() })
$('#nameInput').on("change", function() { $('#nameButton').text($(this).val()).toggle(); $('#nameInput').toggle() })
$('#nameInput').on("blur", function() { $('#nameButton').toggle(); $('#nameInput').toggle() })
*/

var resStepValues = [0, .01, .02, .03, .04, .05, 1, 1.5, 2, 3, 4, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 150, 200, 250, 300, 500, 750, 1000, 1500];

var slider = $("#dmxAddrSlider").slider({
    animate: true,
    min: 0,
    max: 29,
    range: 'min',
    values: [0, 29],
    slide: function (event, ui) {
            $("#dmxAddrSlider").val(resStepValues[ui.values[0]]);
    }
});