Center Spinner for infoStatusCard

Author: dtaylor113

src/card/card.less

@@ -64,6 +64,14 @@
   }
 }
 
+.card-pf-info-status .card-pf-body .spinner-container{
+  top: 0px;
+  height: 100%;
+  &.with-title {
+    top: 12px;
+  }
+}
+
 .card-pf-aggregate-status-mini {
   .card-pf-body {
     &.show-spinner {

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

@@ -33,10 +33,10 @@
        <pf-info-status-card status="infoStatusTitless"></pf-info-status-card>
        <br/>
        <label>With HTML</label>
-       <pf-info-status-card status="infoStatusAlt" html-content="true"></pf-info-status-card>
+       <pf-info-status-card status="infoStatusAlt" html-content="true" show-spinner="dataLoading" spinner-card-height="122" spinner-text="Loading"></pf-info-status-card>
        <br/>
        <label>Loading State</label>
-       <pf-info-status-card status="infoStatus2" spinner-card-height="200" show-top-border="true" show-spinner="dataLoading" spinner-text="Loading"></pf-info-status-card>
+       <pf-info-status-card status="infoStatus2" show-top-border="true" spinner-card-height="122" show-spinner="dataLoading" spinner-text="Loading"></pf-info-status-card>
      </div>
    </div>
  </file>
@@ -59,6 +59,23 @@
       ]
     };
 
+    $scope.infoStatus2 = {
+        "title":"TinyCore-local",
+        "iconClass": "fa fa-shield",
+    };
+
+    $scope.infoStatusTitless = {
+      "iconImage": imagePath + "/OpenShift-logo.svg",
+      "info":[
+        "Infastructure: VMware",
+        "Vmware: 1 CPU (1 socket x 1 core), 1024 MB",
+        "12 Snapshots",
+        "Drift History: 1"
+        ]
+    };
+
+    $scope.infoStatusAlt = {};
+
     $timeout(function () {
       $scope.dataLoading = false;
 
@@ -73,27 +90,17 @@
           "Power status: on"
         ]
       };
-    }, 6000 );
 
-    $scope.infoStatusTitless = {
-      "iconImage": imagePath + "/OpenShift-logo.svg",
-      "info":[
-        "Infastructure: VMware",
-        "Vmware: 1 CPU (1 socket x 1 core), 1024 MB",
-        "12 Snapshots",
-        "Drift History: 1"
+      $scope.infoStatusAlt = {
+        "title":"Favorite Things",
+        "iconClass":"fa fa-heart",
+        "info":[
+          "<i class='fa fa-coffee'>",
+          "<i class='fa fa-motorcycle'>",
+          "<b>Tacos</b>"
         ]
-    };
-
-    $scope.infoStatusAlt = {
-      "title":"Favorite Things",
-      "iconClass":"fa fa-heart",
-      "info":[
-        "<i class='fa fa-coffee'>",
-        "<i class='fa fa-motorcycle'>",
-        "<b>Tacos</b>"
-      ]
-    };
+      };
+    }, 6000 );
    });
  </file>
 

src/card/info-status/info-status-card.html

@@ -1,19 +1,10 @@
 <div class="card-pf card-pf-info-status" ng-class="{'card-pf-accented': $ctrl.shouldShowTopBorder}">
-  <div ng-if="$ctrl.showSpinner" class="card-pf-body show-spinner" ng-style="$ctrl.showSpinner ? $ctrl.spinnerHeight : {}">
-    <div class="spinner-container">
-      <div class="loading-indicator">
-        <span class="spinner spinner-lg" aria-hidden="true"></span>
-        <span ng-if="$ctrl.spinnerText" class="loading-text">{{$ctrl.spinnerText}}</span>
-        <label ng-if="!$ctrl.spinnerText" class="sr-only">Loading</label>
-      </div>
-    </div>
-  </div>
-  <div ng-if="!$ctrl.showSpinner" class="card-pf-info-image">
+  <div class="card-pf-info-image" ng-if="$ctrl.status.iconImage || $ctrl.status.iconClass">
     <img ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt=""
          class="info-img"/>
     <span class="info-icon {{$ctrl.status.iconClass}}"></span>
   </div>
-  <div ng-if="!$ctrl.showSpinner" class="card-pf-info-content card-pf-body" ng-class="{'show-spinner': $ctrl.showSpinner}">
+  <div class="card-pf-info-content card-pf-body" ng-class="{'show-spinner': $ctrl.showSpinner}" ng-style="$ctrl.showSpinner ? $ctrl.spinnerHeight : {}">
     <h2 class="card-pf-title" ng-if="$ctrl.status.title">
       <a href="{{$ctrl.status.href}}" ng-if="$ctrl.status.href">
         <span class="">{{$ctrl.status.title}}</span>
@@ -22,9 +13,18 @@ <h2 class="card-pf-title" ng-if="$ctrl.status.title">
         <span class="">{{$ctrl.status.title}}</span>
       </span>
     </h2>
-    <div ng-if="$ctrl.shouldShowHtmlContent" class="card-pf-info-item" ng-bind-html="$ctrl.trustAsHtml(item)"
-         ng-repeat="item in $ctrl.status.info track by $index"></div>
-    <div ng-if="!$ctrl.shouldShowHtmlContent" class="card-pf-info-item" ng-bind="item"
-         ng-repeat="item in $ctrl.status.info track by $index"></div>
+    <div ng-if="$ctrl.showSpinner" class="spinner-container" ng-class="{'with-title' : $ctrl.status.title}">
+      <div class="loading-indicator">
+        <span class="spinner spinner-lg" aria-hidden="true"></span>
+        <span ng-if="$ctrl.spinnerText" class="loading-text">{{$ctrl.spinnerText}}</span>
+        <label ng-if="!$ctrl.spinnerText" class="sr-only">Loading</label>
+      </div>
+    </div>
+    <span ng-if="!$ctrl.showSpinner">
+      <div ng-if="$ctrl.shouldShowHtmlContent" class="card-pf-info-item" ng-bind-html="$ctrl.trustAsHtml(item)"
+           ng-repeat="item in $ctrl.status.info track by $index"></div>
+      <div ng-if="!$ctrl.shouldShowHtmlContent" class="card-pf-info-item" ng-bind="item"
+           ng-repeat="item in $ctrl.status.info track by $index"></div>
+    </span>
   </div>
 </div>