patternfly
Version:
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.
598 lines (588 loc) • 22.8 kB
HTML
<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us">
<!--<![endif]-->
<head>
<title>List View Rows - PatternFly</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../../dist/img/favicon.ico">
<!-- iPad retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
<!-- iPad retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
<!-- iPad non-retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
<!-- iPad non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
<!-- iPhone 6 Plus icon -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
<!-- iPhone retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
<!-- iPhone non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
<link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
<link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
<link href="tests.css" rel="stylesheet" media="screen, print">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="./../../dist/js/patternfly.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>List View Rows</h1>
</div>
<div class="alert alert-warning">
<span class="pficon pficon-warning-triangle-o"></span>
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
</div>
<hr>
<div class="list-group list-view-pf">
<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>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</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>8</strong> Clusters
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-container-node"></span>
<strong>18</strong> Nodes
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-image"></span>
<strong>4</strong> Images
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Row Checkbox Selection
$(document).ready(function () {
$("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");
}
});
});
</script>
<h2>Row Variations</h2>
<div class="list-group list-view-pf">
<div class="list-group-item list-view-pf-stacked">
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight15" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight15">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-plane list-view-pf-icon-lg"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
This is EVENT One that is with very LONG and should not overflow and push other elements out of the bounding box.
<small>Feb 23, 2015 12:32 am</small>
</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 list-view-pf-additional-info-item-donut-chart">
<span id="donut-chart-1"></span>
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
<span id="donut-chart-2"></span>
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
<span id="donut-chart-3"></span>
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
<span id="donut-chart-4"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Donut Charts
var c3ChartDefaults = $().c3ChartDefaults();
var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('34%');
customDonutChartConfig.size.height = 71;
customDonutChartConfig.size.width = 60;
customDonutChartConfig.donut.width = 5;
customDonutChartConfig.bindto = '#donut-chart-1';
customDonutChartConfig.data = {
type: "donut",
columns: [
["Used", 34],
["Available", 86]
],
groups: [
["used", "available"]
],
order: null
};
c3.generate(customDonutChartConfig);
var donutChartTitle = d3.select("#donut-chart-1").select('text.c3-chart-arcs-title');
donutChartTitle.text("");
donutChartTitle.insert('tspan').text("34%").classed('list-view-donut-title', true);
customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('21%');
customDonutChartConfig.size.height = 71;
customDonutChartConfig.size.width = 60;
customDonutChartConfig.donut.width = 5;
customDonutChartConfig.bindto = '#donut-chart-2';
customDonutChartConfig.data = {
type: "donut",
columns: [
["Used", 21],
["Available", 79]
],
groups: [
["used", "available"]
],
order: null
};
c3.generate(customDonutChartConfig);
donutChartTitle = d3.select("#donut-chart-2").select('text.c3-chart-arcs-title');
donutChartTitle.text("");
donutChartTitle.insert('tspan').text("21%").classed('list-view-donut-title', true);
customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('14%');
customDonutChartConfig.size.height = 71;
customDonutChartConfig.size.width = 60;
customDonutChartConfig.donut.width = 5;
customDonutChartConfig.bindto = '#donut-chart-3';
customDonutChartConfig.data = {
type: "donut",
columns: [
["Used", 14],
["Available", 86]
],
groups: [
["used", "available"]
],
order: null
};
c3.generate(customDonutChartConfig);
donutChartTitle = d3.select("#donut-chart-3").select('text.c3-chart-arcs-title');
donutChartTitle.text("");
donutChartTitle.insert('tspan').text("14%").classed('list-view-donut-title', true);
customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('25%');
customDonutChartConfig.size.height = 71;
customDonutChartConfig.size.width = 60;
customDonutChartConfig.donut.width = 5;
customDonutChartConfig.bindto = '#donut-chart-4';
customDonutChartConfig.data = {
type: "donut",
columns: [
["Used", 25],
["Available", 75]
],
groups: [
["used", "available"]
],
order: null
};
c3.generate(customDonutChartConfig);
donutChartTitle = d3.select("#donut-chart-4").select('text.c3-chart-arcs-title');
donutChartTitle.text("");
donutChartTitle.insert('tspan').text("25%").classed('list-view-donut-title', true);
</script>
<div class="list-group list-view-pf">
<div class="list-group-item list-view-pf-stacked">
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<div class="list-view-pf-calendar">
March
<strong>29</strong>
</div>
</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> Clusters
</div>
<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-container-node"></span>
<strong>18</strong>
Nodes
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-image"></span>
<strong>4</strong> Images
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list-group list-view-pf">
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
<div class="list-view-pf-checkbox">
<input type="checkbox">
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
<button class="btn btn-default">Action</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Event Ones
</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 list-view-pf-additional-info-item-stacked">
<strong>113,735</strong> Service One
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
<strong>35%</strong> Service Two
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
<strong>22.0%</strong> Service Three
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Row Checkbox Selection
$(document).ready(function () {
$("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");
}
});
});
</script>
<div class="list-group list-view-pf">
<div class="list-group-item">
<div class="list-view-pf-checkbox">
<input type="checkbox">
</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>8</strong> Clusters
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Row Checkbox Selection
$(document).ready(function () {
$("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");
}
});
});
</script>
<div class="list-group list-view-pf list-view-pf-equalized-column">
<div class="list-group-item">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="pficon pficon-ok list-view-pf-icon-md list-view-pf-icon-success"></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>108</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>28</strong> Clusters
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="pficon pficon-info list-view-pf-icon-md list-view-pf-icon-info"></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>28</strong> Clusters
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="pficon pficon-warning-triangle-o list-view-pf-icon-md list-view-pf-icon-warning"></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>108</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>28</strong> Clusters
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="pficon pficon-error-circle-o list-view-pf-icon-md list-view-pf-icon-danger"></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>28</strong> Clusters
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Equalize column width
$(document).ready(function () {
var widest = 0;
$('.list-view-pf-equalized-column .list-view-pf-additional-info-item').each( function() {
widest = $(this).width() > widest ? $(this).width() : widest;
}).width(widest);
});
</script>
<div class="list-group list-view-pf">
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
<div class="list-view-pf-checkbox">
<input type="checkbox">
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
<button class="btn btn-default">Action</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight4">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</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>.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
</div>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<img src="http://placehold.it/60x60" alt="placeholder image">
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>8</strong> Clusters
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
<strong>35%</strong> Service Two
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Row Checkbox Selection
$(document).ready(function () {
$("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");
}
});
});
</script>
</div><!-- /container -->
</body>
</html>