diff --git a/web/app/assets/javascripts/website_validator.js.coffee b/web/app/assets/javascripts/website_validator.js.coffee index ab4ca2060..9bfb8ab7e 100644 --- a/web/app/assets/javascripts/website_validator.js.coffee +++ b/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('') diff --git a/web/app/assets/stylesheets/client/website_validator.css.scss b/web/app/assets/stylesheets/client/website_validator.css.scss index 0dcfae6dd..f6d7349ba 100644 --- a/web/app/assets/stylesheets/client/website_validator.css.scss +++ b/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; + } } diff --git a/web/app/views/clients/_website_validator.html.slim b/web/app/views/clients/_website_validator.html.slim index 00bd96252..0fa8ef718 100644 --- a/web/app/views/clients/_website_validator.html.slim +++ b/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"