packages/zeitline/example/index.html from octree-gva/Zeitline

packages/zeitline/example/index.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<meta charset="utf-8">
<title>Zeitline</title>
<style>
body {
  padding-top: 8%;
  transition: background-color .3s ease;
}

.event {
  fill: #4249ae;
  /*transition: fill .2s ease-out;*/
}

.event:hover {
  fill: #5d8;
}

.pivot-group.draggable {
  opacity: 0.6;
}

.pivot-group:hover {
  cursor: col-resize;
}

.reference-line {
  stroke: #ee7d79;
  shape-rendering: crispEdges;
  stroke-dasharray: 6.7;
  stroke-linecap: round;
}

.wrapper {
  text-align: center;
}

.axis--x .domain {
  stroke: #e4e4e4;
  stroke-width: 4;
  stroke-linecap: round;
}

.axis--x .tick text, .event-group text {
  opacity: .6;
}

.axis--x .tick line {
  transform: translateY(-10px);
  stroke: rgba(180, 180, 180, .5);
  stroke-width: 1;
  stroke-linecap: round;
}

button {
  padding: 8px 16px;
  font-weight: bold;
  border: 2px solid #444;
  background: #fff;
  font-size: 10px;
  text-transform: uppercase;
  margin: 3px;
}

.controlbar {
  margin: 30px auto;
}
</style>
<body>
  <div class="wrapper">
    <svg width="900" height="100"></svg>

    <!--<div class="controlbar">
      <button class="move-left"><</button>
      <button class="move-right">></button>

      <button class="interval" data-interval="Day" data-ticks-interval="Hour" data-time-format="%H">Day</button>
      <button class="interval" data-interval="Week" data-ticks-interval="Day" data-time-format="%d">Week</button>
      <button class="interval" data-interval="Month" data-ticks-interval="Day" data-time-format="%d">Month</button>
      <button class="interval" data-interval="Year" data-ticks-interval="Month" data-time-format="%B">Year</button>
    </div>-->
  </div>

  <script type="text/javascript" src="../dist/zeitline.bundle.js"></script>
  <script type="text/javascript" src="example.js"></script>
</body>