JSFiddle - React, Tailwind, and code Playground

Config Windows

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-6">

        <div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block;">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Set up your Pie Graph</h4>
              </div>
              <div class="modal-body clearfix">

                <div class="row">
                  <div class="col-xs-5">
                    <svg viewBox="-1 -1 2 2" style="transform: rotate(-90deg)"></svg>
                    <div class="ui-label-position">
                      Inside
                    </div>
                    <br /> <br />

                    <div class="row">
                      <h5 class="text-center">
                        LABELS
                      </h5>
                      <div class="col-xs-6">
                        <button class="btn btn-block btn-primary btn-xs">
    Inside 
    </button>
                      </div>
                      <div class="col-xs-6">
                        <button class="btn btn-block btn-xs btn-default">
    Outside 
    </button>
                      </div>
                      <div class="col-xs-6">
                        <button class="btn...

CSS

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

svg {
  height: 200px; // the contents will scale to fit because of viewBox
}

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;
}

.pie {
  position: relative;
  width: 100px;
  line-height: 100px;
  border-radius: 50%;
  background: yellowgreen;
  background-image: linear-gradient(to right, transparent 50%, #655 0);
  color: transparent;
  text-align: center;
}

@keyframes spin {
  to {
    transform: rotate(.5turn);
  }
}

@keyframes bg {
  50% {
    background: #655;
  }
}

.pie::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 50s linear infinite, bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}

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:...

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();
  }
});

$(document).ready(function() {

  const svgEl = document.querySelector('svg');
  const slices = [{
      percent: 0.1,
      color: 'Coral'
    },
    {
      percent: 0.65,
      color: 'CornflowerBlue'
    },
    {
      percent: 0.2,
      color: '#00ab6b'
    },
  ];
  let cumulativePercent = 0;

  function getCoordinatesForPercent(percent) {
    const x = Math.cos(2 * Math.PI * percent);
    const y = Math.sin(2 * Math.PI * percent);
    return [x, y];
  }

  slices.forEach(slice => {
    // destructuring assignment sets the two variables at once
    const [startX, startY] = getCoordinatesForPercent(cumulativePercent);

    // each slice starts where the last slice ended, so keep a cumulative percent
    cumulativePercent += slice.percent;

    const...