Chore List

by Erik Bartlow

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<p>

</p>
<div class="container">
  <ul class="ci-chore-list">
    <li class="input-group  input-group-lg ci-chore-done">
      <span class="input-group-addon" id="ci-chore-complete">
      <i class="fa fa-check"></i>
    </span>
      <label title="" class="ci-chore-title">Make your bed</label>
      <span class="input-group-addon" id="ci-complete-user">Erik</span>
      <span class="input-group-addon" id="ci-chore-undo">
    <i class="fa fa-reply"></i>
    </span>
      <span class="input-group-addon" id="ci-chore-edit">
    <i class="fa fa-pencil"></i>
    </span>
      <span class="input-group-addon" id="ci-chore-point">1</span>
    </li>
    <li class="input-group  input-group-lg">
      <span class="input-group-addon" id="ci-chore-complete">
      <i class="fa fa-check"></i>
    </span>
      <label title="Skim the pool of leaves and empty the skimmers and clear vacuum." class="ci-chore-title hideOverflow" data-placement="top" data-toggle="tooltip">Skim the pool of leaves and empty the skimmers and clear vacuum.</label>
      <span class="input-group-addon" id="ci-complete-user">Erik</span>
      <span class="input-group-addon" id="ci-chore-undo">
    <i class="fa fa-reply"></i>
    </span>
      <span class="input-group-addon" id="ci-chore-undo">
    <i class="fa fa-pencil"></i>
    </span>
      <span class="input-group-addon" id="ci-chore-points">1</span>
    </li>
    <li class="input-group  input-group-lg">
      <span class="input-group-addon" id="ci-chore-complete">
      <i class="fa fa-check"></i>
    </span>
      <label class="ci-chore-title">Make your bed</label>
      <span class="input-group-addon" id="ci-complete-user">Erik</span>
      <span class="input-group-addon" id="ci-chore-undo">
    <i class="fa fa-reply"></i>
    </span>
      <span...

CSS

.container{
  border: solid 1px #ddd;
}
.ci-chore-list {
  font-size: 15px;
  line-height: 15px;
  min-width: calc(95%);
}

.ci-chore-list > li {
  color: #426148;
  background-color: #FFFFFF;
  margin-bottom: 2px;
}

.ci-chore-list #ci-chore-complete {
  color: #85d81a;
}

.ci-chore-list > .ci-chore-done #ci-chore-complete {
  color: #ddd;
}

.ci-chore-list .ci-chore-title {
  line-height: 3;
  padding-left: 15px;
  font-weight: 500;
  min-height: calc(100%);
  border: 1px solid #ccc;
  border-right: none;
  margin-bottom: 0px;
  min-width: calc(100%);
  max-width: calc(100%);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-chore-list [id^="ci-chore-point"] {
  font-size: 20px;
  font-weight: 700;
  min-width: 80px;
}

.ci-chore-list #ci-chore-point:after {
  content: 'pt';
}

.ci-chore-list #ci-chore-points:after {
  content: 'pts';
}

.ci-chore {
  border-radius: .3em;
  height: 3em;
  line-height: 3em;
  border: 1px solid;
  background-color: #CCCCCC;
  font-size: 1.2em;
  margin-bottom: 3px;
  cursor: pointer;
  padding-left: .5em;
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  -ms-flex: 1 0 auto;
  -ms-flex-wrap: nowrap;
  -webkit-flex: 1 0 auto;
  -webkit-flex-wrap: nowrap;
  -moz-flex: 1 0 auto;
  display: flex;
  display: -webkit-flex;
  flex: 1 0 auto;
  margin: 0px 0px 2px 0px;
  padding: 0;
  flex-wrap: nowrap;
}

.hideOverflow {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: block;
}

JavaScript

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});