Display the detection indication over the form rather than in it

Author: jrichter1

browser/app.css

@@ -248,13 +248,13 @@ footer {
               transition: opacity 0.25s, width 0.25s;
             }
 
-            .spinner.spinner-bgcolour{
+            .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;
+              border-top: 4px solid #00a8e1;
               margin: 0 auto;
               position: relative;
             }

browser/pages/confirm/confirm.html

@@ -4,23 +4,17 @@
 </header>
 
 <main class="col-sm-12 bottom-spacer" >
+  <p class="installation-note has-spinner" ng-show="!confCtrl.isDisabled">
+    <span class="pficon-info" ng-show="confCtrl.numberOfExistingInstallations>0"></span>
+    {{confCtrl.installedSearchNote}}
+    <br ng-show="confCtrl.numberOfExistingInstallations>0">
+    <span id="instructions" class="installation-instruction">
+      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"
@@ -499,6 +493,15 @@ <h2><strong>{{confCtrl.installedSearchNote}}</strong></h2>
       </div>
     </div>
   </form>
+
+  <div  id="detection-info" class="centered has-spinner" ng-show="confCtrl.isDisabled" ng-class="{'active':confCtrl.isDisabled}">
+    <span class="spinner spinner-lg spinner-bgcolour spinner-inline"><i class="icon-spin icon-refresh"></i></span>
+    <p class="installation-note">
+      <div class="detection-msg">
+          <h2>{{confCtrl.installedSearchNote}}</h2>
+      </div>
+    </p>
+  </div>
 </main>
 
 <footer id="footer-navigation" class="no-background-color">