patternfly-sass 3.3.3 → 3.3.4

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