diff --git a/app/assets/javascripts/templates/registration/images/logo.html.haml b/app/assets/javascripts/templates/registration/images/logo.html.haml index 803b103a58..4b19c14cff 100644 --- a/app/assets/javascripts/templates/registration/images/logo.html.haml +++ b/app/assets/javascripts/templates/registration/images/logo.html.haml @@ -36,6 +36,10 @@ .row.pad-top .small-12.columns.center #image-placeholder.logo - %img{ ng: { show: "imageSrc()", src: '{{ imageSrc() }}' } } - .message{ ng: { hide: "imageSrc()" } } + %img{ ng: { show: "imageSrc() && !imageUploader.isUploading", src: '{{ imageSrc() }}' } } + .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } } Your logo will appear here for review once uploaded + .loading{ ng: { hide: "!imageUploader.isUploading" } } + %img.spinner{ src: "/assets/loading.gif" } + %br/ + Uploading... diff --git a/app/assets/javascripts/templates/registration/images/promo.html.haml b/app/assets/javascripts/templates/registration/images/promo.html.haml index f134834d5c..d98721dc6d 100644 --- a/app/assets/javascripts/templates/registration/images/promo.html.haml +++ b/app/assets/javascripts/templates/registration/images/promo.html.haml @@ -34,6 +34,10 @@ .row.pad-top .small-12.columns.center #image-placeholder.promo - %img{ ng: { show: "imageSrc()", src: '{{ imageSrc() }}' } } - .message{ ng: { hide: "imageSrc()" } } + %img{ ng: { show: "imageSrc() && !imageUploader.isUploading", src: '{{ imageSrc() }}' } } + .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } } Your logo will appear here for review once uploaded + .loading{ ng: { hide: "!imageUploader.isUploading" } } + %img.spinner{ src: "/assets/loading.gif" } + %br/ + Uploading... diff --git a/app/assets/stylesheets/darkswarm/registration.css.sass b/app/assets/stylesheets/darkswarm/registration.css.sass index 547f834406..707d5a93e7 100644 --- a/app/assets/stylesheets/darkswarm/registration.css.sass +++ b/app/assets/stylesheets/darkswarm/registration.css.sass @@ -92,19 +92,25 @@ font-size: 18px font-weight: bold color: #373737 - background-color: #e1e1e1 + background-color: #f1f1f1 text-align: center border: 3px dashed #494949 margin-left: auto margin-right: auto + .spinner + width: 100px &.logo .message padding-top: 6em + .loading + padding-top: 4em width: 306px height: 306px &.promo .message padding-top: 4em + .loading + padding-top: 1em width: 726px height: 166px