IFTTY

by chrischilcoat

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="panel-left bg-dark">
   <p>Setup a new IFTTY</p>
   <h2>If</h2>
   <select class="custom-select" id="inputGroupSelect02">
      <option >- Select -</option>
      <option value="1" selected>Approved Date</option>
      <option value="2">Assigned Date</option>
      <option value="3">Completed by Dev Date</option>
      <option value="3">Status</option>
   </select>
   <select class="custom-select" id="">
      <option >- Select -</option>
      <option value="1" selected>Is Set</option>
      <option value="">Is Set To</option>
      <option value="">Days Out</option>
      <option value="">Day Of</option>
      <option value="">60 Days Out</option>
      <option value="">30 Days Out</option>
      <option value="">Has Passed</option>
      <option value="">Is Empty</option>
      <option value="">Is Not Empty</option>
   </select>
   <h2>Then</h2>
   <button type="button" class="btn btn-default btn-block ybx-autoupdatefield-btn">Update Field</button>
   <!-- <button type="button" class="btn btn-default btn-block ybx-manualupdatefield-btn">Manual Update Field</button> -->
   <button type="button" class="btn btn-default btn-block ybx-sendtask-btn">Send Task</button>
</div>






<div class="panel-right bg-dark ybx-autoupdatefield" style="display:none;">
   <div class="col-xs-12">
      <br>
      <h4>
          Update Field
      </h4>
      <hr>
      <div class="pretty p-switch p-solid">
         <input type="checkbox" value="on" style="display:inline-block;"> <label style="padding: 0px;...

SCSS

.panel-left {
  width:300px;
  padding:20px;
  left:0px;
  top:0;
  height:100%;
  position:fixed;
  color:#fff;
    overflow:scroll;

}

.panel-right {
  width:500px;
  padding:20px;
  position:fixed;
  left:301px;
  top:0;
  height:100%;
  color:#fff;
  overflow:scroll;
}

.h4, h2 {
  margin-top:20px;
  font-size:20px;
}

JavaScript

$('.ybx-autoupdatefield-btn').on('click', function(e){
  $('.ybx-autoupdatefield').show();
  $('.ybx-manualupdatefield').hide();
  $('.ybx-sendtask').hide();
});
$('.ybx-manualupdatefield-btn').on('click', function(e){
  $('.ybx-autoupdatefield').hide();
  $('.ybx-manualupdatefield').show();
  $('.ybx-sendtask').hide();
});
$('.ybx-sendtask-btn').on('click', function(e){
  $('.ybx-autoupdatefield').hide();
  $('.ybx-manualupdatefield').hide();
  $('.ybx-sendtask').show();
});