Skip to content

Commit 80ddc03

Browse files
amarie401amarie401
authored
Merge pull request #5 from jeff-phillips-18/amarie401-pf-cards-loading
Updates to demo layout, fix loading spinner positioning for aggregate status cards
2 parents 5edb266 + 37df92d commit 80ddc03

File tree

3 files changed

+64
-30
lines changed

3 files changed

+64
-30
lines changed

‎src/card/aggregate-status/aggregate-status-card.component.js

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,11 @@
5151
<div class="row">
5252
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
5353
<label>With Top Border</label>
54-
<pf-aggregate-status-card status="status" show-top-border="true"></pf-aggregate-status-card>
54+
<pf-aggregate-status-card status="status" show-top-border="true" show-spinner="dataLoading" spinner-text="Loading" spinner-card-height="90"></pf-aggregate-status-card>
5555
</div>
5656
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
5757
<label>No Top Border</label>
58-
<pf-aggregate-status-card status="status"></pf-aggregate-status-card>
58+
<pf-aggregate-status-card status="status2"></pf-aggregate-status-card>
5959
</div>
6060
</div>
6161
<div class="row">
@@ -80,7 +80,7 @@
8080
<label>Loading State</label>
8181
<br>
8282
<br>
83-
<pf-aggregate-status-card status="aggStatusAlt2" spinner-card-height="150" show-top-border="true" show-spinner="dataLoading" spinner-text="Loading" layout="tall"></pf-aggregate-status-card>
83+
<pf-aggregate-status-card status="aggStatusAlt2" spinner-card-height="140" show-top-border="true" show-spinner="dataLoading" spinner-text="Loading" layout="tall"></pf-aggregate-status-card>
8484
</div>
8585
</div>
8686
</div>
@@ -94,22 +94,28 @@
9494
9595
$scope.status = {
9696
"title":"Nodes",
97-
"count":793,
9897
"href":"#",
9998
"iconClass": "fa fa-shield",
100-
"notifications":[
101-
{
102-
"iconClass":"pficon pficon-error-circle-o",
103-
"count":4,
104-
"href":"#"
105-
},
106-
{
107-
"iconClass":"pficon pficon-warning-triangle-o",
108-
"count":1
109-
}
110-
]
99+
"notifications":[]
111100
};
112101
102+
$scope.status2 = {
103+
"title":"Nodes",
104+
"count":793,
105+
"href":"#",
106+
"iconClass": "fa fa-shield",
107+
"notifications":[
108+
{
109+
"iconClass":"pficon pficon-error-circle-o",
110+
"count":4,
111+
"href":"#"
112+
},
113+
{
114+
"iconClass":"pficon pficon-warning-triangle-o",
115+
"count":1
116+
}
117+
]
118+
};
113119
$scope.aggStatusAlt = {
114120
"title":"Providers",
115121
"count":3,
@@ -135,6 +141,24 @@
135141
$timeout(function () {
136142
$scope.dataLoading = false;
137143
144+
$scope.status = {
145+
"title":"Nodes",
146+
"count":793,
147+
"href":"#",
148+
"iconClass": "fa fa-shield",
149+
"notifications":[
150+
{
151+
"iconClass":"pficon pficon-error-circle-o",
152+
"count":4,
153+
"href":"#"
154+
},
155+
{
156+
"iconClass":"pficon pficon-warning-triangle-o",
157+
"count":1
158+
}
159+
]
160+
};
161+
138162
$scope.aggStatusAlt2 = {
139163
"title":"Providers",
140164
"count":3,
@@ -151,7 +175,7 @@
151175
}
152176
]
153177
};
154-
}, 6000 );
178+
}, 6000000 );
155179
156180
$scope.miniAggStatus = {
157181
"iconClass":"pficon pficon-container-node",

‎src/card/card.less

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@
2929
}
3030
}
3131

32+
.card-pf.card-pf-aggregate-status .card-pf-body .spinner-container {
33+
position: static;
34+
}
35+
3236
.card-pf {
3337
.hide-for-spinner {
3438
opacity: 0;
@@ -131,7 +135,6 @@
131135

132136
.card-pf-info-status {
133137
display: flex;
134-
margin: 0 10px;
135138
.card-pf-info-image {
136139
display: flex;
137140
align-items: center;

‎src/card/info-status/info-status-card.component.js

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,26 @@
2424
<example module="patternfly.card">
2525
2626
<file name="index.html">
27-
<div ng-controller="CardDemoCtrl" style="display:inline-block;">
28-
<div class="col-md-10">
29-
<label>With Top Border, Icon Class, Href</label>
30-
<pf-info-status-card status="infoStatus" show-top-border="true"></pf-info-status-card>
31-
<br/>
32-
<label>No Top Border, Icon Image, No Title</label>
33-
<pf-info-status-card status="infoStatusTitless"></pf-info-status-card>
34-
<br/>
35-
<label>With HTML</label>
36-
<pf-info-status-card status="infoStatusAlt" html-content="true" show-spinner="dataLoading" spinner-card-height="122" spinner-text="Loading"></pf-info-status-card>
37-
<br/>
38-
<label>Loading State</label>
39-
<pf-info-status-card status="infoStatus2" show-top-border="true" spinner-card-height="122" show-spinner="dataLoading" spinner-text="Loading"></pf-info-status-card>
27+
<div ng-controller="CardDemoCtrl" class="container-fluid">
28+
<div class="row">
29+
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
30+
<label>With Top Border, Icon Class, Href</label>
31+
<pf-info-status-card status="infoStatus" show-top-border="true"></pf-info-status-card>
32+
</div>
33+
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
34+
<label>No Top Border, Icon Image, No Title</label>
35+
<pf-info-status-card status="infoStatusTitless"></pf-info-status-card>
36+
</div>
37+
</div>
38+
<div class="row">
39+
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
40+
<label>With HTML</label>
41+
<pf-info-status-card status="infoStatusAlt" html-content="true" show-spinner="dataLoading" spinner-card-height="145" spinner-text="Loading"></pf-info-status-card>
42+
</div>
43+
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
44+
<label>Loading State</label>
45+
<pf-info-status-card status="infoStatus2" show-top-border="true" spinner-card-height="165" show-spinner="dataLoading" spinner-text="Loading"></pf-info-status-card>
46+
</div>
4047
</div>
4148
</div>
4249
</file>

0 commit comments

Comments
 (0)