patternfly/tests/pages/_includes/widgets/list-view/list-view-standard-rows.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

{% assign id = include.id | default: 'pf-list-standard' %}
<div id="{{id}}" class="list-group list-view-pf list-view-pf-view">
  <div class="list-group-item">
    <div class="list-view-pf-checkbox">
      <input type="checkbox">
    </div>
    <div class="list-view-pf-actions">
      <button class="btn btn-default">Action</button>
      {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight9" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-plane list-view-pf-icon-sm"></span>
      </div>
      <div class="list-view-pf-body">
        <div class="list-view-pf-description">
          <div class="list-group-item-heading">
            Event One
          </div>
          <div class="list-group-item-text">
            The following snippet of text is <a href="#">rendered as link text</a>.
          </div>
        </div>
        <div class="list-view-pf-additional-info">
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-screen"></span>
            <strong>8</strong> Hosts
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-cluster"></span>
            <strong>6</strong> Clusters
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-container-node"></span>
            <strong>10</strong> Nodes
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-image"></span>
            <strong>8</strong> Images
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-view-pf-checkbox">
      <input type="checkbox">
    </div>
    <div class="list-view-pf-actions">
      <button class="btn btn-default">Action</button>
      {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight10" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-magic list-view-pf-icon-sm"></span>
      </div>
      <div class="list-view-pf-body">
        <div class="list-view-pf-description">
          <div class="list-group-item-heading">
            Event Two
          </div>
          <div class="list-group-item-text">
            The following snippet of text is <a href="#">rendered as link text</a>.
          </div>
        </div>
        <div class="list-view-pf-additional-info">
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-screen"></span>
            <strong>4</strong> Hosts
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-cluster"></span>
            <strong>2</strong> Clusters
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-container-node"></span>
            <strong>11</strong> Nodes
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-image"></span>
            <strong>6</strong> Images
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-view-pf-checkbox">
      <input type="checkbox">
    </div>
    <div class="list-view-pf-actions">
      <button class="btn btn-default">Action</button>
      {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight11" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-gamepad list-view-pf-icon-sm"></span>
      </div>
      <div class="list-view-pf-body">
        <div class="list-view-pf-description">
          <div class="list-group-item-heading">
            Event Three
          </div>
          <div class="list-group-item-text">
            The following snippet of text is <a href="#">rendered as link text</a>.
          </div>
        </div>
        <div class="list-view-pf-additional-info">
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-screen"></span>
            <strong>4</strong> Hosts
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-cluster"></span>
            <strong>2</strong> Clusters
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-container-node"></span>
            <strong>10</strong> Nodes
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-image"></span>
            <strong>6</strong> Images
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-view-pf-checkbox">
      <input type="checkbox">
    </div>
    <div class="list-view-pf-actions">
      <button class="btn btn-default">Action</button>
      {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight12" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-linux list-view-pf-icon-sm"></span>
      </div>
      <div class="list-view-pf-body">
        <div class="list-view-pf-description">
          <div class="list-group-item-heading">
            Event Four
          </div>
          <div class="list-group-item-text">
            The following snippet of text is <a href="#">rendered as link text</a>.
          </div>
        </div>
        <div class="list-view-pf-additional-info">
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-screen"></span>
            <strong>4</strong> Hosts
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-cluster"></span>
            <strong>2</strong> Clusters
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-container-node"></span>
            <strong>10</strong> Nodes
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-image"></span>
            <strong>6</strong> Images
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-view-pf-checkbox">
      <input type="checkbox">
    </div>
    <div class="list-view-pf-actions">
      <button class="btn btn-default">Action</button>
      {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight13" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-briefcase list-view-pf-icon-sm"></span>
      </div>
      <div class="list-view-pf-body">
        <div class="list-view-pf-description">
          <div class="list-group-item-heading">
            Event Five
          </div>
          <div class="list-group-item-text">
            The following snippet of text is <a href="#">rendered as link text</a>.
          </div>
        </div>
        <div class="list-view-pf-additional-info">
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-screen"></span>
            <strong>4</strong> Hosts
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-cluster"></span>
            <strong>2</strong> Clusters
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-container-node"></span>
            <strong>10</strong> Nodes
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-image"></span>
            <strong>6</strong> Images
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-view-pf-checkbox">
      <input type="checkbox">
    </div>
    <div class="list-view-pf-actions">
      <button class="btn btn-default">Action</button>
      {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight14" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-coffee list-view-pf-icon-sm"></span>
      </div>
      <div class="list-view-pf-body">
        <div class="list-view-pf-description">
          <div class="list-group-item-heading">
            Event Six
          </div>
          <div class="list-group-item-text">
            The following snippet of text is <a href="#">rendered as link text</a>.
          </div>
        </div>
        <div class="list-view-pf-additional-info">
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-screen"></span>
            <strong>4</strong> Hosts
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-cluster"></span>
            <strong>2</strong> Clusters
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-container-node"></span>
            <strong>10</strong> Nodes
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-image"></span>
            <strong>6</strong> Images
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function () {
    // Row Checkbox Selection
    $("#{{id}} input[type='checkbox']").change(function (e) {
      if ($(this).is(":checked")) {
        $(this).closest('.list-group-item').addClass("active");
      } else {
        $(this).closest('.list-group-item').removeClass("active");
      }
    });
    // toggle dropdown menu
    $('#{{id}} .list-view-pf-actions').on('show.bs.dropdown', function () {
      var $this = $(this);
      var $dropdown = $this.find('.dropdown');
      var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find('.dropdown-menu').outerHeight(true);
      $dropdown.toggleClass('dropup', space < 10);
    });
    // allow users to select multiple list items with shift key
    $('#{{id}} .list-group').on('click', '.list-view-pf-checkbox>input', function(event) {
      var $list = $('.list-group');
      var prevIndex = $list.data('preIndex');
      var $listItems = $list.children('.list-group-item');
      var $currentItem = $(this).closest('.list-group-item');
      if(event.shiftKey && prevIndex > -1 && this.checked) {
        var currentIndex = $listItems.index($currentItem);
        var $selectScope = currentIndex - prevIndex > 0
          ? $currentItem.prevAll().not($listItems.eq(prevIndex).prevAll().addBack())
          : $listItems.eq(prevIndex).prevAll().not($currentItem.prevAll().addBack());
        $selectScope.addClass('active').find('.list-view-pf-checkbox').children('input').prop('checked', true);
      }
      $list.data('preIndex', this.checked ? $listItems.index($currentItem) : -1);
    });

  });
</script>