VRFS-2697 css styling

web/app/assets/javascripts/website_validator.js.coffee

@@ -12,9 +12,12 @@ context.JK.WebsiteValidator = class WebsiteValidator
     this.show_format_status()
     @logger = context.JK.logger
     @site_status = null
+    @spinner = @input_div.find('span.spinner-small')
+    @checkmark = @input_div.find('.validate-checkmark')
 
   init: () =>
     this.renderErrors({})
+    @spinner.hide()
     validator = this
     @url_input.bind 'blur', ->
       if validator.show_format_status()
@@ -37,18 +40,21 @@ context.JK.WebsiteValidator = class WebsiteValidator
     if url
       yn = this.validate_url_format()
       if yn
-        @input_div.find('.valid_checkmark').show()
+        @checkmark.show()
       else
-        @input_div.find('.valid_checkmark').hide()
+        @checkmark.hide()
     yn
 
   validate_url_site: () =>
     @site_status = null
+    @spinner.show()
+    @checkmark.hide()
     @rest.validateUrlSite(this.url_to_validate())
       .done(this.processSiteCheck)
       .fail(this.processSiteCheckFail)
 
   processSiteCheck: (response) =>
+    @spinner.hide()
     if 'Valid Site' == response.message
       @site_status = 'valid'
       this.renderErrors({})
@@ -58,14 +64,18 @@ context.JK.WebsiteValidator = class WebsiteValidator
     @logger.debug("site_status = "+@site_status)
 
   processSiteCheckFail: (response) =>
+    @spinner.hide()
+    @checkmark.hide()
     @logger.error("site check error")
     @site_status = 'invalid'
 
   renderErrors: (errors) => 
     errdiv = @input_div.find('.error')
     if errmsg = context.JK.format_errors("site", errors)
+      @checkmark.hide()
       errdiv.show()
       errdiv.html(errmsg)
     else
+      @checkmark.show()
       errdiv.hide()
       errdiv.html('')

web/app/assets/stylesheets/client/website_validator.css.scss

@@ -6,9 +6,28 @@
     padding: 5px;
     float: left;
   }
-  .valid_checkmark {
-    float: left;
+  .validate-checkmark {
+    background-image: url('/assets/content/icon_checkmark_circle.png');
+    background-repeat:no-repeat;
+    background-position:center;
+    width:32px;
+    height:32px;
+    background-size: 50% 50%;
+    display:inline-block;
+    vertical-align: middle;
+    position: absolute;
+    margin-top: 0px;
+    margin-left: 520px;
+    position: absolute;
+    left: 0px;
   }
   .error {
   }
+  span.spinner-small {
+    display:inline-block;
+    vertical-align: middle;
+    position: absolute;
+    margin-top: 0px;
+    margin-left: 520px;
+  }
 }

web/app/views/clients/_website_validator.html.slim

@@ -1,5 +1,7 @@
 div class="website_validator" id="#{siteid}_url"
-  div class="valid_checkmark" ✓ 
+  span class="validate-checkmark"
+  span class="spinner-small upload-spinner"
   input type='text' id="url_input_#{siteid}" maxlength="2000"
+  br
   div class="error"