patternfly-sass 3.7.0 → 3.8.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 (144) 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 +0 -0
  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-BoldItalic-webfont.eot +0 -0
  7. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.svg +0 -0
  8. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.ttf +0 -0
  9. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.woff +0 -0
  10. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.eot +0 -0
  11. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.svg +0 -0
  12. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.ttf +0 -0
  13. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.woff +0 -0
  14. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.eot +0 -0
  15. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.svg +0 -0
  16. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.ttf +0 -0
  17. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.woff +0 -0
  18. data/assets/fonts/patternfly/OpenSans-Italic-webfont.eot +0 -0
  19. data/assets/fonts/patternfly/OpenSans-Italic-webfont.svg +0 -0
  20. data/assets/fonts/patternfly/OpenSans-Italic-webfont.ttf +0 -0
  21. data/assets/fonts/patternfly/OpenSans-Italic-webfont.woff +0 -0
  22. data/assets/fonts/patternfly/OpenSans-Light-webfont.eot +0 -0
  23. data/assets/fonts/patternfly/OpenSans-Light-webfont.svg +0 -0
  24. data/assets/fonts/patternfly/OpenSans-Light-webfont.ttf +0 -0
  25. data/assets/fonts/patternfly/OpenSans-Light-webfont.woff +0 -0
  26. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.eot +0 -0
  27. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.svg +0 -0
  28. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.ttf +0 -0
  29. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.woff +0 -0
  30. data/assets/fonts/patternfly/OpenSans-Regular-webfont.eot +0 -0
  31. data/assets/fonts/patternfly/OpenSans-Regular-webfont.svg +0 -0
  32. data/assets/fonts/patternfly/OpenSans-Regular-webfont.ttf +0 -0
  33. data/assets/fonts/patternfly/OpenSans-Regular-webfont.woff +0 -0
  34. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.eot +0 -0
  35. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.svg +0 -0
  36. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.ttf +0 -0
  37. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.woff +0 -0
  38. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.eot +0 -0
  39. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.svg +0 -0
  40. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.ttf +0 -0
  41. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.woff +0 -0
  42. data/assets/fonts/patternfly/PatternFlyIcons-webfont.eot +0 -0
  43. data/assets/fonts/patternfly/PatternFlyIcons-webfont.svg +0 -0
  44. data/assets/fonts/patternfly/PatternFlyIcons-webfont.ttf +0 -0
  45. data/assets/fonts/patternfly/PatternFlyIcons-webfont.woff +0 -0
  46. data/assets/fonts/patternfly/fontawesome-webfont.eot +0 -0
  47. data/assets/fonts/patternfly/fontawesome-webfont.svg +44 -14
  48. data/assets/fonts/patternfly/fontawesome-webfont.ttf +0 -0
  49. data/assets/fonts/patternfly/fontawesome-webfont.woff +0 -0
  50. data/assets/fonts/patternfly/fontawesome-webfont.woff2 +0 -0
  51. data/assets/images/patternfly/apple-touch-icon-precomposed-114.png +0 -0
  52. data/assets/images/patternfly/apple-touch-icon-precomposed-144.png +0 -0
  53. data/assets/images/patternfly/apple-touch-icon-precomposed-57.png +0 -0
  54. data/assets/images/patternfly/apple-touch-icon-precomposed-72.png +0 -0
  55. data/assets/images/patternfly/bg-login.jpg +0 -0
  56. data/assets/images/patternfly/logo-alt.svg +18 -18
  57. data/assets/images/patternfly/logo.svg +22 -22
  58. data/assets/javascripts/patternfly.js +290 -91
  59. data/assets/javascripts/patternfly.min.js +2 -1
  60. data/assets/stylesheets/patternfly/_layouts.scss +23 -42
  61. data/assets/stylesheets/patternfly/_list-view.scss +7 -0
  62. data/assets/stylesheets/patternfly/_navbar.scss +3 -3
  63. data/assets/stylesheets/patternfly/_notifications-drawer.scss +16 -3
  64. data/assets/stylesheets/patternfly/_toolbar.scss +120 -14
  65. data/assets/stylesheets/patternfly/_variables.scss +20 -5
  66. data/assets/stylesheets/patternfly/_vertical-nav.scss +631 -381
  67. data/assets/stylesheets/patternfly/_wizard.scss +105 -14
  68. data/assets/stylesheets/patternfly/lib/bootstrap-datepicker.scss +0 -1
  69. data/bower.json +11 -11
  70. data/lib/patternfly-sass/version.rb +2 -2
  71. data/patternfly-sass.gemspec +2 -2
  72. data/spec/html/about-modal.html +1 -1
  73. data/spec/html/accordions.html +1 -1
  74. data/spec/html/alerts.html +1 -1
  75. data/spec/html/area-charts.html +3 -3
  76. data/spec/html/badges.html +1 -1
  77. data/spec/html/bar-charts.html +3 -3
  78. data/spec/html/basic.html +2 -2
  79. data/spec/html/blank-slate.html +1 -1
  80. data/spec/html/bootstrap-combobox.html +2 -2
  81. data/spec/html/bootstrap-datepicker.html +2 -2
  82. data/spec/html/bootstrap-select.html +2 -2
  83. data/spec/html/bootstrap-switch.html +1 -1
  84. data/spec/html/bootstrap-touchspin.html +2 -2
  85. data/spec/html/bootstrap-treeview-2.html +3 -3
  86. data/spec/html/bootstrap-treeview.html +3 -3
  87. data/spec/html/breadcrumbs.html +1 -1
  88. data/spec/html/buttons.html +1 -1
  89. data/spec/html/cards.html +4 -4
  90. data/spec/html/code.html +1 -1
  91. data/spec/html/dashboard.html +3 -3
  92. data/spec/html/datatables-columns.html +3 -3
  93. data/spec/html/datatables.html +2 -2
  94. data/spec/html/dist/css/patternfly-additions.css +1093 -794
  95. data/spec/html/dist/css/patternfly-additions.css.map +1 -1
  96. data/spec/html/dist/css/patternfly-additions.min.css +2 -2
  97. data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
  98. data/spec/html/dist/css/patternfly.css +133 -14
  99. data/spec/html/dist/css/patternfly.css.map +1 -1
  100. data/spec/html/dist/css/patternfly.min.css +6 -6
  101. data/spec/html/dist/css/patternfly.min.css.map +1 -1
  102. data/spec/html/donut-charts.html +3 -3
  103. data/spec/html/dropdowns.html +1 -1
  104. data/spec/html/form.html +2 -2
  105. data/spec/html/forms.html +1 -1
  106. data/spec/html/horizontal-navigation.html +5 -7
  107. data/spec/html/icons.html +1 -1
  108. data/spec/html/index.html +15 -15
  109. data/spec/html/infotip.html +1 -1
  110. data/spec/html/labels.html +1 -1
  111. data/spec/html/line-charts.html +3 -3
  112. data/spec/html/list-group.html +1 -1
  113. data/spec/html/list-view-rows.html +592 -0
  114. data/spec/html/list-view.html +314 -309
  115. data/spec/html/login.html +1 -1
  116. data/spec/html/modals.html +1 -1
  117. data/spec/html/navbar.html +2 -2
  118. data/spec/html/notification-drawer-horizontal-nav.html +1451 -0
  119. data/spec/html/{notifications-drawer.html → notification-drawer-vertical-nav.html} +146 -265
  120. data/spec/html/pagination.html +1 -1
  121. data/spec/html/panels.html +1 -1
  122. data/spec/html/pie-charts.html +3 -3
  123. data/spec/html/popovers.html +1 -1
  124. data/spec/html/progress-bars.html +1 -1
  125. data/spec/html/search.html +1 -1
  126. data/spec/html/spinner.html +1 -1
  127. data/spec/html/tab.html +2 -2
  128. data/spec/html/tables.html +1 -1
  129. data/spec/html/tabs.html +1 -1
  130. data/spec/html/time-picker.html +2 -2
  131. data/spec/html/toast.html +1 -1
  132. data/spec/html/toolbar.html +43 -8
  133. data/spec/html/tooltip.html +1 -1
  134. data/spec/html/typography-2.html +1 -1
  135. data/spec/html/typography.html +1 -1
  136. data/spec/html/utilization-bar-charts.html +3 -3
  137. data/spec/html/{layout-alt-fixed-inner-scroll.html → vertical-navigation-primary-only.html} +61 -192
  138. data/spec/html/{layout-alt-fixed.html → vertical-navigation-with-secondary.html} +120 -184
  139. data/spec/html/{vertical-navigation-without-icons.html → vertical-navigation-with-tertiary-no-icons.html} +212 -155
  140. data/spec/html/{vertical-navigation.html → vertical-navigation-with-tertiary-pins.html} +212 -155
  141. data/spec/html/wizard.html +88 -48
  142. metadata +21 -21
  143. data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +0 -917
  144. data/spec/html/layout-alt-fixed-with-footer.html +0 -917
data/spec/html/list-view.html CHANGED
@@ -26,23 +26,234 @@
26
26
  <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
27
27
  <link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
28
28
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
29
- <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
30
- <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
31
- <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"></script>
29
+ <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
32
30
  <script src="../../dist/js/patternfly.min.js"></script>
33
31
  </head>
32
+ <div class="toast-pf toast-pf-max-width toast-pf-top-right alert alert-warning alert-dismissable">
33
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
34
+ <span class="pficon pficon-close"></span>
35
+ </button>
36
+ <span class="pficon pficon-warning-triangle-o"></span>
37
+ 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>.
38
+ </div>
34
39
 
35
40
  <body>
36
- <div class="container">
37
- <div class="page-header">
38
- <h1>List View</h1>
39
- </div>
40
- <div class="alert alert-warning">
41
- <span class="pficon pficon-warning-triangle-o"></span>
42
- 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>.
43
- </div>
44
- <hr>
45
- <div class="list-group list-view-pf">
41
+ <nav class="navbar navbar-default navbar-pf" role="navigation">
42
+ <div class="navbar-header">
43
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
44
+ <span class="sr-only">Toggle navigation</span>
45
+ <span class="icon-bar"></span>
46
+ <span class="icon-bar"></span>
47
+ <span class="icon-bar"></span>
48
+ </button>
49
+ <a class="navbar-brand" href="/">
50
+ <img src="../../dist/img/brand.svg" alt="PatternFly Enterprise Application" />
51
+ </a>
52
+ </div>
53
+ <div class="collapse navbar-collapse navbar-collapse-1">
54
+ <ul class="nav navbar-nav navbar-utility">
55
+ <li>
56
+ <a href="#">Status</a>
57
+ </li>
58
+ <li class="dropdown">
59
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
60
+ <span class="pficon pficon-user"></span>
61
+ Brian Johnson <b class="caret"></b>
62
+ </a>
63
+ <ul class="dropdown-menu">
64
+ <li>
65
+ <a href="#">Link</a>
66
+ </li>
67
+ <li>
68
+ <a href="#">Another link</a>
69
+ </li>
70
+ <li>
71
+ <a href="#">Something else here</a>
72
+ </li>
73
+ <li class="divider"></li>
74
+ <li class="dropdown-submenu">
75
+ <a tabindex="-1" href="#">More options</a>
76
+ <ul class="dropdown-menu">
77
+ <li>
78
+ <a href="#">Link</a>
79
+ </li>
80
+ <li>
81
+ <a href="#">Another link</a>
82
+ </li>
83
+ <li>
84
+ <a href="#">Something else here</a>
85
+ </li>
86
+ <li class="divider"></li>
87
+ <li class="dropdown-header">Nav header</li>
88
+ <li>
89
+ <a href="#">Separated link</a>
90
+ </li>
91
+ <li class="divider"></li>
92
+ <li>
93
+ <a href="#">One more separated link</a>
94
+ </li>
95
+ </ul>
96
+ </li>
97
+ <li class="divider"></li>
98
+ <li>
99
+ <a href="#">One more separated link</a>
100
+ </li>
101
+ </ul>
102
+ </li>
103
+ </ul>
104
+ <ul class="nav navbar-nav navbar-primary">
105
+ <li>
106
+ <a href="#">First Link</a>
107
+ </li>
108
+ <li>
109
+ <a href="#">Another Link</a>
110
+ </li>
111
+ <li>
112
+ <a href="#">And Another</a>
113
+ </li>
114
+ <li>
115
+ <a href="#">As a General Rule</a>
116
+ </li>
117
+ <li>
118
+ <a href="#">Five to Seven Links</a>
119
+ </li>
120
+ <li>
121
+ <a href="#">Is Good</a>
122
+ </li>
123
+ </ul>
124
+ </div>
125
+ </nav>
126
+
127
+ <div class="container-fluid">
128
+ <div class="row toolbar-pf">
129
+ <div class="col-sm-12">
130
+ <form class="toolbar-pf-actions">
131
+ <div class="form-group toolbar-pf-filter">
132
+ <label class="sr-only" for="filter">Name</label>
133
+ <div class="input-group">
134
+ <div class="input-group-btn">
135
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
136
+ <ul class="dropdown-menu">
137
+ <li><a href="#">Action</a></li>
138
+ <li><a href="#">Another action</a></li>
139
+ <li><a href="#">Something else here</a></li>
140
+ <li role="separator" class="divider"></li>
141
+ <li><a href="#">Separated link</a></li>
142
+ </ul>
143
+ </div><!-- /btn-group -->
144
+ <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
145
+ </div><!-- /input-group -->
146
+ </div>
147
+ <div class="form-group">
148
+ <div class="dropdown btn-group">
149
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
150
+ <ul class="dropdown-menu">
151
+ <li><a href="#">Action</a></li>
152
+ <li><a href="#">Another action</a></li>
153
+ <li><a href="#">Something else here</a></li>
154
+ <li role="separator" class="divider"></li>
155
+ <li><a href="#">Separated link</a></li>
156
+ </ul>
157
+ </div>
158
+ <button class="btn btn-link" type="button">
159
+ <span class="fa fa-sort-alpha-asc"></span>
160
+ </button>
161
+ </div>
162
+ <div class="form-group">
163
+ <button class="btn btn-default" type="button">Action</button>
164
+ <button class="btn btn-default" type="button">Action</button>
165
+ <div class="dropdown btn-group dropdown-kebab-pf">
166
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
167
+ <span class="fa fa-ellipsis-v"></span>
168
+ </button>
169
+ <ul class="dropdown-menu " aria-labelledby="dropdownKebab">
170
+ <li><a href="#">Action</a></li>
171
+ <li><a href="#">Another action</a></li>
172
+ <li><a href="#">Something else here</a></li>
173
+ <li role="separator" class="divider"></li>
174
+ <li><a href="#">Separated link</a></li>
175
+ </ul>
176
+ </div>
177
+
178
+ </div>
179
+ <div class="toolbar-pf-action-right">
180
+ <div class="form-group toolbar-pf-find">
181
+ <button class="btn btn-link btn-find" type="button">
182
+ <span class="fa fa-search"></span>
183
+ </button>
184
+ <div class="find-pf-dropdown-container">
185
+ <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
186
+ <div class="find-pf-buttons">
187
+ <span class="find-pf-nums">1 of 3</span>
188
+ <button class="btn btn-link" type="button">
189
+ <span class="fa fa-angle-up"></span>
190
+ </button>
191
+ <button class="btn btn-link" type="button">
192
+ <span class="fa fa-angle-down"></span>
193
+ </button>
194
+ <button class="btn btn-link btn-find-close" type="button">
195
+ <span class="pficon pficon-close"></span>
196
+ </button>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ <div class="form-group toolbar-pf-view-selector">
201
+ <ul class="list-inline">
202
+ <li><a href="#"><i class="fa fa-th"></i></a></li>
203
+ <li class="active"><a href="#"><i class="fa fa-th-large"></i></a></li>
204
+ <li><a href="#"><i class="fa fa-th-list"></i></a></li>
205
+ </ul>
206
+ </div>
207
+ </div>
208
+ </form>
209
+ <div class="row toolbar-pf-results">
210
+ <div class="col-sm-12">
211
+ <h5>40 Results</h5>
212
+ <p>Active filters:</p>
213
+ <ul class="list-inline">
214
+ <li>
215
+ <span class="label label-info">
216
+ Name: nameofthething
217
+ <a href="#"><span class="pficon pficon-close"></span></a>
218
+ </span>
219
+ </li>
220
+ <li>
221
+ <span class="label label-info">
222
+ Name: nameofthething
223
+ <a href="#"><span class="pficon pficon-close"></span></a>
224
+ </span>
225
+ </li>
226
+ <li>
227
+ <span class="label label-info">
228
+ Name: nameofthething
229
+ <a href="#"><span class="pficon pficon-close"></span></a>
230
+ </span>
231
+ </li>
232
+ </ul>
233
+ <p><a href="#">Clear All Filters</a></p>
234
+ </div><!-- /col -->
235
+ </div><!-- /row -->
236
+ </div><!-- /col -->
237
+ </div><!-- /row -->
238
+ </div><!-- /container -->
239
+ <script>
240
+ (function($) {
241
+ $(document).ready(function() {
242
+ // Upon clicking the find button, show the find dropdown content
243
+ $(".btn-find").click(function () {
244
+ $(".find-pf-dropdown-container").toggle();
245
+ });
246
+ // Upon clicking the find close button, hide the find dropdown content
247
+ $(".btn-find-close").click(function () {
248
+ $(".find-pf-dropdown-container").hide();
249
+ });
250
+
251
+ });
252
+ })(jQuery);
253
+ </script>
254
+
255
+ <div class="container-fluid">
256
+ <div class="list-group list-view-pf list-view-pf-view">
46
257
  <div class="list-group-item">
47
258
  <div class="list-view-pf-checkbox">
48
259
  <input type="checkbox">
@@ -83,43 +294,31 @@
83
294
  </div>
84
295
  <div class="list-view-pf-additional-info-item">
85
296
  <span class="pficon pficon-cluster"></span>
86
- <strong>8</strong> Clusters
297
+ <strong>6</strong> Clusters
87
298
  </div>
88
299
  <div class="list-view-pf-additional-info-item">
89
300
  <span class="pficon pficon-container-node"></span>
90
- <strong>18</strong> Nodes
301
+ <strong>10</strong> Nodes
91
302
  </div>
92
303
  <div class="list-view-pf-additional-info-item">
93
304
  <span class="pficon pficon-image"></span>
94
- <strong>4</strong> Images
305
+ <strong>8</strong> Images
95
306
  </div>
96
307
  </div>
97
308
  </div>
98
309
  </div>
99
310
  </div>
100
- </div>
101
- <script>
102
- // Row Checkbox Selection
103
- $(document).ready(function () {
104
- $("input[type='checkbox']").change(function (e) {
105
- if ($(this).is(":checked")) {
106
- $(this).closest('.list-group-item').addClass("active");
107
- } else {
108
- $(this).closest('.list-group-item').removeClass("active");
109
- }
110
- });
111
- });
112
- </script>
113
- <h2>Row Variations</h2>
114
- <div class="list-group list-view-pf">
115
- <div class="list-group-item list-view-pf-stacked">
311
+ <div class="list-group-item">
312
+ <div class="list-view-pf-checkbox">
313
+ <input type="checkbox">
314
+ </div>
116
315
  <div class="list-view-pf-actions">
117
316
  <button class="btn btn-default">Action</button>
118
317
  <div class="dropdown pull-right dropdown-kebab-pf">
119
- <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
318
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
120
319
  <span class="fa fa-ellipsis-v"></span>
121
320
  </button>
122
- <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight1">
321
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
123
322
  <li><a href="#">Action</a></li>
124
323
  <li><a href="#">Another action</a></li>
125
324
  <li><a href="#">Something else here</a></li>
@@ -131,128 +330,49 @@
131
330
  </div>
132
331
  <div class="list-view-pf-main-info">
133
332
  <div class="list-view-pf-left">
134
- <span class="fa fa-plane list-view-pf-icon-lg"></span>
333
+ <span class="fa fa-magic list-view-pf-icon-sm"></span>
135
334
  </div>
136
335
  <div class="list-view-pf-body">
137
336
  <div class="list-view-pf-description">
138
337
  <div class="list-group-item-heading">
139
- Event One
140
- <small>Feb 23, 2015 12:32 am</small>
338
+ Event Two
141
339
  </div>
142
340
  <div class="list-group-item-text">
143
341
  The following snippet of text is <a href="#">rendered as link text</a>.
144
342
  </div>
145
343
  </div>
146
344
  <div class="list-view-pf-additional-info">
147
- <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
148
- <span id="donut-chart-1"></span>
345
+ <div class="list-view-pf-additional-info-item">
346
+ <span class="pficon pficon-screen"></span>
347
+ <strong>4</strong> Hosts
149
348
  </div>
150
- <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
151
- <span id="donut-chart-2"></span>
349
+ <div class="list-view-pf-additional-info-item">
350
+ <span class="pficon pficon-cluster"></span>
351
+ <strong>2</strong> Clusters
152
352
  </div>
153
- <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
154
- <span id="donut-chart-3"></span>
353
+ <div class="list-view-pf-additional-info-item">
354
+ <span class="pficon pficon-container-node"></span>
355
+ <strong>11</strong> Nodes
155
356
  </div>
156
- <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
157
- <span id="donut-chart-4"></span>
357
+ <div class="list-view-pf-additional-info-item">
358
+ <span class="pficon pficon-image"></span>
359
+ <strong>6</strong> Images
158
360
  </div>
159
361
  </div>
160
362
  </div>
161
363
  </div>
162
364
  </div>
163
- </div>
164
- <script>
165
- // Donut Charts
166
- var c3ChartDefaults = $().c3ChartDefaults();
167
- var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('34%');
168
- customDonutChartConfig.size.height = 71;
169
- customDonutChartConfig.donut.width = 5;
170
- customDonutChartConfig.bindto = '#donut-chart-1';
171
- customDonutChartConfig.data = {
172
- type: "donut",
173
- columns: [
174
- ["Used", 34],
175
- ["Available", 86]
176
- ],
177
- groups: [
178
- ["used", "available"]
179
- ],
180
- order: null
181
- };
182
- c3.generate(customDonutChartConfig);
183
- var donutChartTitle = d3.select("#donut-chart-1").select('text.c3-chart-arcs-title');
184
- donutChartTitle.text("");
185
- donutChartTitle.insert('tspan').text("34%").classed('list-view-donut-title', true);
186
-
187
- customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('21%');
188
- customDonutChartConfig.size.height = 71;
189
- customDonutChartConfig.donut.width = 5;
190
- customDonutChartConfig.bindto = '#donut-chart-2';
191
- customDonutChartConfig.data = {
192
- type: "donut",
193
- columns: [
194
- ["Used", 21],
195
- ["Available", 79]
196
- ],
197
- groups: [
198
- ["used", "available"]
199
- ],
200
- order: null
201
- };
202
- c3.generate(customDonutChartConfig);
203
- donutChartTitle = d3.select("#donut-chart-2").select('text.c3-chart-arcs-title');
204
- donutChartTitle.text("");
205
- donutChartTitle.insert('tspan').text("21%").classed('list-view-donut-title', true);
206
-
207
- customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('14%');
208
- customDonutChartConfig.size.height = 71;
209
- customDonutChartConfig.donut.width = 5;
210
- customDonutChartConfig.bindto = '#donut-chart-3';
211
- customDonutChartConfig.data = {
212
- type: "donut",
213
- columns: [
214
- ["Used", 14],
215
- ["Available", 86]
216
- ],
217
- groups: [
218
- ["used", "available"]
219
- ],
220
- order: null
221
- };
222
- c3.generate(customDonutChartConfig);
223
- donutChartTitle = d3.select("#donut-chart-3").select('text.c3-chart-arcs-title');
224
- donutChartTitle.text("");
225
- donutChartTitle.insert('tspan').text("14%").classed('list-view-donut-title', true);
226
-
227
- customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('25%');
228
- customDonutChartConfig.size.height = 71;
229
- customDonutChartConfig.donut.width = 5;
230
- customDonutChartConfig.bindto = '#donut-chart-4';
231
- customDonutChartConfig.data = {
232
- type: "donut",
233
- columns: [
234
- ["Used", 25],
235
- ["Available", 75]
236
- ],
237
- groups: [
238
- ["used", "available"]
239
- ],
240
- order: null
241
- };
242
- c3.generate(customDonutChartConfig);
243
- donutChartTitle = d3.select("#donut-chart-4").select('text.c3-chart-arcs-title');
244
- donutChartTitle.text("");
245
- donutChartTitle.insert('tspan').text("25%").classed('list-view-donut-title', true);
246
- </script>
247
- <div class="list-group list-view-pf">
248
- <div class="list-group-item list-view-pf-stacked">
365
+ <div class="list-group-item">
366
+ <div class="list-view-pf-checkbox">
367
+ <input type="checkbox">
368
+ </div>
249
369
  <div class="list-view-pf-actions">
250
370
  <button class="btn btn-default">Action</button>
251
371
  <div class="dropdown pull-right dropdown-kebab-pf">
252
- <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
372
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
253
373
  <span class="fa fa-ellipsis-v"></span>
254
374
  </button>
255
- <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight2">
375
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
256
376
  <li><a href="#">Action</a></li>
257
377
  <li><a href="#">Another action</a></li>
258
378
  <li><a href="#">Something else here</a></li>
@@ -264,15 +384,12 @@
264
384
  </div>
265
385
  <div class="list-view-pf-main-info">
266
386
  <div class="list-view-pf-left">
267
- <div class="list-view-pf-calendar">
268
- March
269
- <strong>29</strong>
270
- </div>
387
+ <span class="fa fa-gamepad list-view-pf-icon-sm"></span>
271
388
  </div>
272
389
  <div class="list-view-pf-body">
273
390
  <div class="list-view-pf-description">
274
391
  <div class="list-group-item-heading">
275
- Event One
392
+ Event Three
276
393
  </div>
277
394
  <div class="list-group-item-text">
278
395
  The following snippet of text is <a href="#">rendered as link text</a>.
@@ -281,39 +398,35 @@
281
398
  <div class="list-view-pf-additional-info">
282
399
  <div class="list-view-pf-additional-info-item">
283
400
  <span class="pficon pficon-screen"></span>
284
- <strong>8</strong> Clusters
401
+ <strong>4</strong> Hosts
285
402
  </div>
286
403
  <div class="list-view-pf-additional-info-item">
287
- <span class="pficon pficon-screen"></span>
288
- <strong>8</strong> Hosts
404
+ <span class="pficon pficon-cluster"></span>
405
+ <strong>2</strong> Clusters
289
406
  </div>
290
407
  <div class="list-view-pf-additional-info-item">
291
408
  <span class="pficon pficon-container-node"></span>
292
- <strong>18</strong>
293
- Nodes
409
+ <strong>10</strong> Nodes
294
410
  </div>
295
411
  <div class="list-view-pf-additional-info-item">
296
412
  <span class="pficon pficon-image"></span>
297
- <strong>4</strong> Images
413
+ <strong>6</strong> Images
298
414
  </div>
299
415
  </div>
300
416
  </div>
301
417
  </div>
302
418
  </div>
303
- </div>
304
- <div class="list-group list-view-pf">
305
- <div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
419
+ <div class="list-group-item">
306
420
  <div class="list-view-pf-checkbox">
307
421
  <input type="checkbox">
308
422
  </div>
309
423
  <div class="list-view-pf-actions">
310
- <button class="btn btn-default">Action</button>
311
424
  <button class="btn btn-default">Action</button>
312
425
  <div class="dropdown pull-right dropdown-kebab-pf">
313
- <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
426
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
314
427
  <span class="fa fa-ellipsis-v"></span>
315
428
  </button>
316
- <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
429
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
317
430
  <li><a href="#">Action</a></li>
318
431
  <li><a href="#">Another action</a></li>
319
432
  <li><a href="#">Something else here</a></li>
@@ -323,56 +436,14 @@
323
436
  </div>
324
437
 
325
438
  </div>
326
- <div class="list-view-pf-main-info">
327
- <div class="list-view-pf-body">
328
- <div class="list-view-pf-description">
329
- <div class="list-group-item-heading">
330
- Event Ones
331
- </div>
332
- <div class="list-group-item-text">
333
- The following snippet of text is <a href="#">rendered as link text</a>.
334
- </div>
335
- </div>
336
- <div class="list-view-pf-additional-info">
337
- <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
338
- <strong>113,735</strong> Service One
339
- </div>
340
- <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
341
- <strong>35%</strong> Service Two
342
- </div>
343
- <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
344
- <strong>22.0%</strong> Service Three
345
- </div>
346
- </div>
347
- </div>
348
- </div>
349
- </div>
350
- </div>
351
- <script>
352
- // Row Checkbox Selection
353
- $(document).ready(function () {
354
- $("input[type='checkbox']").change(function (e) {
355
- if ($(this).is(":checked")) {
356
- $(this).closest('.list-group-item').addClass("active");
357
- } else {
358
- $(this).closest('.list-group-item').removeClass("active");
359
- }
360
- });
361
- });
362
- </script>
363
- <div class="list-group list-view-pf">
364
- <div class="list-group-item">
365
- <div class="list-view-pf-checkbox">
366
- <input type="checkbox">
367
- </div>
368
439
  <div class="list-view-pf-main-info">
369
440
  <div class="list-view-pf-left">
370
- <span class="fa fa-plane list-view-pf-icon-sm"></span>
441
+ <span class="fa fa-linux list-view-pf-icon-sm"></span>
371
442
  </div>
372
443
  <div class="list-view-pf-body">
373
444
  <div class="list-view-pf-description">
374
445
  <div class="list-group-item-heading">
375
- Event One
446
+ Event Four
376
447
  </div>
377
448
  <div class="list-group-item-text">
378
449
  The following snippet of text is <a href="#">rendered as link text</a>.
@@ -381,93 +452,52 @@
381
452
  <div class="list-view-pf-additional-info">
382
453
  <div class="list-view-pf-additional-info-item">
383
454
  <span class="pficon pficon-screen"></span>
384
- <strong>8</strong> Hosts
455
+ <strong>4</strong> Hosts
385
456
  </div>
386
457
  <div class="list-view-pf-additional-info-item">
387
458
  <span class="pficon pficon-cluster"></span>
388
- <strong>8</strong> Clusters
459
+ <strong>2</strong> Clusters
389
460
  </div>
390
- </div>
391
- </div>
392
- </div>
393
- </div>
394
- </div>
395
- <script>
396
- // Row Checkbox Selection
397
- $(document).ready(function () {
398
- $("input[type='checkbox']").change(function (e) {
399
- if ($(this).is(":checked")) {
400
- $(this).closest('.list-group-item').addClass("active");
401
- } else {
402
- $(this).closest('.list-group-item').removeClass("active");
403
- }
404
- });
405
- });
406
- </script>
407
- <div class="list-group list-view-pf list-view-pf-equalized-column">
408
- <div class="list-group-item">
409
- <div class="list-view-pf-main-info">
410
- <div class="list-view-pf-left">
411
- <span class="pficon pficon-ok list-view-pf-icon-md list-view-pf-icon-success"></span>
412
- </div>
413
- <div class="list-view-pf-body">
414
- <div class="list-view-pf-description">
415
- <div class="list-group-item-heading">
416
- Event One
417
- </div>
418
- <div class="list-group-item-text">
419
- The following snippet of text is <a href="#">rendered as link text</a>.
420
- </div>
421
- </div>
422
- <div class="list-view-pf-additional-info">
423
461
  <div class="list-view-pf-additional-info-item">
424
- <span class="pficon pficon-screen"></span>
425
- <strong>108</strong> Hosts
462
+ <span class="pficon pficon-container-node"></span>
463
+ <strong>10</strong> Nodes
426
464
  </div>
427
465
  <div class="list-view-pf-additional-info-item">
428
- <span class="pficon pficon-cluster"></span>
429
- <strong>28</strong> Clusters
466
+ <span class="pficon pficon-image"></span>
467
+ <strong>6</strong> Images
430
468
  </div>
431
469
  </div>
432
470
  </div>
433
471
  </div>
434
472
  </div>
435
473
  <div class="list-group-item">
436
- <div class="list-view-pf-main-info">
437
- <div class="list-view-pf-left">
438
- <span class="pficon pficon-info list-view-pf-icon-md list-view-pf-icon-info"></span>
439
- </div>
440
- <div class="list-view-pf-body">
441
- <div class="list-view-pf-description">
442
- <div class="list-group-item-heading">
443
- Event One
444
- </div>
445
- <div class="list-group-item-text">
446
- The following snippet of text is <a href="#">rendered as link text</a>.
447
- </div>
448
- </div>
449
- <div class="list-view-pf-additional-info">
450
- <div class="list-view-pf-additional-info-item">
451
- <span class="pficon pficon-screen"></span>
452
- <strong>8</strong> Hosts
453
- </div>
454
- <div class="list-view-pf-additional-info-item">
455
- <span class="pficon pficon-cluster"></span>
456
- <strong>28</strong> Clusters
457
- </div>
458
- </div>
459
- </div>
474
+ <div class="list-view-pf-checkbox">
475
+ <input type="checkbox">
476
+ </div>
477
+ <div class="list-view-pf-actions">
478
+ <button class="btn btn-default">Action</button>
479
+ <div class="dropdown pull-right dropdown-kebab-pf">
480
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
481
+ <span class="fa fa-ellipsis-v"></span>
482
+ </button>
483
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
484
+ <li><a href="#">Action</a></li>
485
+ <li><a href="#">Another action</a></li>
486
+ <li><a href="#">Something else here</a></li>
487
+ <li role="separator" class="divider"></li>
488
+ <li><a href="#">Separated link</a></li>
489
+ </ul>
490
+ </div>
491
+
460
492
  </div>
461
- </div>
462
- <div class="list-group-item">
463
493
  <div class="list-view-pf-main-info">
464
494
  <div class="list-view-pf-left">
465
- <span class="pficon pficon-warning-triangle-o list-view-pf-icon-md list-view-pf-icon-warning"></span>
495
+ <span class="fa fa-briefcase list-view-pf-icon-sm"></span>
466
496
  </div>
467
497
  <div class="list-view-pf-body">
468
498
  <div class="list-view-pf-description">
469
499
  <div class="list-group-item-heading">
470
- Event One
500
+ Event Five
471
501
  </div>
472
502
  <div class="list-group-item-text">
473
503
  The following snippet of text is <a href="#">rendered as link text</a>.
@@ -476,66 +506,35 @@
476
506
  <div class="list-view-pf-additional-info">
477
507
  <div class="list-view-pf-additional-info-item">
478
508
  <span class="pficon pficon-screen"></span>
479
- <strong>108</strong> Hosts
509
+ <strong>4</strong> Hosts
480
510
  </div>
481
511
  <div class="list-view-pf-additional-info-item">
482
512
  <span class="pficon pficon-cluster"></span>
483
- <strong>28</strong> Clusters
484
- </div>
485
- </div>
486
- </div>
487
- </div>
488
- </div>
489
- <div class="list-group-item">
490
- <div class="list-view-pf-main-info">
491
- <div class="list-view-pf-left">
492
- <span class="pficon pficon-error-circle-o list-view-pf-icon-md list-view-pf-icon-danger"></span>
493
- </div>
494
- <div class="list-view-pf-body">
495
- <div class="list-view-pf-description">
496
- <div class="list-group-item-heading">
497
- Event One
498
- </div>
499
- <div class="list-group-item-text">
500
- The following snippet of text is <a href="#">rendered as link text</a>.
513
+ <strong>2</strong> Clusters
501
514
  </div>
502
- </div>
503
- <div class="list-view-pf-additional-info">
504
515
  <div class="list-view-pf-additional-info-item">
505
- <span class="pficon pficon-screen"></span>
506
- <strong>8</strong> Hosts
516
+ <span class="pficon pficon-container-node"></span>
517
+ <strong>10</strong> Nodes
507
518
  </div>
508
519
  <div class="list-view-pf-additional-info-item">
509
- <span class="pficon pficon-cluster"></span>
510
- <strong>28</strong> Clusters
520
+ <span class="pficon pficon-image"></span>
521
+ <strong>6</strong> Images
511
522
  </div>
512
523
  </div>
513
524
  </div>
514
525
  </div>
515
526
  </div>
516
- </div>
517
- <script>
518
- // Equalize column width
519
- $(document).ready(function () {
520
- var widest = 0;
521
- $('.list-view-pf-equalized-column .list-view-pf-additional-info-item').each( function() {
522
- widest = $(this).width() > widest ? $(this).width() : widest;
523
- }).width(widest);
524
- });
525
- </script>
526
- <div class="list-group list-view-pf">
527
- <div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
527
+ <div class="list-group-item">
528
528
  <div class="list-view-pf-checkbox">
529
529
  <input type="checkbox">
530
530
  </div>
531
531
  <div class="list-view-pf-actions">
532
- <button class="btn btn-default">Action</button>
533
532
  <button class="btn btn-default">Action</button>
534
533
  <div class="dropdown pull-right dropdown-kebab-pf">
535
- <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
534
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
536
535
  <span class="fa fa-ellipsis-v"></span>
537
536
  </button>
538
- <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight4">
537
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
539
538
  <li><a href="#">Action</a></li>
540
539
  <li><a href="#">Another action</a></li>
541
540
  <li><a href="#">Something else here</a></li>
@@ -547,28 +546,33 @@
547
546
  </div>
548
547
  <div class="list-view-pf-main-info">
549
548
  <div class="list-view-pf-left">
550
- <span class="fa fa-plane list-view-pf-icon-sm"></span>
549
+ <span class="fa fa-coffee list-view-pf-icon-sm"></span>
551
550
  </div>
552
551
  <div class="list-view-pf-body">
553
552
  <div class="list-view-pf-description">
554
553
  <div class="list-group-item-heading">
555
- Event One
554
+ Event Six
556
555
  </div>
557
556
  <div class="list-group-item-text">
558
557
  The following snippet of text is <a href="#">rendered as link text</a>.
559
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
560
558
  </div>
561
559
  </div>
562
560
  <div class="list-view-pf-additional-info">
563
561
  <div class="list-view-pf-additional-info-item">
564
- <img src="http://placehold.it/60x60" alt="placeholder image">
562
+ <span class="pficon pficon-screen"></span>
563
+ <strong>4</strong> Hosts
565
564
  </div>
566
565
  <div class="list-view-pf-additional-info-item">
567
566
  <span class="pficon pficon-cluster"></span>
568
- <strong>8</strong> Clusters
567
+ <strong>2</strong> Clusters
569
568
  </div>
570
- <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
571
- <strong>35%</strong> Service Two
569
+ <div class="list-view-pf-additional-info-item">
570
+ <span class="pficon pficon-container-node"></span>
571
+ <strong>10</strong> Nodes
572
+ </div>
573
+ <div class="list-view-pf-additional-info-item">
574
+ <span class="pficon pficon-image"></span>
575
+ <strong>6</strong> Images
572
576
  </div>
573
577
  </div>
574
578
  </div>
@@ -587,6 +591,7 @@
587
591
  });
588
592
  });
589
593
  </script>
590
- </div><!-- /container -->
594
+ </div>
595
+
591
596
  </body>
592
597
  </html>