Skip to content

Commit ec21029

Browse files
priley86priley86
authored
Merge pull request jonmiles#358 from cardosogabriel/PTNFLY-1051
PTNFLY-1051 Card View implementation.
2 parents f4769a9 + b115858 commit ec21029

13 files changed

Lines changed: 347 additions & 2 deletions

‎less/card-view.less‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
//
2+
// Card View
3+
// --------------------------------------------------
4+
5+
.card-pf-view {
6+
border: 2px solid transparent;
7+
.card-pf-heading-kebab {
8+
.dropdown-kebab-pf {
9+
margin-left: 10px;
10+
margin-top: -3px;
11+
}
12+
+ .progress-pf-legend {
13+
p { margin-bottom: 0; }
14+
.progress {
15+
margin-bottom: 7px;
16+
margin-top: 16px;
17+
}
18+
}
19+
}
20+
.card-pf-info {
21+
margin-top: 15px;
22+
strong {
23+
font-size: ceil((@font-size-base + 1));
24+
margin-right: 10px;
25+
}
26+
}
27+
.card-pf-item {
28+
display: inline-block;
29+
font-size: @font-size-h3;
30+
padding: 0 13px 0 15px;
31+
&:first-child { padding-left: 0; }
32+
&:last-child { padding-right: 0; }
33+
+ .card-pf-item { border-left: 1px solid @card-pf-border-color; }
34+
.fa-check { color: @brand-success; }
35+
.fa,
36+
.pficon {
37+
+ .card-pf-item-text { margin-left: 10px; }
38+
}
39+
}
40+
.card-pf-items { margin-top: 15px; }
41+
.card-pf-title {
42+
font-size: ceil((@font-size-base * 1.6666));
43+
font-weight: 300;
44+
margin-bottom: 0;
45+
margin-top: 15px;
46+
.fa,
47+
.pficon {
48+
font-size: ceil((@font-size-base * 1.5));
49+
margin-right: 2px;
50+
}
51+
.col-lg-2 & { font-size: @font-size-h3 }
52+
}
53+
.card-pf-top-element .card-pf-icon-circle {
54+
border: 2px solid @color-pf-blue-300;
55+
border-radius: 50%;
56+
display: block;
57+
font-size: 46px;
58+
height: 106px;
59+
line-height: 102px;
60+
margin: 0 auto;
61+
text-align: center;
62+
width: 106px;
63+
.col-lg-2 & {
64+
font-size: 23px;
65+
height: 54px;
66+
line-height: 50px;
67+
width: 54px;
68+
}
69+
}
70+
.card-pf-view-checkbox {
71+
position: absolute;
72+
top: 15px;
73+
left: 15px;
74+
input[type=checkbox] { display: none; }
75+
}
76+
&.card-pf-view-multi-select {
77+
.card-pf-view-checkbox {
78+
input[type=checkbox] {
79+
display: block;
80+
@media(min-width:@screen-sm-min) {
81+
visibility: hidden;
82+
&:checked { visibility: visible; }
83+
}
84+
}
85+
}
86+
&:hover .card-pf-view-checkbox input[type=checkbox] { visibility: visible; }
87+
}
88+
&.card-pf-view-select {
89+
position: relative;
90+
&:hover { .box-shadow(0 1px 6px fade(@color-pf-black, 35%)); }
91+
&.active { border: 2px solid @card-pf-selected-border-color; }
92+
}
93+
&.card-pf-view-single-select { cursor: pointer; }
94+
&.card-pf-view-xs {
95+
.card-pf-title {
96+
font-size: 16px;
97+
font-weight: normal;
98+
margin-bottom: 10px;
99+
.fa,
100+
.pficon {
101+
font-size: 14px;
102+
margin-right: 5px;
103+
}
104+
}
105+
}
106+
}

‎less/cards.less‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
}
6666

6767
.card-pf-body {
68-
margin: (@grid-gutter-width / 2) 0;
68+
margin: (@grid-gutter-width / 2) 0 0;
6969
padding: 0 0 (@grid-gutter-width / 2);
7070
.card-pf-aggregate-status & {
7171
margin-top: (@grid-gutter-width / 4);
@@ -224,6 +224,10 @@
224224

225225
.cards-pf {
226226
background: @card-pf-container-bg-color;
227+
.row-cards-pf {
228+
padding: 0 20px;
229+
&:first-child { padding-top: 20px; }
230+
}
227231
}
228232

229233
.container-cards-pf {

‎less/notifications-drawer.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
.drawer-pf {
77
background-color: @color-pf-black-100;
88
border: 1px solid @card-pf-border-color;
9-
.box-shadow(0 6px 12px rgba(0,0,0,.175));
9+
.box-shadow(0 6px 12px fade(@color-pf-black, 17.5%));
1010
overflow-y: auto;
1111
position: absolute;
1212
right: 0;

‎less/patternfly-additions.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
@import "bootstrap-touchspin.less";
3333
@import "bootstrap-treeview.less";
3434
@import "cards.less";
35+
@import "card-view.less";
3536
@import "charts.less";
3637
@import "close.less";
3738
@import "datatables.less";

‎less/variables.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
@card-pf-border-top-color: transparent;
1919
@card-pf-container-bg-color: @color-pf-black-150;
2020
@card-pf-footer-bg-color: @color-pf-black-100;
21+
@card-pf-selected-border-color: @color-pf-blue-300;
2122
@donut-font-size-big: 30px;
2223
@dropdown-divider-margin: 4px 1px;
2324
@dropdown-link-active-border-color: @color-pf-blue;

‎tests/pages/_includes/widgets/cards/object-status.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div class="card-pf card-pf-view card-pf-view-select {{include.class1}}">
2+
<div class="card-pf-body">
3+
<div class="card-pf-top-element">
4+
<span class="fa fa-birthday-cake card-pf-icon-circle"></span>
5+
</div>
6+
<h2 class="card-pf-title text-center">
7+
Cake Service
8+
</h2>
9+
<div class="card-pf-items text-center">
10+
<div class="card-pf-item">
11+
<span class="pficon pficon-screen"></span>
12+
<span class="card-pf-item-text">8</span>
13+
</div>
14+
<div class="card-pf-item">
15+
<span class="fa fa-check"></span>
16+
</div>
17+
</div>
18+
<p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
19+
</div>
20+
<div class="card-pf-view-checkbox">
21+
<input type="checkbox">
22+
</div>
23+
</div>

‎tests/pages/_includes/widgets/cards/status-inline-actions-xs.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div class="card-pf card-pf-view card-pf-view-xs">
2+
<div class="card-pf-body">
3+
<div class="card-pf-heading-kebab">
4+
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropupKebabRight" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
5+
<h2 class="card-pf-title">
6+
<span class="pficon pficon-cluster"></span> Storage_1
7+
</h2>
8+
</div>
9+
<div class="progress-pf-legend">
10+
{% include widgets/charts/utilization-bar.html id="utilizationBarChart" %}
11+
<p><span class="pficon pficon-warning-triangle-o"></span> <strong>10%</strong> in use</p>
12+
</div>
13+
</div>
14+
</div>

‎tests/pages/_includes/widgets/cards/summary-inline-actions-xs.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="card-pf card-pf-view card-pf-view-xs">
2+
<div class="card-pf-body">
3+
<div class="card-pf-heading-kebab">
4+
{% include widgets/kebab.html dropmenuType="dropup" dropmenuPosition="pull-right" dropmenuId="dropupKebabRight" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
5+
<h2 class="card-pf-title">
6+
<span class="pficon pficon-service"></span> Zone_1
7+
</h2>
8+
</div>
9+
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque. <a href="#">More info</a></p>
10+
</div>
11+
</div>

‎tests/pages/_includes/widgets/layouts/card-view-multi-select.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
{% include widgets/layouts/navbar-toolbar.html %}
2+
<div class="container-fluid container-cards-pf">
3+
<div class="row row-cards-pf">
4+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
5+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
6+
</div>
7+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
8+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
9+
</div>
10+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
11+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
12+
</div>
13+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
14+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
15+
</div>
16+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
17+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
18+
</div>
19+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
20+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
21+
</div>
22+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
23+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
24+
</div>
25+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
26+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
27+
</div>
28+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
29+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
30+
</div>
31+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
32+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
33+
</div>
34+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
35+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
36+
</div>
37+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
38+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
39+
</div>
40+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
41+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
42+
</div>
43+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
44+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
45+
</div>
46+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
47+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
48+
</div>
49+
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
50+
{% include widgets/cards/object-status.html class1="card-pf-view-multi-select" %}
51+
</div>
52+
</div>
53+
</div>
54+
<script>
55+
$(function() {
56+
// matchHeight the contents of each .card-pf and then the .card-pf itself
57+
$(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
58+
});
59+
$(document).ready(function() {
60+
// Card Multi Select
61+
$('input[type=checkbox]').click(function() {
62+
if ($(this).parent().parent().hasClass('active'))
63+
{ $(this).parent().parent().removeClass('active'); }
64+
else
65+
{ $(this).parent().parent().addClass('active'); }
66+
});
67+
});
68+
</script>

‎tests/pages/_includes/widgets/layouts/card-view-single-select.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{% include widgets/layouts/navbar-toolbar.html %}
2+
<div class="container-fluid container-cards-pf">
3+
<div class="row row-cards-pf">
4+
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
5+
{% include widgets/cards/object-status.html class1="card-pf-view-single-select" %}
6+
</div>
7+
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
8+
{% include widgets/cards/object-status.html class1="card-pf-view-single-select" %}
9+
</div>
10+
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
11+
{% include widgets/cards/object-status.html class1="card-pf-view-single-select" %}
12+
</div>
13+
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
14+
{% include widgets/cards/object-status.html class1="card-pf-view-single-select" %}
15+
</div>
16+
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
17+
{% include widgets/cards/object-status.html class1="card-pf-view-single-select" %}
18+
</div>
19+
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
20+
{% include widgets/cards/object-status.html class1="card-pf-view-single-select" %}
21+
</div>
22+
</div>
23+
</div>
24+
<script>
25+
$(function() {
26+
// matchHeight the contents of each .card-pf and then the .card-pf itself
27+
$(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
28+
});
29+
$(document).ready(function() {
30+
// Card Single Select
31+
$('.card-pf-view-single-select').click(function() {
32+
if ($(this).hasClass('active'))
33+
{ $(this).removeClass('active'); }
34+
else
35+
{ $('.card-pf-view-single-select').removeClass('active'); $(this).addClass('active'); }
36+
});
37+
});
38+
</script>

0 commit comments

Comments
 (0)