JBDS-4328 Move 'Detection is in progress' indicator in the middle of the screen

Author: sudhirverma

browser/app.css

@@ -248,6 +248,23 @@ footer {
               transition: opacity 0.25s, width 0.25s;
             }
 
+            .spinner.spinner-bgcolour{
+              animation: rotation 600ms infinite linear;
+              border-bottom: 4px solid rgba(3, 3, 3, 0.25);
+              border-left: 4px solid rgba(3, 3, 3, 0.25);
+              border-right: 4px solid rgba(3, 3, 3, 0.25);
+              border-radius: 100%;
+              border-top: 4px solid #00659c;
+              margin: 0 auto;
+              position: relative;
+            }
+
+            .spinner.spinner-lg {
+              border-width: 15px;
+              height: 120px;
+              width: 120px;
+            }
+
             .has-spinner.active {
               cursor:progress;
             }
@@ -421,6 +438,23 @@ footer {
     font-size: 16px;
   }
 
+  .centered {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    margin-top: -50px;
+    margin-left: -50px;
+  }
+
+  .detection-msg {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    margin-top: 70px;
+    margin-left: -269px;
+    color: #000000;
+  }
+
     .installation-note .med-spinner {
       width: 16px;
       height: 16px;

browser/pages/confirm/confirm.html

@@ -4,18 +4,23 @@
 </header>
 
 <main class="col-sm-12 bottom-spacer" >
-  <p id="detection-info" class="installation-note has-spinner" ng-class="{'active':confCtrl.isDisabled}">
-    <span class="spinner spinner-xs spinner-inline"><i class="icon-spin icon-refresh"></i></span>
-    <span class="pficon-info" ng-show="!confCtrl.isDisabled && confCtrl.numberOfExistingInstallations>0"></span>
-      {{confCtrl.installedSearchNote}}
-    <br ng-show="!confCtrl.isDisabled && confCtrl.numberOfExistingInstallations>0">
-    <span id="instructions" class="installation-instruction" ng-show="!confCtrl.isDisabled">
-      Select the components to install
-    </span>
-  </p>
 
   <form name="confirmForm" id="confirmForm" class="form-horizontal" ng-submit="confCtrl.install()" ng-class="{'is-disabled':confCtrl.isDisabled}">
 
+    <div class="centered has-spinner" ng-class="{'active':confCtrl.isDisabled}">
+      <span class="spinner spinner-lg spinner-inline spinner-bgcolour"><i class="icon-spin icon-refresh"></i></span>
+    </div>
+    <p id="detection-info" class="installation-note has-spinner" ng-class="{'active':confCtrl.isDisabled}">
+      <div class="detection-msg">
+        <span class="pficon-info" ng-show="!confCtrl.isDisabled && confCtrl.numberOfExistingInstallations>0"></span>
+          <h2><strong>{{confCtrl.installedSearchNote}}</strong></h2>
+      </div>
+      <br ng-show="!confCtrl.isDisabled && confCtrl.numberOfExistingInstallations>0">
+      <span id="instructions" class="installation-instruction" ng-show="!confCtrl.isDisabled">
+        Select the components to install
+      </span>
+    </p>
+
     <!-- devstudio -->
     <div id="devstudio-panel" class="panel panel-default panel2pxborder" ng-hide="checkboxModel.devstudio === undefined" ng-class="{'zero-border':checkboxModel.devstudio.hasOption('detected')}">
       <div id="devstudio-panel-heading" class="panel-heading panel-normal"