JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by chrischilcoat

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/nd1mexyy0xevhv5/6fdc3a856a26e706a3edad566422a903.css?dl=0/6fdc3a856a26e706a3edad566422a903.css?yakabox-vne-5.21.4-1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/jquery.sidr.min.js"></script>
<div class="ui-yakabox-layout-iWorkflow-wrapper container proto-1">
	<h3>Create a PDF Form Template</h3>
  <hr>
  <div class="row">
    <div class="ui-yakabox-layout-iWorkflow-aside col-md-4">
      <h3>Steps:</h3>
        <ol class="nav nav-pills nav-stacked">
           <li class="active"><a href="#stay">Select an App</a></li>
           <li class="disabled"><a href="#stay">Upload a PDF</a></li>
           <li class="disabled"><a href="#stay">Preview Fields</a></li>
           <li class="disabled"><a href="#stay">Publish Form</a></li>              			          
        </ol>
    </div>
    <div class="ui-yakabox-layout-iWorkflow-content col-md-8">
    	     
      <h1>Select an App</h1>
      
         <button id="vne:www.yakabod.com:flightboard:50" name="vne:www.yakabod.com:flightboard:50" type="button" class="ybx-SelectApp ybx-CAContainer ui-thumbnail-button ui-state-default ui-corner-all">
            <span class="ui-button-icon"><img src="https://yakabod.yakabox.com/images/userupload/stock_forms/thumbnail_50.svg?v=20190920"></span>
            <span class="ui-button-text">Coffee</span>
       ...

CSS

.form-group {
  padding-top:5px;
  padding-bottom:5px;
}
.control-label {
  text-align:right;
  margin-top:5px;
}











.ui-yakabox-layout-iWorkflow{background:#efefef}.ui-yakabox-layout-iWorkflow #globHeader{top:0}.ui-yakabox-layout-iWorkflow #globHeader #Logout,.ui-yakabox-layout-iWorkflow #globHeader #navBarDoStuffLink{display:none}.ui-yakabox-layout-iWorkflow-wrapper.container,.ui-yakabox-layout-iWorkflow-wrapper.container-fluid{margin-top:7em;margin-bottom:7em;padding-bottom:19px;-o-box-shadow:0 0 5px #aaa;-moz-box-shadow:0 0 5px #aaa;-webkit-box-shadow:0 0 5px #aaa;box-shadow:0 0 5px #aaa;background:#fff;border-radius:5px}.ui-yakabox-layout-iWorkflow-wrapper.container h1,.ui-yakabox-layout-iWorkflow-wrapper.container-fluid h1{font-weight:400}.ui-yakabox-layout-iWorkflow-aside .nav>li{margin-top:0}.ui-yakabox-layout-iWorkflow-aside .nav>li>a{padding:5px 10px 5px 30px;border-radius:0;border-right:1px solid #eee}.ui-yakabox-layout-iWorkflow-aside .nav>li .ui-icon.ui-icon-circle-check{position:absolute;background-image:url(/images/yakabox-icons.png);background-position:-105px -45px;top:7px;left:7px;z-index:1}.ui-yakabox-layout-iWorkflow-content h3{padding:.3em 0}.ui-yakabox-layout-iWorkflow-footer.ui-buttonset{padding-top:1.3em}.ui-yakabox-layout-iWorkflow-wrapper hr.ui-widget{margin:0;padding:.2em 0}
body.ui-yakabox-layout-iWorkflow{background-color:#F2F2F2}.ui-yakabox-layout-iWorkflow .ui-yakabox-layout-iWorkflow-wrapper{border:1px solid #D3D3D3;background:#fff;color:#222},.ui-yakabox-layout-iWorkflow .ui-yakabox-layout-iWorkflow-wrapper a{color:#1977B1}.ui-yakabox-layout-iWorkflow .ui-yakabox-layout-iWorkflow-aside{border-color:#fff #D3D3D3 #fff #fff}.ui-yakabox-layout-iWorkflow .ui-yakabox-layout-iWorkflow-aside .ui-state-default,.ui-yakabox-layout-iWorkflow .ui-yakabox-layout-iWorkflow-aside .ui-widget-content .ui-state-default,.ui-yakabox-layout-iWorkflow .ui-yakabox-layout-iWorkflow-aside .ui-widget-header .ui-state-default{border:1px solid...

JavaScript

$('.proto-js-errorfield-btn').click( function(e) {
  $('.proto-js-errorfield-error').hide();
  $('.proto-js-errorfield-normal').show();
  e.preventDefault();
});

$('.ybx-mobile').click( function(e) {
  $('.ui-yakabox-layout-iWorkflow-content')
    .removeClass('ui-layout-mobile')
    .removeClass('ui-layout-tablet')
    .removeClass('ui-layout-desktop')
    .addClass('ui-layout-mobile');
    $('.proto-layout-editor').hide();
    $('.proto-layout-form').show();
  e.preventDefault();
});

$('.ybx-tablet').click( function(e) {
  $('.ui-yakabox-layout-iWorkflow-content')
    .removeClass('ui-layout-mobile')
    .removeClass('ui-layout-tablet')
    .removeClass('ui-layout-desktop')
    .addClass('ui-layout-tablet');  
    $('.proto-layout-editor').hide();
    $('.proto-layout-form').show();
  e.preventDefault();
});

$('.ybx-desktop').click( function(e) {
  $('.ui-yakabox-layout-iWorkflow-content')
    .removeClass('ui-layout-mobile')
    .removeClass('ui-layout-tablet')
    .removeClass('ui-layout-desktop')
    .addClass('ui-layout-desktop'); 
    
  $('.proto-layout-editor').show();
  $('.proto-layout-form').hide();
  e.preventDefault();
});




 $('.btn.btn-link.btn-sm').click( function(e) {
  $('.proto-autosave').html('Saving...').parent().removeClass('btn-link').addClass('btn-success').find('.fa-caret-down').addClass('hide');
  setTimeout(function(){
    $('.proto-autosave').html('Saved 11:59 PM').parent().removeClass('btn-success').addClass('btn-link').find('.fa-caret-down').removeClass('hide');
  }, 2000);
});



/*
$('#proto-ybx-edit').click( function(e) {
  $(this).hide();
   $('.ui-yakabox-layout-iWorkflow-content')
    .removeClass('ui-layout-mobile')
    .removeClass('ui-layout-tablet')
    .removeClass('ui-layout-desktop')
    .addClass('ui-layout-desktop'); 
    
  $('#proto-ybx-preview').show();
  $('.proto-layout-editor').show();
  $('.proto-layout-form').hide();

e.preventDefault();

});

$('#proto-ybx-preview').click( function(e) {
 ...