patternfly-sass 3.17.0 → 3.20.0

Sign up to get free protection for your applications and to get access to all the features.
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>