JSFiddle - React, Tailwind, and code Playground

Action Graphs with Live filters

by Dug Sohn

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/themes/darkly/ui_dark.css">
<header class="nav-down">
  <i class="fa fa-home fa-3x"></i>
</header>
<main>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>$Ifis Admin wraps edit tools
</h1>
        <h2>Share shows for all</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3 text-center">
        <button class="btn btn-primary ybx-widget-add"><i class="fa fa-plus"></i> Add Widget
        </button>
      </div>
    </div>
    <div class="row ybx-widget-menu">
      <div class="col-sm-6 col-sm-offset-2">
        <div class="text-center">
          <i class="fa fa-caret-up"></i>
        </div>
        <div class="row ui-inverse">
          <div id="widgetCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <div class="ui-widgets">
                  <div class="col-md-4 col-sm-4 col-xs-6"><span class="btn btn-link btn-block" title="Data Grid"><i class="fa fa-list fa-2x fa-fw"></i><div>Data Grid</div></span></div>
                  <div class="col-md-4 col-sm-4 col-xs-6"><span class="btn btn-link btn-block" title="Headline"><i class="fa fa-font fa-2x fa-fw"></i><div>Headline</div></span></div>
                  <div class="col-md-4 col-sm-4 col-xs-6"><span class="btn btn-link btn-block" title="Text Area"><i class="fa fa-align-left fa-2x fa-fw"></i><div>Text Area</div></span></div>
                  <div class="col-md-4 col-sm-4 col-xs-6"><span class="btn btn-link btn-block" title="Activity Viewer"><i class="fa fa-rss fa-2x fa-fw"></i><div>App Activity...

CSS

body {
  padding-top: 50px;
  padding-bottom: 60px;
}

header {
  background: #000;
  height: 50px;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
  padding: 5px;
  color: #fff;
  z-index: 200;
}

footer {
  background: #000;
  height: 50px;
  position: fixed;
  bottom: 0;
  transition: bottom 0.2s ease-in-out;
  width: 100%;
}

.nav-up {
  top: -50px;
}

.footer-hide {
  bottom: -200px;
}

.footer-show {
  bottom: 0;
}

main {
  color: #666
}

footer {
  background: #ddd;
  position: fixed;
  bottom: 0;
}

.navbar-inverse .navbar-brand {
  color: #FFF;
}

.navbar-inverse .navbar-text {
  color: #fff;
}

.navbar-right {
  margin-left: 10px;
}

.btn {
  margin-right: 10px;
}

.ybx-widget-menu {
  display: none;
    position: absolute;
    z-index: 300;
    left: 155px;
}

.ui-inverse a:hover,
.ui-inverse a:focus,
.ui-inverse .btn-link:hover {
  text-decoration: none;
}

.ybx-widget-menu .text-center {
  height: 15px;
}

.fa-caret-up {
  font-size: 60px;
  line-height: 18px;
  height: 19px;
  overflow: hidden;
}

.ui-inverse .btn-block:hover {
  background-color: #000;
}

.row.ui-inverse {
  padding: 20px 20px 10px 20px;
  min-height: 200px;
  position: relative;
}

.ui-circle-step {
  border: 2px solid #fff;
  border-radius: 15px;
  padding: 5px;
  width: 25px;
  height: 25px;
  display: inline-block;
  font-size: 15px;
  line-height: 12px;
  color: #fff;
}

.col-bottom.carousel-indicators {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  margin-left: 0
}

#widgetCarousel {
  min-height: 220px;
}

.ui-inverse .carousel-indicators .active {
  margin: 0;
  width: 12px;
  height: 12px;
  background-color: transparent;
  color: #fff;
}

.ui-inverse .carousel-indicators .active .fa {
  color: transparent;
}

.ui-inverse .carousel-indicators .active,
.ui-inverse a,
.ui-inverse a:hover,
.ui-inverse a:focus {
  display: inline-block;
  width: 120px;
}

.ui-crossfilters .alert {
  position: absolute;
  width: 100%;
  top:...

JavaScript

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event) {
  didScroll = true;
});

setInterval(function() {
  if (didScroll) {
    hasScrolled();
    didScroll = false;
  }
}, 250);

function hasScrolled() {
  var st = $(this).scrollTop();

  // Make sure they scroll more than delta
  if (Math.abs(lastScrollTop - st) <= delta)
    return;

  // If they scrolled down and are past the navbar, add class .nav-up.
  // This is necessary so you never see what is "behind" the navbar.
  if (st > lastScrollTop && st > navbarHeight) {
    // Scroll Down
    $('header').removeClass('nav-down').addClass('nav-up');
    $('footer').removeClass('footer-hide').addClass('footer-show');

  } else {
    // Scroll Up
    if (st + $(window).height() < $(document).height()) {
      $('header').removeClass('nav-up').addClass('nav-down');
      $('footer').removeClass('footer-show').addClass('footer-hide');
    }
  }

  lastScrollTop = st;
}

$('.ui-esc').click(function() {
  $(this).parent().hide();
});

$(document).on('keydown', function(e) {
  if (e.keyCode === 27) { // ESC
    $('.ui-crossfilters .alert').hide();
  }
});

$('.ybx-widget-add').click(function(e) {
  $('.ybx-widget-menu').toggle();
});

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
});

$('.btn-singleFilter').click(function() {
$(this).closest('.row').find('.btn').removeClass('btn-primary');
$('#groupBy').hide();

$('#singleFilter').show();
 $(this).addClass('btn-primary');

});

$('.btn-groupBy').click(function() {
$(this).closest('.row').find('.btn').removeClass('btn-primary');
$('#singleFilter').hide();
$('#groupBy').show();

$(this).addClass('btn-primary');

});