patternfly-sass 3.17.0 → 3.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. checksums.yaml +4 -4
  2. data/assets/fonts/patternfly/OpenSans-Bold-webfont.eot +0 -0
  3. data/assets/fonts/patternfly/OpenSans-Bold-webfont.svg +19025 -1827
  4. data/assets/fonts/patternfly/OpenSans-Bold-webfont.ttf +0 -0
  5. data/assets/fonts/patternfly/OpenSans-Bold-webfont.woff +0 -0
  6. data/assets/fonts/patternfly/OpenSans-Bold-webfont.woff2 +0 -0
  7. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.eot +0 -0
  8. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.svg +19033 -1827
  9. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.ttf +0 -0
  10. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.woff +0 -0
  11. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.woff2 +0 -0
  12. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.eot +0 -0
  13. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.svg +19027 -1827
  14. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.ttf +0 -0
  15. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.woff +0 -0
  16. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.woff2 +0 -0
  17. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.eot +0 -0
  18. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.svg +19033 -1827
  19. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.ttf +0 -0
  20. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.woff +0 -0
  21. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.woff2 +0 -0
  22. data/assets/fonts/patternfly/OpenSans-Italic-webfont.eot +0 -0
  23. data/assets/fonts/patternfly/OpenSans-Italic-webfont.svg +19040 -1827
  24. data/assets/fonts/patternfly/OpenSans-Italic-webfont.ttf +0 -0
  25. data/assets/fonts/patternfly/OpenSans-Italic-webfont.woff +0 -0
  26. data/assets/fonts/patternfly/OpenSans-Italic-webfont.woff2 +0 -0
  27. data/assets/fonts/patternfly/OpenSans-Light-webfont.eot +0 -0
  28. data/assets/fonts/patternfly/OpenSans-Light-webfont.svg +19023 -1828
  29. data/assets/fonts/patternfly/OpenSans-Light-webfont.ttf +0 -0
  30. data/assets/fonts/patternfly/OpenSans-Light-webfont.woff +0 -0
  31. data/assets/fonts/patternfly/OpenSans-Light-webfont.woff2 +0 -0
  32. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.eot +0 -0
  33. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.svg +19036 -1832
  34. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.ttf +0 -0
  35. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.woff +0 -0
  36. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.woff2 +0 -0
  37. data/assets/fonts/patternfly/OpenSans-Regular-webfont.eot +0 -0
  38. data/assets/fonts/patternfly/OpenSans-Regular-webfont.svg +19027 -1828
  39. data/assets/fonts/patternfly/OpenSans-Regular-webfont.ttf +0 -0
  40. data/assets/fonts/patternfly/OpenSans-Regular-webfont.woff +0 -0
  41. data/assets/fonts/patternfly/OpenSans-Regular-webfont.woff2 +0 -0
  42. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.eot +0 -0
  43. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.svg +19027 -1827
  44. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.ttf +0 -0
  45. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.woff +0 -0
  46. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.woff2 +0 -0
  47. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.eot +0 -0
  48. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.svg +19040 -1827
  49. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.ttf +0 -0
  50. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.woff +0 -0
  51. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.woff2 +0 -0
  52. data/assets/fonts/patternfly/PatternFlyIcons-webfont.eot +0 -0
  53. data/assets/fonts/patternfly/PatternFlyIcons-webfont.svg +2 -0
  54. data/assets/fonts/patternfly/PatternFlyIcons-webfont.ttf +0 -0
  55. data/assets/fonts/patternfly/PatternFlyIcons-webfont.woff +0 -0
  56. data/assets/javascripts/patternfly-functions.js +118 -105
  57. data/assets/javascripts/patternfly-functions.min.js +1 -1
  58. data/assets/javascripts/patternfly-settings.js +24 -1
  59. data/assets/javascripts/patternfly-settings.min.js +1 -1
  60. data/assets/javascripts/patternfly.dataTables.pfEmpty.js +11 -2
  61. data/assets/javascripts/patternfly.dataTables.pfEmpty.min.js +1 -1
  62. data/assets/javascripts/patternfly.dataTables.pfFilter.js +13 -5
  63. data/assets/javascripts/patternfly.dataTables.pfFilter.min.js +1 -1
  64. data/assets/javascripts/patternfly.dataTables.pfPagination.js +401 -0
  65. data/assets/javascripts/patternfly.dataTables.pfPagination.min.js +1 -0
  66. data/assets/javascripts/patternfly.dataTables.pfSelect.js +2 -2
  67. data/assets/javascripts/patternfly.dataTables.pfSelect.min.js +1 -1
  68. data/assets/javascripts/patternfly.js +142 -106
  69. data/assets/javascripts/patternfly.min.js +2 -2
  70. data/assets/stylesheets/_patternfly.scss +1 -0
  71. data/assets/stylesheets/patternfly/_close.scss +2 -0
  72. data/assets/stylesheets/patternfly/_fonts.scss +95 -25
  73. data/assets/stylesheets/patternfly/_icons.scss +6 -0
  74. data/assets/stylesheets/patternfly/_list-view-dnd.scss +53 -0
  75. data/assets/stylesheets/patternfly/_list-view.scss +1 -0
  76. data/assets/stylesheets/patternfly/_pagination.scss +50 -0
  77. data/assets/stylesheets/patternfly/_variables.scss +2 -0
  78. data/assets/stylesheets/patternfly/lib/bootstrap-switch.scss +2 -5
  79. data/bower.json +1 -1
  80. data/lib/patternfly-sass/version.rb +2 -2
  81. data/package.json +1 -1
  82. data/spec/html/bar-charts.html +109 -0
  83. data/spec/html/basic.html +267 -0
  84. data/spec/html/bootstrap-treeview-2.html +3 -0
  85. data/spec/html/card-view-multi-select.html +20 -1
  86. data/spec/html/card-view-single-select.html +3 -0
  87. data/spec/html/cards.html +3 -0
  88. data/spec/html/dashboard.html +3 -0
  89. data/spec/html/dist/css/patternfly-additions.css +46 -0
  90. data/spec/html/dist/css/patternfly-additions.css.map +1 -1
  91. data/spec/html/dist/css/patternfly-additions.min.css +1 -1
  92. data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
  93. data/spec/html/dist/css/patternfly.css +124 -5
  94. data/spec/html/dist/css/patternfly.css.map +1 -1
  95. data/spec/html/dist/css/patternfly.min.css +3 -3
  96. data/spec/html/dist/css/patternfly.min.css.map +1 -1
  97. data/spec/html/form.html +3 -0
  98. data/spec/html/icons.html +10 -0
  99. data/spec/html/index.html +9 -0
  100. data/spec/html/list-view-compound-expansion.html +3 -0
  101. data/spec/html/list-view-rows.html +1 -1
  102. data/spec/html/list-view-simple-expansion.html +3 -0
  103. data/spec/html/list-view.html +19 -0
  104. data/spec/html/pagination-card-view.html +560 -0
  105. data/spec/html/pagination-list-view.html +1204 -0
  106. data/spec/html/pagination-table-view.html +800 -0
  107. data/spec/html/pagination.html +37 -0
  108. data/spec/html/tab.html +267 -0
  109. data/spec/html/table-view-navbar.html +268 -0
  110. data/spec/html/table-view.html +265 -0
  111. data/spec/html/toolbar.html +3 -0
  112. data/spec/html/typography-2.html +3 -0
  113. data/spec/html/typography.html +17 -0
  114. metadata +21 -2
@@ -0,0 +1,1204 @@
1
+ <!DOCTYPE html>
2
+ <!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
3
+ <!--[if gt IE 9]><!-->
4
+ <html lang="en-us">
5
+ <!--<![endif]-->
6
+ <head>
7
+ <title>Pagination - List View - PatternFly</title>
8
+ <meta charset="UTF-8">
9
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge">
10
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
+ <link rel="shortcut icon" href="../../dist/img/favicon.ico">
12
+ <!-- iPad retina icon -->
13
+ <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
14
+ <!-- iPad retina icon (iOS < 7) -->
15
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
16
+ <!-- iPad non-retina icon -->
17
+ <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
18
+ <!-- iPad non-retina icon (iOS < 7) -->
19
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
20
+ <!-- iPhone 6 Plus icon -->
21
+ <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
22
+ <!-- iPhone retina icon (iOS < 7) -->
23
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
24
+ <!-- iPhone non-retina icon (iOS < 7) -->
25
+ <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
26
+ <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
27
+ <link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
28
+ <link href="tests.css" rel="stylesheet" media="screen, print">
29
+ <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
30
+ <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
31
+ <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
32
+ <script src="../../dist/js/patternfly.min.js"></script>
33
+ </head>
34
+ <div class="toast-notifications-list-pf">
35
+ <div class="toast-pf alert alert-warning alert-dismissable">
36
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
37
+ <span class="pficon pficon-close"></span>
38
+ </button>
39
+ <span class="pficon pficon-warning-triangle-o"></span>
40
+ 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>.
41
+ </div>
42
+ </div>
43
+
44
+ <body>
45
+ <nav class="navbar navbar-default navbar-pf" role="navigation">
46
+ <div class="navbar-header">
47
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
48
+ <span class="sr-only">Toggle navigation</span>
49
+ <span class="icon-bar"></span>
50
+ <span class="icon-bar"></span>
51
+ <span class="icon-bar"></span>
52
+ </button>
53
+ <a class="navbar-brand" href="/">
54
+ <img src="../../dist/img/brand.svg" alt="PatternFly Enterprise Application" />
55
+ </a>
56
+ </div>
57
+ <div class="collapse navbar-collapse navbar-collapse-1">
58
+ <ul class="nav navbar-nav navbar-utility">
59
+ <li>
60
+ <a href="#">Status</a>
61
+ </li>
62
+ <li class="dropdown">
63
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
64
+ <span class="pficon pficon-user"></span>
65
+ Brian Johnson <b class="caret"></b>
66
+ </a>
67
+ <ul class="dropdown-menu">
68
+ <li>
69
+ <a href="#">Link</a>
70
+ </li>
71
+ <li>
72
+ <a href="#">Another link</a>
73
+ </li>
74
+ <li>
75
+ <a href="#">Something else here</a>
76
+ </li>
77
+ <li class="divider"></li>
78
+ <li class="dropdown-submenu">
79
+ <a tabindex="-1" href="#">More options</a>
80
+ <ul class="dropdown-menu">
81
+ <li>
82
+ <a href="#">Link</a>
83
+ </li>
84
+ <li>
85
+ <a href="#">Another link</a>
86
+ </li>
87
+ <li>
88
+ <a href="#">Something else here</a>
89
+ </li>
90
+ <li class="divider"></li>
91
+ <li class="dropdown-header">Nav header</li>
92
+ <li>
93
+ <a href="#">Separated link</a>
94
+ </li>
95
+ <li class="divider"></li>
96
+ <li>
97
+ <a href="#">One more separated link</a>
98
+ </li>
99
+ </ul>
100
+ </li>
101
+ <li class="divider"></li>
102
+ <li>
103
+ <a href="#">One more separated link</a>
104
+ </li>
105
+ </ul>
106
+ </li>
107
+ </ul>
108
+ <ul class="nav navbar-nav navbar-primary">
109
+ <li>
110
+ <a href="basic.html">Basic</a>
111
+ </li>
112
+ <li>
113
+ <a href="bootstrap-treeview-2.html">Tree View</a>
114
+ </li>
115
+ <li>
116
+ <a href="dashboard.html">Dashboard</a>
117
+ </li>
118
+ <li>
119
+ <a href="form.html">Form</a>
120
+ </li>
121
+ <li>
122
+ <a href="tab.html">Tab</a>
123
+ </li>
124
+ <li>
125
+ <a href="typography-2.html">Typography</a>
126
+ </li>
127
+ <li>
128
+ <a href="card-view-multi-select.html">Card View - Multi Select</a>
129
+ </li>
130
+ <li>
131
+ <a href="card-view-single-select.html">Card View - Single Select</a>
132
+ </li>
133
+ <li>
134
+ <a href="cards.html">Cards</a>
135
+ </li>
136
+ <li>
137
+ <a href="pagination-card-view.html">Pagination - Card View</a>
138
+ </li>
139
+ </ul>
140
+ </div>
141
+ </nav>
142
+
143
+ <div class="container-fluid">
144
+ <div class="row toolbar-pf">
145
+ <div class="col-sm-12">
146
+ <form class="toolbar-pf-actions">
147
+ <div class="form-group toolbar-pf-filter">
148
+ <label class="sr-only" for="filter">Name</label>
149
+ <div class="input-group">
150
+ <div class="input-group-btn">
151
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
152
+ <ul class="dropdown-menu">
153
+ <li class="selected"><a href="#">Name</a></li>
154
+ <li><a href="#">Type</a></li>
155
+ <li><a href="#">Color</a></li>
156
+ </ul>
157
+ </div><!-- /btn-group -->
158
+ <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
159
+ </div><!-- /input-group -->
160
+ </div>
161
+ <div class="form-group">
162
+ <div class="dropdown btn-group">
163
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
164
+ <ul class="dropdown-menu">
165
+ <li class="selected"><a href="#">Name</a></li>
166
+ <li><a href="#">Type</a></li>
167
+ <li><a href="#">Last Modified</a></li>
168
+ </ul>
169
+ </div>
170
+ <button class="btn btn-link" type="button">
171
+ <span class="fa fa-sort-alpha-asc"></span>
172
+ </button>
173
+ </div>
174
+ <div class="form-group">
175
+ <button class="btn btn-default" type="button">Action</button>
176
+ <button class="btn btn-default" type="button">Action</button>
177
+ <div class="dropdown btn-group dropdown-kebab-pf">
178
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
179
+ <span class="fa fa-ellipsis-v"></span>
180
+ </button>
181
+ <ul class="dropdown-menu " aria-labelledby="dropdownKebab">
182
+ <li><a href="#">Action</a></li>
183
+ <li><a href="#">Another action</a></li>
184
+ <li><a href="#">Something else here</a></li>
185
+ <li role="separator" class="divider"></li>
186
+ <li><a href="#">Separated link</a></li>
187
+ </ul>
188
+ </div>
189
+
190
+ </div>
191
+ <div class="toolbar-pf-action-right">
192
+ <div class="form-group toolbar-pf-find">
193
+ <button class="btn btn-link btn-find" type="button">
194
+ <span class="fa fa-search"></span>
195
+ </button>
196
+ <div class="find-pf-dropdown-container">
197
+ <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
198
+ <div class="find-pf-buttons">
199
+ <span class="find-pf-nums">1 of 3</span>
200
+ <button class="btn btn-link" type="button">
201
+ <span class="fa fa-angle-up"></span>
202
+ </button>
203
+ <button class="btn btn-link" type="button">
204
+ <span class="fa fa-angle-down"></span>
205
+ </button>
206
+ <button class="btn btn-link btn-find-close" type="button">
207
+ <span class="pficon pficon-close"></span>
208
+ </button>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ <div class="form-group toolbar-pf-view-selector">
213
+ <button class="btn btn-link "><i class="fa fa-th"></i></button>
214
+ <button class="btn btn-link "><i class="fa fa-th-large"></i></button>
215
+ <button class="btn btn-link active"><i class="fa fa-th-list"></i></button>
216
+ </div>
217
+ </div>
218
+ </form>
219
+ <div class="row toolbar-pf-results">
220
+ <div class="col-sm-12">
221
+ <h5>40 Results</h5>
222
+ <p>Active filters:</p>
223
+ <ul class="list-inline">
224
+ <li>
225
+ <span class="label label-info">
226
+ Name: nameofthething
227
+ <a href="#"><span class="pficon pficon-close"></span></a>
228
+ </span>
229
+ </li>
230
+ <li>
231
+ <span class="label label-info">
232
+ Name: nameofthething
233
+ <a href="#"><span class="pficon pficon-close"></span></a>
234
+ </span>
235
+ </li>
236
+ <li>
237
+ <span class="label label-info">
238
+ Name: nameofthething
239
+ <a href="#"><span class="pficon pficon-close"></span></a>
240
+ </span>
241
+ </li>
242
+ </ul>
243
+ <p><a href="#">Clear All Filters</a></p>
244
+ </div><!-- /col -->
245
+ </div><!-- /row -->
246
+ </div><!-- /col -->
247
+ </div><!-- /row -->
248
+ </div><!-- /container -->
249
+
250
+ <div class="container-fluid">
251
+ <!-- <div class="list-group list-view-pf list-view-pf-view">
252
+ <div class="list-group-item">
253
+ <div class="list-view-pf-checkbox">
254
+ <input type="checkbox">
255
+ </div>
256
+ <div class="list-view-pf-actions">
257
+ <button class="btn btn-default">Action</button>
258
+ <div class="dropdown pull-right dropdown-kebab-pf">
259
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight9" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
260
+ <span class="fa fa-ellipsis-v"></span>
261
+ </button>
262
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
263
+ <li><a href="#">Action</a></li>
264
+ <li><a href="#">Another action</a></li>
265
+ <li><a href="#">Something else here</a></li>
266
+ <li role="separator" class="divider"></li>
267
+ <li><a href="#">Separated link</a></li>
268
+ </ul>
269
+ </div>
270
+
271
+ </div>
272
+ <div class="list-view-pf-main-info">
273
+ <div class="list-view-pf-left">
274
+ <span class="fa fa-plane list-view-pf-icon-sm"></span>
275
+ </div>
276
+ <div class="list-view-pf-body">
277
+ <div class="list-view-pf-description">
278
+ <div class="list-group-item-heading">
279
+ Event One
280
+ </div>
281
+ <div class="list-group-item-text">
282
+ The following snippet of text is <a href="#">rendered as link text</a>.
283
+ </div>
284
+ </div>
285
+ <div class="list-view-pf-additional-info">
286
+ <div class="list-view-pf-additional-info-item">
287
+ <span class="pficon pficon-screen"></span>
288
+ <strong>8</strong> Hosts
289
+ </div>
290
+ <div class="list-view-pf-additional-info-item">
291
+ <span class="pficon pficon-cluster"></span>
292
+ <strong>6</strong> Clusters
293
+ </div>
294
+ <div class="list-view-pf-additional-info-item">
295
+ <span class="pficon pficon-container-node"></span>
296
+ <strong>10</strong> Nodes
297
+ </div>
298
+ <div class="list-view-pf-additional-info-item">
299
+ <span class="pficon pficon-image"></span>
300
+ <strong>8</strong> Images
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ <div class="list-group-item">
307
+ <div class="list-view-pf-checkbox">
308
+ <input type="checkbox">
309
+ </div>
310
+ <div class="list-view-pf-actions">
311
+ <button class="btn btn-default">Action</button>
312
+ <div class="dropdown pull-right dropdown-kebab-pf">
313
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
314
+ <span class="fa fa-ellipsis-v"></span>
315
+ </button>
316
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight10">
317
+ <li><a href="#">Action</a></li>
318
+ <li><a href="#">Another action</a></li>
319
+ <li><a href="#">Something else here</a></li>
320
+ <li role="separator" class="divider"></li>
321
+ <li><a href="#">Separated link</a></li>
322
+ </ul>
323
+ </div>
324
+
325
+ </div>
326
+ <div class="list-view-pf-main-info">
327
+ <div class="list-view-pf-left">
328
+ <span class="fa fa-magic list-view-pf-icon-sm"></span>
329
+ </div>
330
+ <div class="list-view-pf-body">
331
+ <div class="list-view-pf-description">
332
+ <div class="list-group-item-heading">
333
+ Event Two
334
+ </div>
335
+ <div class="list-group-item-text">
336
+ The following snippet of text is <a href="#">rendered as link text</a>.
337
+ </div>
338
+ </div>
339
+ <div class="list-view-pf-additional-info">
340
+ <div class="list-view-pf-additional-info-item">
341
+ <span class="pficon pficon-screen"></span>
342
+ <strong>4</strong> Hosts
343
+ </div>
344
+ <div class="list-view-pf-additional-info-item">
345
+ <span class="pficon pficon-cluster"></span>
346
+ <strong>2</strong> Clusters
347
+ </div>
348
+ <div class="list-view-pf-additional-info-item">
349
+ <span class="pficon pficon-container-node"></span>
350
+ <strong>11</strong> Nodes
351
+ </div>
352
+ <div class="list-view-pf-additional-info-item">
353
+ <span class="pficon pficon-image"></span>
354
+ <strong>6</strong> Images
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ <div class="list-group-item">
361
+ <div class="list-view-pf-checkbox">
362
+ <input type="checkbox">
363
+ </div>
364
+ <div class="list-view-pf-actions">
365
+ <button class="btn btn-default">Action</button>
366
+ <div class="dropdown pull-right dropdown-kebab-pf">
367
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
368
+ <span class="fa fa-ellipsis-v"></span>
369
+ </button>
370
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight11">
371
+ <li><a href="#">Action</a></li>
372
+ <li><a href="#">Another action</a></li>
373
+ <li><a href="#">Something else here</a></li>
374
+ <li role="separator" class="divider"></li>
375
+ <li><a href="#">Separated link</a></li>
376
+ </ul>
377
+ </div>
378
+
379
+ </div>
380
+ <div class="list-view-pf-main-info">
381
+ <div class="list-view-pf-left">
382
+ <span class="fa fa-gamepad list-view-pf-icon-sm"></span>
383
+ </div>
384
+ <div class="list-view-pf-body">
385
+ <div class="list-view-pf-description">
386
+ <div class="list-group-item-heading">
387
+ Event Three
388
+ </div>
389
+ <div class="list-group-item-text">
390
+ The following snippet of text is <a href="#">rendered as link text</a>.
391
+ </div>
392
+ </div>
393
+ <div class="list-view-pf-additional-info">
394
+ <div class="list-view-pf-additional-info-item">
395
+ <span class="pficon pficon-screen"></span>
396
+ <strong>4</strong> Hosts
397
+ </div>
398
+ <div class="list-view-pf-additional-info-item">
399
+ <span class="pficon pficon-cluster"></span>
400
+ <strong>2</strong> Clusters
401
+ </div>
402
+ <div class="list-view-pf-additional-info-item">
403
+ <span class="pficon pficon-container-node"></span>
404
+ <strong>10</strong> Nodes
405
+ </div>
406
+ <div class="list-view-pf-additional-info-item">
407
+ <span class="pficon pficon-image"></span>
408
+ <strong>6</strong> Images
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ <div class="list-group-item">
415
+ <div class="list-view-pf-checkbox">
416
+ <input type="checkbox">
417
+ </div>
418
+ <div class="list-view-pf-actions">
419
+ <button class="btn btn-default">Action</button>
420
+ <div class="dropdown pull-right dropdown-kebab-pf">
421
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
422
+ <span class="fa fa-ellipsis-v"></span>
423
+ </button>
424
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight12">
425
+ <li><a href="#">Action</a></li>
426
+ <li><a href="#">Another action</a></li>
427
+ <li><a href="#">Something else here</a></li>
428
+ <li role="separator" class="divider"></li>
429
+ <li><a href="#">Separated link</a></li>
430
+ </ul>
431
+ </div>
432
+
433
+ </div>
434
+ <div class="list-view-pf-main-info">
435
+ <div class="list-view-pf-left">
436
+ <span class="fa fa-linux list-view-pf-icon-sm"></span>
437
+ </div>
438
+ <div class="list-view-pf-body">
439
+ <div class="list-view-pf-description">
440
+ <div class="list-group-item-heading">
441
+ Event Four
442
+ </div>
443
+ <div class="list-group-item-text">
444
+ The following snippet of text is <a href="#">rendered as link text</a>.
445
+ </div>
446
+ </div>
447
+ <div class="list-view-pf-additional-info">
448
+ <div class="list-view-pf-additional-info-item">
449
+ <span class="pficon pficon-screen"></span>
450
+ <strong>4</strong> Hosts
451
+ </div>
452
+ <div class="list-view-pf-additional-info-item">
453
+ <span class="pficon pficon-cluster"></span>
454
+ <strong>2</strong> Clusters
455
+ </div>
456
+ <div class="list-view-pf-additional-info-item">
457
+ <span class="pficon pficon-container-node"></span>
458
+ <strong>10</strong> Nodes
459
+ </div>
460
+ <div class="list-view-pf-additional-info-item">
461
+ <span class="pficon pficon-image"></span>
462
+ <strong>6</strong> Images
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ <div class="list-group-item">
469
+ <div class="list-view-pf-checkbox">
470
+ <input type="checkbox">
471
+ </div>
472
+ <div class="list-view-pf-actions">
473
+ <button class="btn btn-default">Action</button>
474
+ <div class="dropdown pull-right dropdown-kebab-pf">
475
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
476
+ <span class="fa fa-ellipsis-v"></span>
477
+ </button>
478
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight13">
479
+ <li><a href="#">Action</a></li>
480
+ <li><a href="#">Another action</a></li>
481
+ <li><a href="#">Something else here</a></li>
482
+ <li role="separator" class="divider"></li>
483
+ <li><a href="#">Separated link</a></li>
484
+ </ul>
485
+ </div>
486
+
487
+ </div>
488
+ <div class="list-view-pf-main-info">
489
+ <div class="list-view-pf-left">
490
+ <span class="fa fa-briefcase list-view-pf-icon-sm"></span>
491
+ </div>
492
+ <div class="list-view-pf-body">
493
+ <div class="list-view-pf-description">
494
+ <div class="list-group-item-heading">
495
+ Event Five
496
+ </div>
497
+ <div class="list-group-item-text">
498
+ The following snippet of text is <a href="#">rendered as link text</a>.
499
+ </div>
500
+ </div>
501
+ <div class="list-view-pf-additional-info">
502
+ <div class="list-view-pf-additional-info-item">
503
+ <span class="pficon pficon-screen"></span>
504
+ <strong>4</strong> Hosts
505
+ </div>
506
+ <div class="list-view-pf-additional-info-item">
507
+ <span class="pficon pficon-cluster"></span>
508
+ <strong>2</strong> Clusters
509
+ </div>
510
+ <div class="list-view-pf-additional-info-item">
511
+ <span class="pficon pficon-container-node"></span>
512
+ <strong>10</strong> Nodes
513
+ </div>
514
+ <div class="list-view-pf-additional-info-item">
515
+ <span class="pficon pficon-image"></span>
516
+ <strong>6</strong> Images
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ <div class="list-group-item">
523
+ <div class="list-view-pf-checkbox">
524
+ <input type="checkbox">
525
+ </div>
526
+ <div class="list-view-pf-actions">
527
+ <button class="btn btn-default">Action</button>
528
+ <div class="dropdown pull-right dropdown-kebab-pf">
529
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
530
+ <span class="fa fa-ellipsis-v"></span>
531
+ </button>
532
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight14">
533
+ <li><a href="#">Action</a></li>
534
+ <li><a href="#">Another action</a></li>
535
+ <li><a href="#">Something else here</a></li>
536
+ <li role="separator" class="divider"></li>
537
+ <li><a href="#">Separated link</a></li>
538
+ </ul>
539
+ </div>
540
+
541
+ </div>
542
+ <div class="list-view-pf-main-info">
543
+ <div class="list-view-pf-left">
544
+ <span class="fa fa-coffee list-view-pf-icon-sm"></span>
545
+ </div>
546
+ <div class="list-view-pf-body">
547
+ <div class="list-view-pf-description">
548
+ <div class="list-group-item-heading">
549
+ Event Six
550
+ </div>
551
+ <div class="list-group-item-text">
552
+ The following snippet of text is <a href="#">rendered as link text</a>.
553
+ </div>
554
+ </div>
555
+ <div class="list-view-pf-additional-info">
556
+ <div class="list-view-pf-additional-info-item">
557
+ <span class="pficon pficon-screen"></span>
558
+ <strong>4</strong> Hosts
559
+ </div>
560
+ <div class="list-view-pf-additional-info-item">
561
+ <span class="pficon pficon-cluster"></span>
562
+ <strong>2</strong> Clusters
563
+ </div>
564
+ <div class="list-view-pf-additional-info-item">
565
+ <span class="pficon pficon-container-node"></span>
566
+ <strong>10</strong> Nodes
567
+ </div>
568
+ <div class="list-view-pf-additional-info-item">
569
+ <span class="pficon pficon-image"></span>
570
+ <strong>6</strong> Images
571
+ </div>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ <script>
578
+ $(document).ready(function () {
579
+ // Row Checkbox Selection
580
+ $("input[type='checkbox']").change(function (e) {
581
+ if ($(this).is(":checked")) {
582
+ $(this).closest('.list-group-item').addClass("active");
583
+ } else {
584
+ $(this).closest('.list-group-item').removeClass("active");
585
+ }
586
+ });
587
+ // toggle dropdown menu
588
+ $('.list-view-pf-actions').on('show.bs.dropdown', function () {
589
+ var $this = $(this);
590
+ var $dropdown = $this.find('.dropdown');
591
+ var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find('.dropdown-menu').outerHeight(true);
592
+ $dropdown.toggleClass('dropup', space < 10);
593
+ });
594
+ // allow users to select multiple list items with shift key
595
+ $('.list-group').on('click', '.list-view-pf-checkbox>input', function(event) {
596
+ var $list = $('.list-group');
597
+ var prevIndex = $list.data('preIndex');
598
+ var $listItems = $list.children('.list-group-item');
599
+ var $currentItem = $(this).closest('.list-group-item');
600
+ if(event.shiftKey && prevIndex > -1 && this.checked) {
601
+ var currentIndex = $listItems.index($currentItem);
602
+ var $selectScope = currentIndex - prevIndex > 0
603
+ ? $currentItem.prevAll().not($listItems.eq(prevIndex).prevAll().addBack())
604
+ : $listItems.eq(prevIndex).prevAll().not($currentItem.prevAll().addBack());
605
+ $selectScope.addClass('active').find('.list-view-pf-checkbox').children('input').prop('checked', true);
606
+ }
607
+ $list.data('preIndex', this.checked ? $listItems.index($currentItem) : -1);
608
+ });
609
+
610
+ });
611
+ </script> -->
612
+ <div class="list-group list-view-pf list-view-pf-view">
613
+ <div class="list-group-item">
614
+ <div class="list-view-pf-checkbox">
615
+ <input type="checkbox">
616
+ </div>
617
+ <div class="list-view-pf-actions">
618
+ <button class="btn btn-default">Action</button>
619
+ <div class="dropdown pull-right dropdown-kebab-pf">
620
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
621
+ <span class="fa fa-ellipsis-v"></span>
622
+ </button>
623
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight11">
624
+ <li><a href="#">Action</a></li>
625
+ <li><a href="#">Another action</a></li>
626
+ <li><a href="#">Something else here</a></li>
627
+ <li role="separator" class="divider"></li>
628
+ <li><a href="#">Separated link</a></li>
629
+ </ul>
630
+ </div>
631
+
632
+ </div>
633
+ <div class="list-view-pf-main-info">
634
+ <div class="list-view-pf-left">
635
+ <span class="fa fa-plane list-view-pf-icon-sm"></span>
636
+ </div>
637
+ <div class="list-view-pf-body">
638
+ <div class="list-view-pf-description">
639
+ <div class="list-group-item-heading">
640
+ Event One
641
+ </div>
642
+ <div class="list-group-item-text">
643
+ The following snippet of text is <a href="#">rendered as link text</a>.
644
+ </div>
645
+ </div>
646
+ <div class="list-view-pf-additional-info">
647
+ <div class="list-view-pf-additional-info-item">
648
+ <span class="pficon pficon-screen"></span>
649
+ <strong>8</strong> Hosts
650
+ </div>
651
+ <div class="list-view-pf-additional-info-item">
652
+ <span class="pficon pficon-cluster"></span>
653
+ <strong>6</strong> Clusters
654
+ </div>
655
+ <div class="list-view-pf-additional-info-item">
656
+ <span class="pficon pficon-container-node"></span>
657
+ <strong>10</strong> Nodes
658
+ </div>
659
+ <div class="list-view-pf-additional-info-item">
660
+ <span class="pficon pficon-image"></span>
661
+ <strong>8</strong> Images
662
+ </div>
663
+ </div>
664
+ </div>
665
+ </div>
666
+ </div>
667
+ <div class="list-group-item">
668
+ <div class="list-view-pf-checkbox">
669
+ <input type="checkbox">
670
+ </div>
671
+ <div class="list-view-pf-actions">
672
+ <button class="btn btn-default">Action</button>
673
+ <div class="dropdown pull-right dropdown-kebab-pf">
674
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
675
+ <span class="fa fa-ellipsis-v"></span>
676
+ </button>
677
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight12">
678
+ <li><a href="#">Action</a></li>
679
+ <li><a href="#">Another action</a></li>
680
+ <li><a href="#">Something else here</a></li>
681
+ <li role="separator" class="divider"></li>
682
+ <li><a href="#">Separated link</a></li>
683
+ </ul>
684
+ </div>
685
+
686
+ </div>
687
+ <div class="list-view-pf-main-info">
688
+ <div class="list-view-pf-left">
689
+ <span class="fa fa-magic list-view-pf-icon-sm"></span>
690
+ </div>
691
+ <div class="list-view-pf-body">
692
+ <div class="list-view-pf-description">
693
+ <div class="list-group-item-heading">
694
+ Event Two
695
+ </div>
696
+ <div class="list-group-item-text">
697
+ The following snippet of text is <a href="#">rendered as link text</a>.
698
+ </div>
699
+ </div>
700
+ <div class="list-view-pf-additional-info">
701
+ <div class="list-view-pf-additional-info-item">
702
+ <span class="pficon pficon-screen"></span>
703
+ <strong>4</strong> Hosts
704
+ </div>
705
+ <div class="list-view-pf-additional-info-item">
706
+ <span class="pficon pficon-cluster"></span>
707
+ <strong>2</strong> Clusters
708
+ </div>
709
+ <div class="list-view-pf-additional-info-item">
710
+ <span class="pficon pficon-container-node"></span>
711
+ <strong>11</strong> Nodes
712
+ </div>
713
+ <div class="list-view-pf-additional-info-item">
714
+ <span class="pficon pficon-image"></span>
715
+ <strong>6</strong> Images
716
+ </div>
717
+ </div>
718
+ </div>
719
+ </div>
720
+ </div>
721
+ <div class="list-group-item">
722
+ <div class="list-view-pf-checkbox">
723
+ <input type="checkbox">
724
+ </div>
725
+ <div class="list-view-pf-actions">
726
+ <button class="btn btn-default">Action</button>
727
+ <div class="dropdown pull-right dropdown-kebab-pf">
728
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
729
+ <span class="fa fa-ellipsis-v"></span>
730
+ </button>
731
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight13">
732
+ <li><a href="#">Action</a></li>
733
+ <li><a href="#">Another action</a></li>
734
+ <li><a href="#">Something else here</a></li>
735
+ <li role="separator" class="divider"></li>
736
+ <li><a href="#">Separated link</a></li>
737
+ </ul>
738
+ </div>
739
+
740
+ </div>
741
+ <div class="list-view-pf-main-info">
742
+ <div class="list-view-pf-left">
743
+ <span class="fa fa-gamepad list-view-pf-icon-sm"></span>
744
+ </div>
745
+ <div class="list-view-pf-body">
746
+ <div class="list-view-pf-description">
747
+ <div class="list-group-item-heading">
748
+ Event Three
749
+ </div>
750
+ <div class="list-group-item-text">
751
+ The following snippet of text is <a href="#">rendered as link text</a>.
752
+ </div>
753
+ </div>
754
+ <div class="list-view-pf-additional-info">
755
+ <div class="list-view-pf-additional-info-item">
756
+ <span class="pficon pficon-screen"></span>
757
+ <strong>4</strong> Hosts
758
+ </div>
759
+ <div class="list-view-pf-additional-info-item">
760
+ <span class="pficon pficon-cluster"></span>
761
+ <strong>2</strong> Clusters
762
+ </div>
763
+ <div class="list-view-pf-additional-info-item">
764
+ <span class="pficon pficon-container-node"></span>
765
+ <strong>10</strong> Nodes
766
+ </div>
767
+ <div class="list-view-pf-additional-info-item">
768
+ <span class="pficon pficon-image"></span>
769
+ <strong>6</strong> Images
770
+ </div>
771
+ </div>
772
+ </div>
773
+ </div>
774
+ </div>
775
+ <div class="list-group-item">
776
+ <div class="list-view-pf-checkbox">
777
+ <input type="checkbox">
778
+ </div>
779
+ <div class="list-view-pf-actions">
780
+ <button class="btn btn-default">Action</button>
781
+ <div class="dropdown pull-right dropdown-kebab-pf">
782
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
783
+ <span class="fa fa-ellipsis-v"></span>
784
+ </button>
785
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight14">
786
+ <li><a href="#">Action</a></li>
787
+ <li><a href="#">Another action</a></li>
788
+ <li><a href="#">Something else here</a></li>
789
+ <li role="separator" class="divider"></li>
790
+ <li><a href="#">Separated link</a></li>
791
+ </ul>
792
+ </div>
793
+
794
+ </div>
795
+ <div class="list-view-pf-main-info">
796
+ <div class="list-view-pf-left">
797
+ <span class="fa fa-linux list-view-pf-icon-sm"></span>
798
+ </div>
799
+ <div class="list-view-pf-body">
800
+ <div class="list-view-pf-description">
801
+ <div class="list-group-item-heading">
802
+ Event Four
803
+ </div>
804
+ <div class="list-group-item-text">
805
+ The following snippet of text is <a href="#">rendered as link text</a>.
806
+ </div>
807
+ </div>
808
+ <div class="list-view-pf-additional-info">
809
+ <div class="list-view-pf-additional-info-item">
810
+ <span class="pficon pficon-screen"></span>
811
+ <strong>4</strong> Hosts
812
+ </div>
813
+ <div class="list-view-pf-additional-info-item">
814
+ <span class="pficon pficon-cluster"></span>
815
+ <strong>2</strong> Clusters
816
+ </div>
817
+ <div class="list-view-pf-additional-info-item">
818
+ <span class="pficon pficon-container-node"></span>
819
+ <strong>10</strong> Nodes
820
+ </div>
821
+ <div class="list-view-pf-additional-info-item">
822
+ <span class="pficon pficon-image"></span>
823
+ <strong>6</strong> Images
824
+ </div>
825
+ </div>
826
+ </div>
827
+ </div>
828
+ </div>
829
+ <div class="list-group-item">
830
+ <div class="list-view-pf-checkbox">
831
+ <input type="checkbox">
832
+ </div>
833
+ <div class="list-view-pf-actions">
834
+ <button class="btn btn-default">Action</button>
835
+ <div class="dropdown pull-right dropdown-kebab-pf">
836
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight15" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
837
+ <span class="fa fa-ellipsis-v"></span>
838
+ </button>
839
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight15">
840
+ <li><a href="#">Action</a></li>
841
+ <li><a href="#">Another action</a></li>
842
+ <li><a href="#">Something else here</a></li>
843
+ <li role="separator" class="divider"></li>
844
+ <li><a href="#">Separated link</a></li>
845
+ </ul>
846
+ </div>
847
+
848
+ </div>
849
+ <div class="list-view-pf-main-info">
850
+ <div class="list-view-pf-left">
851
+ <span class="fa fa-briefcase list-view-pf-icon-sm"></span>
852
+ </div>
853
+ <div class="list-view-pf-body">
854
+ <div class="list-view-pf-description">
855
+ <div class="list-group-item-heading">
856
+ Event Five
857
+ </div>
858
+ <div class="list-group-item-text">
859
+ The following snippet of text is <a href="#">rendered as link text</a>.
860
+ </div>
861
+ </div>
862
+ <div class="list-view-pf-additional-info">
863
+ <div class="list-view-pf-additional-info-item">
864
+ <span class="pficon pficon-screen"></span>
865
+ <strong>4</strong> Hosts
866
+ </div>
867
+ <div class="list-view-pf-additional-info-item">
868
+ <span class="pficon pficon-cluster"></span>
869
+ <strong>2</strong> Clusters
870
+ </div>
871
+ <div class="list-view-pf-additional-info-item">
872
+ <span class="pficon pficon-container-node"></span>
873
+ <strong>10</strong> Nodes
874
+ </div>
875
+ <div class="list-view-pf-additional-info-item">
876
+ <span class="pficon pficon-image"></span>
877
+ <strong>6</strong> Images
878
+ </div>
879
+ </div>
880
+ </div>
881
+ </div>
882
+ </div>
883
+ <div class="list-group-item">
884
+ <div class="list-view-pf-checkbox">
885
+ <input type="checkbox">
886
+ </div>
887
+ <div class="list-view-pf-actions">
888
+ <button class="btn btn-default">Action</button>
889
+ <div class="dropdown pull-right dropdown-kebab-pf">
890
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight16" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
891
+ <span class="fa fa-ellipsis-v"></span>
892
+ </button>
893
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight16">
894
+ <li><a href="#">Action</a></li>
895
+ <li><a href="#">Another action</a></li>
896
+ <li><a href="#">Something else here</a></li>
897
+ <li role="separator" class="divider"></li>
898
+ <li><a href="#">Separated link</a></li>
899
+ </ul>
900
+ </div>
901
+
902
+ </div>
903
+ <div class="list-view-pf-main-info">
904
+ <div class="list-view-pf-left">
905
+ <span class="fa fa-coffee list-view-pf-icon-sm"></span>
906
+ </div>
907
+ <div class="list-view-pf-body">
908
+ <div class="list-view-pf-description">
909
+ <div class="list-group-item-heading">
910
+ Event Six
911
+ </div>
912
+ <div class="list-group-item-text">
913
+ The following snippet of text is <a href="#">rendered as link text</a>.
914
+ </div>
915
+ </div>
916
+ <div class="list-view-pf-additional-info">
917
+ <div class="list-view-pf-additional-info-item">
918
+ <span class="pficon pficon-screen"></span>
919
+ <strong>4</strong> Hosts
920
+ </div>
921
+ <div class="list-view-pf-additional-info-item">
922
+ <span class="pficon pficon-cluster"></span>
923
+ <strong>2</strong> Clusters
924
+ </div>
925
+ <div class="list-view-pf-additional-info-item">
926
+ <span class="pficon pficon-container-node"></span>
927
+ <strong>10</strong> Nodes
928
+ </div>
929
+ <div class="list-view-pf-additional-info-item">
930
+ <span class="pficon pficon-image"></span>
931
+ <strong>6</strong> Images
932
+ </div>
933
+ </div>
934
+ </div>
935
+ </div>
936
+ </div>
937
+ <div class="list-group-item">
938
+ <div class="list-view-pf-checkbox">
939
+ <input type="checkbox">
940
+ </div>
941
+ <div class="list-view-pf-actions">
942
+ <button class="btn btn-default">Action</button>
943
+ <div class="dropdown pull-right dropdown-kebab-pf">
944
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight17" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
945
+ <span class="fa fa-ellipsis-v"></span>
946
+ </button>
947
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight17">
948
+ <li><a href="#">Action</a></li>
949
+ <li><a href="#">Another action</a></li>
950
+ <li><a href="#">Something else here</a></li>
951
+ <li role="separator" class="divider"></li>
952
+ <li><a href="#">Separated link</a></li>
953
+ </ul>
954
+ </div>
955
+
956
+ </div>
957
+ <div class="list-view-pf-main-info">
958
+ <div class="list-view-pf-left">
959
+ <span class="fa fa-plane list-view-pf-icon-sm"></span>
960
+ </div>
961
+ <div class="list-view-pf-body">
962
+ <div class="list-view-pf-description">
963
+ <div class="list-group-item-heading">
964
+ Event One
965
+ </div>
966
+ <div class="list-group-item-text">
967
+ The following snippet of text is <a href="#">rendered as link text</a>.
968
+ </div>
969
+ </div>
970
+ <div class="list-view-pf-additional-info">
971
+ <div class="list-view-pf-additional-info-item">
972
+ <span class="pficon pficon-screen"></span>
973
+ <strong>8</strong> Hosts
974
+ </div>
975
+ <div class="list-view-pf-additional-info-item">
976
+ <span class="pficon pficon-cluster"></span>
977
+ <strong>6</strong> Clusters
978
+ </div>
979
+ <div class="list-view-pf-additional-info-item">
980
+ <span class="pficon pficon-container-node"></span>
981
+ <strong>10</strong> Nodes
982
+ </div>
983
+ <div class="list-view-pf-additional-info-item">
984
+ <span class="pficon pficon-image"></span>
985
+ <strong>8</strong> Images
986
+ </div>
987
+ </div>
988
+ </div>
989
+ </div>
990
+ </div>
991
+ <div class="list-group-item">
992
+ <div class="list-view-pf-checkbox">
993
+ <input type="checkbox">
994
+ </div>
995
+ <div class="list-view-pf-actions">
996
+ <button class="btn btn-default">Action</button>
997
+ <div class="dropdown pull-right dropdown-kebab-pf">
998
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight18" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
999
+ <span class="fa fa-ellipsis-v"></span>
1000
+ </button>
1001
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight18">
1002
+ <li><a href="#">Action</a></li>
1003
+ <li><a href="#">Another action</a></li>
1004
+ <li><a href="#">Something else here</a></li>
1005
+ <li role="separator" class="divider"></li>
1006
+ <li><a href="#">Separated link</a></li>
1007
+ </ul>
1008
+ </div>
1009
+
1010
+ </div>
1011
+ <div class="list-view-pf-main-info">
1012
+ <div class="list-view-pf-left">
1013
+ <span class="fa fa-magic list-view-pf-icon-sm"></span>
1014
+ </div>
1015
+ <div class="list-view-pf-body">
1016
+ <div class="list-view-pf-description">
1017
+ <div class="list-group-item-heading">
1018
+ Event Two
1019
+ </div>
1020
+ <div class="list-group-item-text">
1021
+ The following snippet of text is <a href="#">rendered as link text</a>.
1022
+ </div>
1023
+ </div>
1024
+ <div class="list-view-pf-additional-info">
1025
+ <div class="list-view-pf-additional-info-item">
1026
+ <span class="pficon pficon-screen"></span>
1027
+ <strong>4</strong> Hosts
1028
+ </div>
1029
+ <div class="list-view-pf-additional-info-item">
1030
+ <span class="pficon pficon-cluster"></span>
1031
+ <strong>2</strong> Clusters
1032
+ </div>
1033
+ <div class="list-view-pf-additional-info-item">
1034
+ <span class="pficon pficon-container-node"></span>
1035
+ <strong>11</strong> Nodes
1036
+ </div>
1037
+ <div class="list-view-pf-additional-info-item">
1038
+ <span class="pficon pficon-image"></span>
1039
+ <strong>6</strong> Images
1040
+ </div>
1041
+ </div>
1042
+ </div>
1043
+ </div>
1044
+ </div>
1045
+ <div class="list-group-item">
1046
+ <div class="list-view-pf-checkbox">
1047
+ <input type="checkbox">
1048
+ </div>
1049
+ <div class="list-view-pf-actions">
1050
+ <button class="btn btn-default">Action</button>
1051
+ <div class="dropdown pull-right dropdown-kebab-pf">
1052
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight19" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
1053
+ <span class="fa fa-ellipsis-v"></span>
1054
+ </button>
1055
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight19">
1056
+ <li><a href="#">Action</a></li>
1057
+ <li><a href="#">Another action</a></li>
1058
+ <li><a href="#">Something else here</a></li>
1059
+ <li role="separator" class="divider"></li>
1060
+ <li><a href="#">Separated link</a></li>
1061
+ </ul>
1062
+ </div>
1063
+
1064
+ </div>
1065
+ <div class="list-view-pf-main-info">
1066
+ <div class="list-view-pf-left">
1067
+ <span class="fa fa-gamepad list-view-pf-icon-sm"></span>
1068
+ </div>
1069
+ <div class="list-view-pf-body">
1070
+ <div class="list-view-pf-description">
1071
+ <div class="list-group-item-heading">
1072
+ Event Three
1073
+ </div>
1074
+ <div class="list-group-item-text">
1075
+ The following snippet of text is <a href="#">rendered as link text</a>.
1076
+ </div>
1077
+ </div>
1078
+ <div class="list-view-pf-additional-info">
1079
+ <div class="list-view-pf-additional-info-item">
1080
+ <span class="pficon pficon-screen"></span>
1081
+ <strong>4</strong> Hosts
1082
+ </div>
1083
+ <div class="list-view-pf-additional-info-item">
1084
+ <span class="pficon pficon-cluster"></span>
1085
+ <strong>2</strong> Clusters
1086
+ </div>
1087
+ <div class="list-view-pf-additional-info-item">
1088
+ <span class="pficon pficon-container-node"></span>
1089
+ <strong>10</strong> Nodes
1090
+ </div>
1091
+ <div class="list-view-pf-additional-info-item">
1092
+ <span class="pficon pficon-image"></span>
1093
+ <strong>6</strong> Images
1094
+ </div>
1095
+ </div>
1096
+ </div>
1097
+ </div>
1098
+ </div>
1099
+ <div class="list-group-item">
1100
+ <div class="list-view-pf-checkbox">
1101
+ <input type="checkbox">
1102
+ </div>
1103
+ <div class="list-view-pf-actions">
1104
+ <button class="btn btn-default">Action</button>
1105
+ <div class="dropdown pull-right dropdown-kebab-pf">
1106
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight20" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
1107
+ <span class="fa fa-ellipsis-v"></span>
1108
+ </button>
1109
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight20">
1110
+ <li><a href="#">Action</a></li>
1111
+ <li><a href="#">Another action</a></li>
1112
+ <li><a href="#">Something else here</a></li>
1113
+ <li role="separator" class="divider"></li>
1114
+ <li><a href="#">Separated link</a></li>
1115
+ </ul>
1116
+ </div>
1117
+
1118
+ </div>
1119
+ <div class="list-view-pf-main-info">
1120
+ <div class="list-view-pf-left">
1121
+ <span class="fa fa-linux list-view-pf-icon-sm"></span>
1122
+ </div>
1123
+ <div class="list-view-pf-body">
1124
+ <div class="list-view-pf-description">
1125
+ <div class="list-group-item-heading">
1126
+ Event Four
1127
+ </div>
1128
+ <div class="list-group-item-text">
1129
+ The following snippet of text is <a href="#">rendered as link text</a>.
1130
+ </div>
1131
+ </div>
1132
+ <div class="list-view-pf-additional-info">
1133
+ <div class="list-view-pf-additional-info-item">
1134
+ <span class="pficon pficon-screen"></span>
1135
+ <strong>4</strong> Hosts
1136
+ </div>
1137
+ <div class="list-view-pf-additional-info-item">
1138
+ <span class="pficon pficon-cluster"></span>
1139
+ <strong>2</strong> Clusters
1140
+ </div>
1141
+ <div class="list-view-pf-additional-info-item">
1142
+ <span class="pficon pficon-container-node"></span>
1143
+ <strong>10</strong> Nodes
1144
+ </div>
1145
+ <div class="list-view-pf-additional-info-item">
1146
+ <span class="pficon pficon-image"></span>
1147
+ <strong>6</strong> Images
1148
+ </div>
1149
+ </div>
1150
+ </div>
1151
+ </div>
1152
+ </div>
1153
+ <form class="content-view-pf-pagination list-view-pf-pagination clearfix" id="">
1154
+ <div class="form-group">
1155
+ <select class="selectpicker pagination-pf-pagesize">
1156
+ <option value="6">6</option>
1157
+ <option value="10" selected="selected">10</option>
1158
+ <option value="15" >15</option>
1159
+ <option value="25">25</option>
1160
+ <option value="50">50</option>
1161
+ </select>
1162
+ <span>per page</span>
1163
+ </div>
1164
+ <div class="form-group">
1165
+ <span><span class="pagination-pf-items-current">1-15</span> of <span class="pagination-pf-items-total">75</span></span>
1166
+ <ul class="pagination pagination-pf-back">
1167
+ <li class="disabled"><a href="#" title="First Page"><span class="i fa fa-angle-double-left"></span></a></li>
1168
+ <li class="disabled"><a href="#" title="Previous Page"><span class="i fa fa-angle-left"></span></a></li>
1169
+ </ul>
1170
+ <label for="-page" class="sr-only">Current Page</label>
1171
+ <input class="pagination-pf-page" type="text" value="1" id="-page"/>
1172
+ <span>of <span class="pagination-pf-pages">5</span></span>
1173
+ <ul class="pagination pagination-pf-forward">
1174
+ <li><a href="#" title="Next Page"><span class="i fa fa-angle-right"></span></a></li>
1175
+ <li><a href="#" title="Last Page"><span class="i fa fa-angle-double-right"></span></a></li>
1176
+ </ul>
1177
+ </div>
1178
+ </form>
1179
+
1180
+ </div>
1181
+ <script>
1182
+ $(document).ready(function () {
1183
+ // Row Checkbox Selection
1184
+ $("input[type='checkbox']").change(function (e) {
1185
+ if ($(this).is(":checked")) {
1186
+ $(this).closest('.list-group-item').addClass("active");
1187
+ } else {
1188
+ $(this).closest('.list-group-item').removeClass("active");
1189
+ }
1190
+ });
1191
+ // toggle dropdown menu
1192
+ $('.list-view-pf-actions').on('show.bs.dropdown', function () {
1193
+ var $this = $(this);
1194
+ var $dropdown = $this.find('.dropdown');
1195
+ var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find('.dropdown-menu').outerHeight(true);
1196
+ $dropdown.toggleClass('dropup', space < 10);
1197
+ });
1198
+ });
1199
+ </script>
1200
+
1201
+ </div>
1202
+
1203
+ </body>
1204
+ </html>