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.

A Pen by Mark Silverberg 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;
  }
}