diff --git a/app/assets/javascripts/app/forms/picture_form.js b/app/assets/javascripts/app/forms/picture_form.js index 0cfe74ad3..92640363b 100644 --- a/app/assets/javascripts/app/forms/picture_form.js +++ b/app/assets/javascripts/app/forms/picture_form.js @@ -19,6 +19,7 @@ app.forms.Picture = app.views.Base.extend({ submitForm : function (){ this.$("form").submit(); + this.$(".photos").append($('')) }, photoUploaded : function(evt, xhr) { diff --git a/app/assets/stylesheets/default.css b/app/assets/stylesheets/default.css index b4c66656d..4fd8a7622 100644 --- a/app/assets/stylesheets/default.css +++ b/app/assets/stylesheets/default.css @@ -1,6 +1,5 @@ /* *= require media-box -*= require loader *= require lightbox *= require autocomplete *= require mentions diff --git a/app/assets/stylesheets/loader.css.scss b/app/assets/stylesheets/loader.css.scss deleted file mode 100644 index fc8ca7abe..000000000 --- a/app/assets/stylesheets/loader.css.scss +++ /dev/null @@ -1,33 +0,0 @@ -@-webkit-keyframes fade-in { - 0% { opacity: 0; } - 100% { opacity: 1; } -} - -@-webkit-keyframes spin { - 0% { -webkit-transform: rotate(0deg); } - 100% { -webkit-transform: rotate(360deg); } -} - -@-moz-keyframes fade-in { - 0% { opacity: 0; } - 100% { opacity: 1; } -} - -@-moz-keyframes spin { - 0% { -moz-transform: rotate(0deg); } - 100% { -moz-transform: rotate(360deg); } -} - -.loaded { - -webkit-animation: fade-in 0.16s linear; - -moz-animation: fade-in 0.16s linear; -} - -.loader { - -webkit-mask-image: image-url('static-loader.png'); - -webkit-animation: spin 1s infinite ease-in-out, - fade-in 0.2s ease-in; - -moz-animation: spin 1s infinite ease-in-out, - fade-in 0.2s ease-in; -} - diff --git a/app/assets/stylesheets/new_styles/_spinner.scss b/app/assets/stylesheets/new_styles/_spinner.scss index 25b392184..2b4bbb1f5 100644 --- a/app/assets/stylesheets/new_styles/_spinner.scss +++ b/app/assets/stylesheets/new_styles/_spinner.scss @@ -1,3 +1,23 @@ +@-webkit-keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } +} + +@-moz-keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@-moz-keyframes spin { + 0% { -moz-transform: rotate(0deg); } + 100% { -moz-transform: rotate(360deg); } +} + #paginate, #infscr-loading { margin-top: 10px; padding: 8px 0; @@ -5,17 +25,29 @@ width: 100%; display: block; clear: both; +} - .loader { - display: inline-block; +.loaded { + -webkit-animation: fade-in 0.16s linear; + -moz-animation: fade-in 0.16s linear; +} - &.hidden{ - display : none; - } +.loader { + -webkit-mask-image: image-url('static-loader.png'); + -webkit-animation: spin 1s infinite ease-in-out, + fade-in 0.2s ease-in; + -moz-animation: spin 1s infinite ease-in-out, + fade-in 0.2s ease-in; - width : 14px; - height: 14px; - background-image : url(asset_path("static-loader.png", "image")) + background-image : image-url("static-loader.png"); + + display: inline-block; + width : 14px; + height: 14px; + background-color: red; + + &.hidden{ + display : none; } }