patternfly-sass 3.3.3 → 3.3.4

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 (21) hide show
  1. checksums.yaml +4 -4
  2. data/assets/javascripts/patternfly.js +5 -5
  3. data/assets/javascripts/patternfly.min.js +1 -1
  4. data/bower.json +2 -2
  5. data/lib/patternfly-sass/version.rb +2 -2
  6. data/spec/html/area-charts.html +50 -40
  7. data/spec/html/bar-charts.html +192 -131
  8. data/spec/html/cards.html +437 -418
  9. data/spec/html/donut-charts.html +165 -131
  10. data/spec/html/index.html +3 -0
  11. data/spec/html/layout-alt-fixed-inner-scroll.html +437 -418
  12. data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +437 -418
  13. data/spec/html/layout-alt-fixed-with-footer.html +437 -418
  14. data/spec/html/layout-alt-fixed.html +437 -418
  15. data/spec/html/line-charts.html +120 -86
  16. data/spec/html/list-view.html +128 -95
  17. data/spec/html/pie-charts.html +107 -78
  18. data/spec/html/utilization-bar-charts.html +69 -0
  19. data/spec/html/vertical-navigation-without-icons.html +205 -205
  20. data/spec/html/vertical-navigation.html +205 -205
  21. metadata +4 -2
data/spec/html/line-charts.html CHANGED
@@ -43,101 +43,135 @@
43
43
  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>, <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://c3js.org/">http://c3js.org/</a>
44
44
  </div>
45
45
  <hr>
46
- <h2>Sparkline</h2>
47
- <div class="row">
48
- <div class="col-md-4">
49
- <div class="chart-pf-sparkline" id="sparklineChart"></div>
50
- <div>Less than one year remaining</div>
51
- </div>
52
- </div>
53
- <h2>Line Chart</h2>
54
- <div class="row">
55
- <div class="col-lg-6 col-sm-12">
56
- <div id="lineChart" class="line-chart-pf"></div>
57
- </div>
58
- </div>
59
- <h2>Single Line Chart</h2>
60
- <div class="row">
61
- <div class="col-lg-6 col-sm-12">
62
- <div id="singleLineChart" class="line-chart-pf"></div>
63
- </div>
64
- </div>
65
- <h2>Spline Chart</h2>
66
- <div class="row">
67
- <div class="col-lg-6 col-sm-12">
68
- <div id="splineChart" class="line-chart-pf"></div>
69
- </div>
70
- </div>
71
- <h2>Single Spline Chart</h2>
72
- <div class="row">
73
- <div class="col-lg-6 col-sm-12">
74
- <div id="singleSplineChart" class="line-chart-pf"></div>
75
- </div>
76
- </div>
77
- <script>
46
+ <h2>Sparkline</h2>
47
+ <div class="row">
48
+ <div class="col-md-4">
49
+ <div id="sparklineChart" class="chart-pf-sparkline"></div>
50
+ <div>Less than one year remaining</div>
51
+ <script>
52
+ var c3ChartDefaults = $().c3ChartDefaults();
53
+ var sparklineChartConfig = c3ChartDefaults.getDefaultSparklineConfig();
54
+ sparklineChartConfig.bindto = '#sparklineChart';
55
+ sparklineChartConfig.data = {
56
+ columns: [
57
+ ['%', 10, 14, 12, 20, 31, 27, 44, 36, 52, 55, 62, 68, 69, 88, 74, 88, 91],
58
+ ],
59
+ type: 'area'
60
+ };
61
+ var sparklineChart = c3.generate(sparklineChartConfig);
62
+ </script>
78
63
 
79
- var c3ChartDefaults = $().c3ChartDefaults();
64
+ </div>
65
+ </div>
66
+ <h2>Line Chart</h2>
67
+ <div class="row">
68
+ <div class="col-lg-6 col-sm-12">
69
+ <div id="lineChart" class="line-chart-pf"></div>
70
+ <script>
71
+ var lineChartDataColumns = [
72
+ ['data1', 30, 200, 100, 400, 150, 250],
73
+ ['data2', 50, 220, 310, 240, 115, 25],
74
+ ['data3', 70, 100, 390, 295, 170, 220],
75
+ ['data4', 10, 340, 30, 290, 35, 20],
76
+ ['data5', 90, 150, 160, 165, 180, 5]
77
+ ];
78
+ var singleLineChartDataColumns = [
79
+ ['data1', 30, 200, 100, 400, 150, 250]
80
+ ];
80
81
 
81
- // Sparkline Chart
82
- var sparklineChartConfig = c3ChartDefaults.getDefaultSparklineConfig();
83
- sparklineChartConfig.bindto = '#sparklineChart';
84
- sparklineChartConfig.data = {
85
- columns: [
86
- ['%', 10, 14, 12, 20, 31, 27, 44, 36, 52, 55, 62, 68, 69, 88, 74, 88, 91],
87
- ],
88
- type: 'area'
89
- };
90
- var sparklineChart = c3.generate(sparklineChartConfig);
82
+ var c3ChartDefaults = $().c3ChartDefaults();
83
+ var lineChartConfig = c3ChartDefaults.getDefaultLineConfig();
84
+ lineChartConfig.bindto = '#lineChart';
85
+ lineChartConfig.data = {
86
+ columns: lineChartDataColumns,
87
+ type: 'line'
88
+ };
89
+ var lineChart = c3.generate(lineChartConfig);
90
+ </script>
91
91
 
92
+ </div>
93
+ </div>
94
+ <h2>Single Line Chart</h2>
95
+ <div class="row">
96
+ <div class="col-lg-6 col-sm-12">
97
+ <div id="singleLineChart" class="line-chart-pf"></div>
98
+ <script>
99
+ var lineChartDataColumns = [
100
+ ['data1', 30, 200, 100, 400, 150, 250],
101
+ ['data2', 50, 220, 310, 240, 115, 25],
102
+ ['data3', 70, 100, 390, 295, 170, 220],
103
+ ['data4', 10, 340, 30, 290, 35, 20],
104
+ ['data5', 90, 150, 160, 165, 180, 5]
105
+ ];
106
+ var singleLineChartDataColumns = [
107
+ ['data1', 30, 200, 100, 400, 150, 250]
108
+ ];
92
109
 
93
- var lineChartDataColumns = [
94
- ['data1', 30, 200, 100, 400, 150, 250],
95
- ['data2', 50, 220, 310, 240, 115, 25],
96
- ['data3', 70, 100, 390, 295, 170, 220],
97
- ['data4', 10, 340, 30, 290, 35, 20],
98
- ['data5', 90, 150, 160, 165, 180, 5]
99
- ];
100
- var singleLineChartDataColumns = [
101
- ['data1', 30, 200, 100, 400, 150, 250]
102
- ];
110
+ var singleLineChartConfig = c3ChartDefaults.getDefaultSingleLineConfig();
111
+ singleLineChartConfig.bindto = '#singleLineChart';
112
+ singleLineChartConfig.data = {
113
+ columns: singleLineChartDataColumns,
114
+ type: 'line'
115
+ };
116
+ var singleLineChart = c3.generate(singleLineChartConfig);
117
+ </script>
103
118
 
104
- // Line Chart
105
- var lineChartConfig = c3ChartDefaults.getDefaultLineConfig();
106
- lineChartConfig.bindto = '#lineChart';
107
- lineChartConfig.data = {
108
- columns: lineChartDataColumns,
109
- type: 'line'
110
- };
111
- var lineChart = c3.generate(lineChartConfig);
119
+ </div>
120
+ </div>
121
+ <h2>Spline Chart</h2>
122
+ <div class="row">
123
+ <div class="col-lg-6 col-sm-12">
124
+ <div id="splineChart" class="line-chart-pf"></div>
125
+ <script>
126
+ var lineChartDataColumns = [
127
+ ['data1', 30, 200, 100, 400, 150, 250],
128
+ ['data2', 50, 220, 310, 240, 115, 25],
129
+ ['data3', 70, 100, 390, 295, 170, 220],
130
+ ['data4', 10, 340, 30, 290, 35, 20],
131
+ ['data5', 90, 150, 160, 165, 180, 5]
132
+ ];
133
+ var singleLineChartDataColumns = [
134
+ ['data1', 30, 200, 100, 400, 150, 250]
135
+ ];
112
136
 
113
- // Single Line Chart
114
- var singleLineChartConfig = c3ChartDefaults.getDefaultSingleLineConfig();
115
- singleLineChartConfig.bindto = '#singleLineChart';
116
- singleLineChartConfig.data = {
117
- columns: singleLineChartDataColumns,
118
- type: 'line'
119
- };
120
- var singleLineChart = c3.generate(singleLineChartConfig);
137
+ var splineChartConfig = c3ChartDefaults.getDefaultLineConfig();
138
+ splineChartConfig.bindto = '#splineChart';
139
+ splineChartConfig.data = {
140
+ columns: lineChartDataColumns,
141
+ type: 'spline'
142
+ };
143
+ var splineChart = c3.generate(splineChartConfig);
144
+ </script>
121
145
 
122
- // Spline Chart
123
- var splineChartConfig = c3ChartDefaults.getDefaultLineConfig();
124
- splineChartConfig.bindto = '#splineChart';
125
- splineChartConfig.data = {
126
- columns: lineChartDataColumns,
127
- type: 'spline'
128
- };
129
- var splineChart = c3.generate(splineChartConfig);
146
+ </div>
147
+ </div>
148
+ <h2>Single Spline Chart</h2>
149
+ <div class="row">
150
+ <div class="col-lg-6 col-sm-12">
151
+ <div id="singleSplineChart" class="line-chart-pf"></div>
152
+ <script>
153
+ var lineChartDataColumns = [
154
+ ['data1', 30, 200, 100, 400, 150, 250],
155
+ ['data2', 50, 220, 310, 240, 115, 25],
156
+ ['data3', 70, 100, 390, 295, 170, 220],
157
+ ['data4', 10, 340, 30, 290, 35, 20],
158
+ ['data5', 90, 150, 160, 165, 180, 5]
159
+ ];
160
+ var singleLineChartDataColumns = [
161
+ ['data1', 30, 200, 100, 400, 150, 250]
162
+ ];
130
163
 
131
- // Single Spline Chart
132
- var singleSplineChartConfig = c3ChartDefaults.getDefaultSingleLineConfig();
133
- singleSplineChartConfig.bindto = '#singleSplineChart';
134
- singleSplineChartConfig.data = {
135
- columns: singleLineChartDataColumns,
136
- type: 'spline'
137
- };
138
- var singleSplineChart = c3.generate(singleSplineChartConfig);
164
+ var singleSplineChartConfig = c3ChartDefaults.getDefaultSingleLineConfig();
165
+ singleSplineChartConfig.bindto = '#singleSplineChart';
166
+ singleSplineChartConfig.data = {
167
+ columns: singleLineChartDataColumns,
168
+ type: 'spline'
169
+ };
170
+ var singleSplineChart = c3.generate(singleSplineChartConfig);
171
+ </script>
139
172
 
140
- </script>
173
+ </div>
174
+ </div>
141
175
 
142
176
  </div><!-- /container -->
143
177
  </body>
data/spec/html/list-view.html CHANGED
@@ -99,10 +99,20 @@
99
99
  </div>
100
100
  </div>
101
101
  </div>
102
-
102
+ <script>
103
+ // Row Checkbox Selection
104
+ $(document).ready(function () {
105
+ $("input[type='checkbox']").change(function (e) {
106
+ if ($(this).is(":checked")) {
107
+ $(this).closest('.list-group-item').addClass("active");
108
+ } else {
109
+ $(this).closest('.list-group-item').removeClass("active");
110
+ }
111
+ });
112
+ });
113
+ </script>
103
114
  <h2>Row Variations</h2>
104
115
  <div class="list-group list-view-pf">
105
-
106
116
  <div class="list-group-item list-view-pf-stacked">
107
117
  <div class="list-view-pf-actions">
108
118
  <button class="btn btn-default">Action</button>
@@ -151,7 +161,91 @@
151
161
  </div>
152
162
  </div>
153
163
  </div>
164
+ </div>
165
+ <script>
166
+ // Donut Charts
167
+ var c3ChartDefaults = $().c3ChartDefaults();
168
+ var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('34%');
169
+ customDonutChartConfig.size.height = 71;
170
+ customDonutChartConfig.donut.width = 5;
171
+ customDonutChartConfig.bindto = '#chart1';
172
+ customDonutChartConfig.data = {
173
+ type: "donut",
174
+ columns: [
175
+ ["Used", 34],
176
+ ["Available", 86]
177
+ ],
178
+ groups: [
179
+ ["used", "available"]
180
+ ],
181
+ order: null
182
+ };
183
+ c3.generate(customDonutChartConfig);
184
+ var donutChartTitle = d3.select("#chart1").select('text.c3-chart-arcs-title');
185
+ donutChartTitle.text("");
186
+ donutChartTitle.insert('tspan').text("34%").classed('list-view-donut-title', true);
187
+
188
+ customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('21%');
189
+ customDonutChartConfig.size.height = 71;
190
+ customDonutChartConfig.donut.width = 5;
191
+ customDonutChartConfig.bindto = '#chart2';
192
+ customDonutChartConfig.data = {
193
+ type: "donut",
194
+ columns: [
195
+ ["Used", 21],
196
+ ["Available", 79]
197
+ ],
198
+ groups: [
199
+ ["used", "available"]
200
+ ],
201
+ order: null
202
+ };
203
+ c3.generate(customDonutChartConfig);
204
+ donutChartTitle = d3.select("#chart2").select('text.c3-chart-arcs-title');
205
+ donutChartTitle.text("");
206
+ donutChartTitle.insert('tspan').text("21%").classed('list-view-donut-title', true);
207
+
208
+ customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('14%');
209
+ customDonutChartConfig.size.height = 71;
210
+ customDonutChartConfig.donut.width = 5;
211
+ customDonutChartConfig.bindto = '#chart3';
212
+ customDonutChartConfig.data = {
213
+ type: "donut",
214
+ columns: [
215
+ ["Used", 14],
216
+ ["Available", 86]
217
+ ],
218
+ groups: [
219
+ ["used", "available"]
220
+ ],
221
+ order: null
222
+ };
223
+ c3.generate(customDonutChartConfig);
224
+ donutChartTitle = d3.select("#chart3").select('text.c3-chart-arcs-title');
225
+ donutChartTitle.text("");
226
+ donutChartTitle.insert('tspan').text("14%").classed('list-view-donut-title', true);
154
227
 
228
+ customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('25%');
229
+ customDonutChartConfig.size.height = 71;
230
+ customDonutChartConfig.donut.width = 5;
231
+ customDonutChartConfig.bindto = '#chart4';
232
+ customDonutChartConfig.data = {
233
+ type: "donut",
234
+ columns: [
235
+ ["Used", 25],
236
+ ["Available", 75]
237
+ ],
238
+ groups: [
239
+ ["used", "available"]
240
+ ],
241
+ order: null
242
+ };
243
+ c3.generate(customDonutChartConfig);
244
+ donutChartTitle = d3.select("#chart4").select('text.c3-chart-arcs-title');
245
+ donutChartTitle.text("");
246
+ donutChartTitle.insert('tspan').text("25%").classed('list-view-donut-title', true);
247
+ </script>
248
+ <div class="list-group list-view-pf">
155
249
  <div class="list-group-item list-view-pf-stacked">
156
250
  <div class="list-view-pf-actions">
157
251
  <button class="btn btn-default">Action</button>
@@ -207,7 +301,8 @@
207
301
  </div>
208
302
  </div>
209
303
  </div>
210
-
304
+ </div>
305
+ <div class="list-group list-view-pf">
211
306
  <div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
212
307
  <div class="list-view-pf-checkbox">
213
308
  <input type="checkbox">
@@ -253,7 +348,20 @@
253
348
  </div>
254
349
  </div>
255
350
  </div>
256
-
351
+ </div>
352
+ <script>
353
+ // Row Checkbox Selection
354
+ $(document).ready(function () {
355
+ $("input[type='checkbox']").change(function (e) {
356
+ if ($(this).is(":checked")) {
357
+ $(this).closest('.list-group-item').addClass("active");
358
+ } else {
359
+ $(this).closest('.list-group-item').removeClass("active");
360
+ }
361
+ });
362
+ });
363
+ </script>
364
+ <div class="list-group list-view-pf">
257
365
  <div class="list-group-item">
258
366
  <div class="list-view-pf-checkbox">
259
367
  <input type="checkbox">
@@ -284,7 +392,20 @@
284
392
  </div>
285
393
  </div>
286
394
  </div>
287
-
395
+ </div>
396
+ <script>
397
+ // Row Checkbox Selection
398
+ $(document).ready(function () {
399
+ $("input[type='checkbox']").change(function (e) {
400
+ if ($(this).is(":checked")) {
401
+ $(this).closest('.list-group-item').addClass("active");
402
+ } else {
403
+ $(this).closest('.list-group-item').removeClass("active");
404
+ }
405
+ });
406
+ });
407
+ </script>
408
+ <div class="list-group list-view-pf">
288
409
  <div class="list-group-item">
289
410
  <div class="list-view-pf-main-info">
290
411
  <div class="list-view-pf-left">
@@ -312,7 +433,6 @@
312
433
  </div>
313
434
  </div>
314
435
  </div>
315
-
316
436
  <div class="list-group-item">
317
437
  <div class="list-view-pf-main-info">
318
438
  <div class="list-view-pf-left">
@@ -340,7 +460,6 @@
340
460
  </div>
341
461
  </div>
342
462
  </div>
343
-
344
463
  <div class="list-group-item">
345
464
  <div class="list-view-pf-main-info">
346
465
  <div class="list-view-pf-left">
@@ -368,7 +487,6 @@
368
487
  </div>
369
488
  </div>
370
489
  </div>
371
-
372
490
  <div class="list-group-item">
373
491
  <div class="list-view-pf-main-info">
374
492
  <div class="list-view-pf-left">
@@ -396,7 +514,8 @@
396
514
  </div>
397
515
  </div>
398
516
  </div>
399
-
517
+ </div>
518
+ <div class="list-group list-view-pf">
400
519
  <div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
401
520
  <div class="list-view-pf-checkbox">
402
521
  <input type="checkbox">
@@ -448,8 +567,6 @@
448
567
  </div>
449
568
  </div>
450
569
  </div>
451
-
452
-
453
570
  <script>
454
571
  // Row Checkbox Selection
455
572
  $(document).ready(function () {
@@ -461,91 +578,7 @@
461
578
  }
462
579
  });
463
580
  });
464
-
465
- // Donut Charts
466
- var c3ChartDefaults = $().c3ChartDefaults();
467
- var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('34%');
468
- customDonutChartConfig.size.height = 71;
469
- customDonutChartConfig.donut.width = 5;
470
- customDonutChartConfig.bindto = '#chart1';
471
- customDonutChartConfig.data = {
472
- type: "donut",
473
- columns: [
474
- ["Used", 34],
475
- ["Available", 86]
476
- ],
477
- groups: [
478
- ["used", "available"]
479
- ],
480
- order: null
481
- };
482
- c3.generate(customDonutChartConfig);
483
- var donutChartTitle = d3.select("#chart1").select('text.c3-chart-arcs-title');
484
- donutChartTitle.text("");
485
- donutChartTitle.insert('tspan').text("34%").classed('list-view-donut-title', true);
486
-
487
- customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('21%');
488
- customDonutChartConfig.size.height = 71;
489
- customDonutChartConfig.donut.width = 5;
490
- customDonutChartConfig.bindto = '#chart2';
491
- customDonutChartConfig.data = {
492
- type: "donut",
493
- columns: [
494
- ["Used", 21],
495
- ["Available", 79]
496
- ],
497
- groups: [
498
- ["used", "available"]
499
- ],
500
- order: null
501
- };
502
- c3.generate(customDonutChartConfig);
503
- donutChartTitle = d3.select("#chart2").select('text.c3-chart-arcs-title');
504
- donutChartTitle.text("");
505
- donutChartTitle.insert('tspan').text("21%").classed('list-view-donut-title', true);
506
-
507
- customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('14%');
508
- customDonutChartConfig.size.height = 71;
509
- customDonutChartConfig.donut.width = 5;
510
- customDonutChartConfig.bindto = '#chart3';
511
- customDonutChartConfig.data = {
512
- type: "donut",
513
- columns: [
514
- ["Used", 14],
515
- ["Available", 86]
516
- ],
517
- groups: [
518
- ["used", "available"]
519
- ],
520
- order: null
521
- };
522
- c3.generate(customDonutChartConfig);
523
- donutChartTitle = d3.select("#chart3").select('text.c3-chart-arcs-title');
524
- donutChartTitle.text("");
525
- donutChartTitle.insert('tspan').text("14%").classed('list-view-donut-title', true);
526
-
527
- customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('25%');
528
- customDonutChartConfig.size.height = 71;
529
- customDonutChartConfig.donut.width = 5;
530
- customDonutChartConfig.bindto = '#chart4';
531
- customDonutChartConfig.data = {
532
- type: "donut",
533
- columns: [
534
- ["Used", 25],
535
- ["Available", 75]
536
- ],
537
- groups: [
538
- ["used", "available"]
539
- ],
540
- order: null
541
- };
542
- c3.generate(customDonutChartConfig);
543
- donutChartTitle = d3.select("#chart4").select('text.c3-chart-arcs-title');
544
- donutChartTitle.text("");
545
- donutChartTitle.insert('tspan').text("25%").classed('list-view-donut-title', true);
546
-
547
581
  </script>
548
-
549
582
  </div><!-- /container -->
550
583
  </body>
551
584
  </html>