manyi/static/angular-mod/tpl/ui_timeline.html

<div class="hbox hbox-auto-xs hbox-auto-sm">
  <!-- .col -->
  <div class="col w-lg bg-light dk b-r bg-auto" id="aside">
    <div class="wrapper bg b-b">
      <button class="btn btn-sm btn-success pull-right" ui-toggle-class="timeline-center" target=".timeline">Center</button>
      <h3 class="m-n font-thin">Timeline</h3>
    </div>
    <div class="wrapper">
      <form>
        <div class="form-group">
          <label>Name</label>
          <input type="text" placeholder="Event name" class="input-sm form-control">
        </div>
        <div class="form-group">
          <label>Date</label>
          <input type="text" placeholder="Event name" class="input-sm form-control">
        </div>
        <div class="form-group">
          <label>Time</label>
          <input type="text" placeholder="eg. 3:00 pm" class="input-sm form-control">
        </div>
        <div class="form-group">
          <label>Type</label>
          <div>
            <div class="btn-group dropdown" dropdown>
              <button class="btn btn-sm btn-default dropdown-toggle" dropdown-toggle>
                <span class="dropdown-label">Choose a type</span> 
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a href>Travel</a></li>
                <li><a href>Phone</a></li>
                <li><a href>Meeting</a></li>
                <li><a href>Appointment</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="m-t-md m-b-md"><button class="btn btn-sm btn-primary">Add an event</button></div>
      </form>
    </div>
  </div>
  <!-- /.col -->
  <!-- .col -->
  <div class="col">
    <div class="wrapper">
      <ul class="timeline">
        <li class="tl-header">
          <div class="btn btn-info">Now</div>
        </li>
        <li class="tl-item">
          <div class="tl-wrap b-info">
            <span class="tl-date">5s ago</span>
            <div class="tl-content">
              Just a title
            </div>
          </div>
        </li>
        <li class="tl-item">
          <div class="tl-wrap">
            <span class="tl-date">2h ago</span>
            <div class="tl-content panel padder b-a">
              <span class="arrow left pull-up"></span>
              <div>Content in a panel</div>
            </div>
          </div>
        </li>
        <li class="tl-item tl-left">
          <div class="tl-wrap b-success">
            <span class="tl-date">7:30 am</span>
            <div class="tl-content panel bg-success padder">
              <span class="arrow arrow-success left pull-up hidden-left"></span>
              <span class="arrow arrow-success right pull-up visible-left"></span>
              <div class="text-lt">Oh! Colorful</div>
            </div>
          </div>
        </li>
        <li class="tl-item">
          <div class="tl-wrap b-primary">
            <span class="tl-date">04.2014</span>
            <div class="tl-content panel padder b-a w-md w-auto-xs">
              <span class="arrow left pull-up"></span>
              <div class="text-lt m-b-sm">With Title</div>
              <div class="panel-body pull-in b-t b-light">
                <a href="" class="thumb pull-right m-l m-t-xs avatar">
                  <img src="img/a4.jpg" alt="...">
                  <i class="on md b-white bottom"></i>
                </a>
                <div class="clear">
                  <a href="" class="text-primary block m-b-xs">@Mike Mcalidek <i class="icon-twitter"></i></a>
                  <a href="" class="btn btn-addon btn-sm btn-primary m-t-xs"><i class="fa fa-eye"></i> Follow</a>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="tl-item tl-left">
          <div class="tl-wrap b-primary">
            <span class="tl-date">04.2014</span>
            <div class="tl-content panel padder b-a block">
              <span class="arrow left pull-up hidden-left"></span>
              <span class="arrow right pull-up visible-left"></span>
              <div class="text-lt m-b-sm">Block</div>
              <div class="panel-body pull-in b-t b-light">
                <p>I'm working on a realy amazing application, It will be available soon. here is a little tease. </p>
                <div class="m-b m-t">                  
                  <a href class="avatar thumb-xs m-r-xs">
                    <img src="img/a7.jpg" alt="...">
                    <i class="on b-white left"></i>
                  </a>
                  <a href class="avatar thumb-xs m-r-xs">
                    <img src="img/a8.jpg" alt="...">
                    <i class="busy b-white left"></i>
                  </a>
                  <a href class="avatar thumb-xs m-r-xs">
                    <img src="img/a9.jpg" alt="...">
                    <i class="away b-white left"></i>
                  </a>
                  <a href class="avatar thumb-xs m-r-xs">
                    <img src="img/a10.jpg" alt="...">
                    <i class="on b-white left"></i>
                  </a>
                  <a href class="btn btn-success btn-rounded font-bold"> +152 </a>
                  <span class="h5 m-l-sm">Liked</span>              
                </div>
                <div class="panel panel-default m-t-md m-b-n-sm pos-rlt">
                  <span class="arrow top pull-left"></span>
                  <form>
                    <textarea class="form-control no-border" rows="3" placeholder="Your comment..."></textarea>
                  </form>
                  <div class="panel-footer bg-light lter">
                    <button class="btn btn-info pull-right btn-sm">Comment</button>
                    <ul class="nav nav-pills nav-sm">
                      <li><a href><i class="fa fa-camera text-muted"></i></a></li>
                      <li><a href><i class="fa fa-video-camera text-muted"></i></a></li>
                    </ul>
                  </div>
                </div>
              </div>             
            </div>
          </div>
        </li>
        <li class="tl-header">
          <div class="btn btn-sm btn-default btn-rounded">2014</div>
        </li>
        <li class="tl-item">
          <div class="tl-wrap">
            <span class="tl-date">10.08.2013</span>
            <div class="tl-content panel padder b-a">
              <span class="arrow left pull-up hidden-left"></span>
              <span class="arrow right pull-up visible-left"></span>
              <div class="text-lt">A good story to hear.</div>
            </div>
          </div>
        </li>
        <li class="tl-header">
          <div class="btn btn-icon btn-rounded btn-default"><i class="fa fa-twitter"></i></div>
        </li>
        <li class="tl-item tl-left">
          <div class="tl-wrap b-white">
            <span class="tl-date">5.07.2013</span>
            <div class="tl-content panel padder b-a">
              <span class="arrow left pull-up hidden-left"></span>
              <span class="arrow right pull-up visible-left"></span>
              <div class="text-lt">Yesterday is History</div>
            </div>
          </div>
        </li>
        <li class="tl-header">
          <div class="btn btn-sm btn-default btn-rounded">more</div>
        </li>
      </ul>
    </div>
  </div>
  <!-- /.col -->            
</div>