Nominees

index.html

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//use.typekit.net/xss5ppa.js"></script>
<script>
  try {
    Typekit.load({
      async: true
    });
  } catch (e) {}
</script>

<div class="container">
  <br />
  <h2>Nomination Tracker</h2>
  <p>
    <div class="legend">
      <div class="btn-group">
        <span class="btn phase1 arrow" style="width:11.5%"><span class="tooltips">President Nominates<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus a orci et elementum. Cras faucibus tortor sed dui lobortis, nec vulputate enim aliquam.</span></span>
        </span>
        <span class="btn phase2 arrow" style="width:11.5%"><span class="tooltips">Senate Nominates<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus a orci et elementum. Cras faucibus tortor sed dui lobortis, nec vulputate enim aliquam.</span></span>
        </span>
        <span class="btn phase3 arrow" style="width:11.5%"><span class="tooltips">Senate Committee Vote<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus a orci et elementum. Cras faucibus tortor sed dui lobortis, nec vulputate enim aliquam.</span></span>
        </span>
        <span class="btn phase4 arrow" style="width:11.5%"><span class="tooltips">Floor Debate<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus a orci et elementum. Cras faucibus tortor sed dui lobortis, nec vulputate enim aliquam.</span></span>
        </span>
        <span class="btn phase5 arrow" style="width:11.5%"><span class="tooltips">Cloture Debate<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus a orci et elementum. Cras faucibus tortor sed dui lobortis, nec vulputate enim aliquam.</span></span>
        </span>
        <em class='right'>total process days</em>
      </div>
    </div>
  </p>

  <div id='nominations'>

  </div>

  <p class="nominee">
    <div class='name'>Justice New, 2016</div>
    <div class="timeline">
      <div class="btn-group">
        <span class="btn pill waiting only-pill" style="width:4%">&nbsp;</span><span class='waiting-text'>4 days and waiting</span>
      </div>
    </div>
  </p>


</div>

Nominees.markdown

Nominees

Forked from Phil Hoyt's Pen Generic CSS Button Kit.

Forked from Phil Hoyt's Pen Generic CSS Button Kit.

Forked from Phil Hoyt's Pen Generic CSS Button Kit.

Forked from Phil Hoyt's Pen Generic CSS Button Kit.

A Pen by jaime sanchez on CodePen.

License.

script.js

$( document ).ready(function() {


  /* Nomination template */
  var nominationTemplate = _.template(' \
    <p class="nominee">\
      <div class="name"><span class="tooltips"><%= nominee %><span><strong>Nominated by:</strong> <%= nominated_by %><br /><strong>Date: </strong> <%= start_dare %></span></span></div> \
      <div class="timeline"> \
        <div class="btn-group"> \
          <span class="btn pill phase1" style="width:<%= days_until_senate_committee_hearing %>%"><%= days_until_senate_committee_hearing %><span class="hide-when-smallish"> days</span></span><span class="btn pill phase2" style="width:<%= days_until_senate_committee_vote %>%"><%= days_until_senate_committee_vote %></span><span class="btn pill phase3" style="width:<%= days_until_floor_debate %>%"><%= days_until_floor_debate %></span><span class="btn pill phase4" style="width:<%= days_until_cloture_vote %>%"><%= days_until_cloture_vote %></span><span class="btn pill phase5" style="width:1%"><%= days_until_confirmation %></span> \
      <em class="right"><span class="total">Total: </span>XX days</em> \
        </div> \
      </div> \
    </p>')

  /* Get nomination data */
  jQuery.getJSON('https://mark.demo.socrata.com/resource/bs5b-8wwt.json', function(data){
    _.each(data, function(nomination){
      var nominationHTML = nominationTemplate(nomination)
      jQuery("#nominations").append(nominationHTML)
    })
  })
  
});

style.css

.container {
  margin-left: 20px;
  font-family: "myriad-pro", sans-serif;
  font-style: normal;
}

.timeline {
  margin-bottom: 30px;
}

.name {
  font-weight: bold;
  margin-bottom: 8px;
  font-family: "myriad-pro", sans-serif;
}

.total {
  font-weight: normal
}

.legend {
  background-color: #dadbdc;
  padding: 20px;
  margin-right: 20px
}

.legend .btn {
  font-family: "myriad-pro-condensed", sans-serif;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  height: 22px;
  line-height: 22px;
  font-size: 15px;
  position: relative;
  /*   overflow-x: scroll; */
}

.legend .right {
  text-transform: uppercase;
  line-height: 26px;
  font-family: "myriad-pro-condensed", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
}

.legend .btn-group span.btn:not(:first-child) {
  margin-left: 20px !important;
}

.arrow:before {
  content: "";
  position: absolute;
  top: 0;
  right: -24px;
  border-style: solid;
  border-width: 11px 11px 11px 13px;
}

.waiting-text {
  margin-left: 10px;
  font-weight: bold;
}

.btn.phase1 {
  background-color: #5a9faf;
  border-color: transparent transparent transparent #5a9faf;
}

.btn.phase1.arrow:before {
  border-color: transparent transparent transparent #5a9faf;
}

.btn.phase2 {
  background-color: #4e3250;
}

.btn.phase2.arrow:before {
  border-color: transparent transparent transparent #4e3250;
}

.btn.phase3 {
  background-color: #eb5927;
}

.btn.phase3.arrow:before {
  border-color: transparent transparent transparent #eb5927;
}

.btn.phase4 {
  background-color: #17376a;
}

.btn.phase4.arrow:before {
  border-color: transparent transparent transparent #17376a;
}

.btn.phase5 {
  background-color: #749690;
}

.btn.phase5.arrow:before {
  border-color: transparent transparent transparent #749690;
}

.btn {
  text-decoration: none;
  color: #FFF;
  font-size: 16px;
  padding: 0 15px;
  line-height: 32px;
  max-height: 40px;
  display: inline-block;
  text-align: center;
  background-color: #999;
}

.btn.waiting {
  background-color: #9f192e;
  background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

.only-pill {
  -webkit-border-radius: 16px !important;
  -moz-border-radius: 16px !important;
  border-radius: 16px !important;
}

.right {
  right: 20px;
  position: absolute;
  margin-right: 20px;
  line-height: 34px;
  text-transform: uppercase;
  font-family: "myriad-pro-condensed", sans-serif;
  font-weight: 700;
  font-size: 18px;
}

.btn.round {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.btn.pill {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.btn-group > .btn.round:not(:first-child),
.btn-group > .btn.pill:not(:first-child) {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  margin-left: 0;
}

.btn-group > .btn.round:first-child,
.btn-group > .btn.pill:first-child {
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn.pill:nth-last-child(2) {
  -webkit-border-top-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-bottomleft: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-border-top-right-radius: 16px;
  -webkit-border-bottom-right-radius: 16px;
  -moz-border-radius-topright: 16px;
  -moz-border-radius-bottomright:16px0;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.btn-group .btn + .btn {
  border-left: 1px solid rgba(0, 0, 0, .1);
  margin-left: -1px;
}

.btn-group {
  max-width: 95%;
}


/* Tooltips */

span.tooltips {
  position: relative;
  display: inline;
}

span.tooltips span {
  font-family: "myriad-pro", sans-serif;
  font-weight: normal;
  position: absolute;
  width: 330px;
  color: #000000;
  background: #FFFFFF;
  border: 2px solid #58595A;
  line-height: 20px;
  text-align: center;
  visibility: hidden;
  padding: 5px 0px;
}

span.tooltips span:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -12px;
  width: 0;
  height: 0;
  border-top: 12px solid #58595A;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
}

span.tooltips span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid #FFFFFF;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

span:hover.tooltips span {
  visibility: visible;
  bottom: 30px;
  left: 10%;
  z-index: 999;
  text-transform: none;
  text-align: left;
  padding-left: 7px;
}

em{
  font-style: normal;
}

/* responsive hacks */

@media (max-width: 1400px) {
  .legend .btn {
    display: block;
    width: 92% !important;
/*     padding-left: 0px !important; */
    margin-bottom: 5px;
  }
  .legend .btn-group span.btn:not(:first-child) {
    margin-left: 0px !important;
  }
  .right{
    position: static;
    display: inherit;
    text-align: right;
    margin-right: 0px;
    width: 95%;
  }
  .hide-when-smallish{
    display: none;
  }
}

@media (max-width: 900px) {
  .timeline .btn-group {
    width: 100%;
  }
  .btn.pill {
    display:block;
    border-radius: 0px !important;
  }
  .btn.pill.phase5{
    width: 0.1% !important;
  }
}