mmoser/skill-assessment-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fade away resolved error messages on questions

Browse Source
This commit is contained in:
Mark Moser 2016-08-04 09:38:27 -05:00
parent ac3c992ba5
commit f8f471fba3
6 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/assets/javascripts/form-animation.js
View File

@ -1,17 +1,29 @@
var $textInput = $('[type="color"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], input:not([type]), textarea');
// Text Input Label Animation
var textInput = $('[type="color"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], input:not([type]), textarea');
textInput.prev('label').addClass('loaded');
$(textInput).each(function() {
$textInput.prev('label').addClass('loaded');
$textInput.each(function() {
if( $(this).val() ) {
$(this).prev('label').addClass('animate');
}
});
$(textInput).on('focus', function() {
$textInput.on('focus', function() {
$(this).prev('label').addClass('animate');
}).on('focusout', function() {
if( !$(this).val() ) {
$(this).prev('label').removeClass('animate');
}
});
});
// form error resolutions
$('form').has('.error').each(function(){
var $form = $(this);
$form.on('keyup', $textInput, function(){
$form.find(".error").addClass('resolve-error');
});
$form.on('change', $("[type=radio], [type=checkbox]"), function(){
$form.find(".error").addClass('resolve-error');
});
});

5
app/assets/stylesheets/application.scss
View File

@ -16,7 +16,10 @@
@import 'base'; // bitters
@import 'neat';
@import 'core/**/*';
@import 'core/fonts';
@import 'core/variables';
@import 'core/animations';
@import 'atoms/**/*';
@import 'molecules/**/*';
// @import 'organisms/**/*';

5
app/assets/stylesheets/core/_animations.scss Normal file
View File

@ -0,0 +1,5 @@
@keyframes success-fadeout {
0% { opacity: 1; max-height: 40px; }
85% { opacity: 0; max-height: 40px; padding: .5rem 0; margin-bottom: .5rem; }
100% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
}

0
app/assets/stylesheets/atoms/_fonts.scss → app/assets/stylesheets/core/_fonts.scss
View File

7
app/assets/stylesheets/molecules/_forms.scss
View File

@ -266,6 +266,13 @@ select {
margin-top: 2rem;
}
.resolve-error {
animation-name: success-fadeout;
animation-duration: 1.5s;
animation-delay: 0;
animation-fill-mode: forwards;
}
html.no-js {
.chars {
display: none;

6
app/assets/stylesheets/templates/_summary.scss
View File

@ -43,12 +43,6 @@
margin-top: 3rem;
}
@keyframes success-fadeout {
0% { opacity: 1; max-height: 40px; }
85% { opacity: 0; max-height: 40px; padding: .5rem 0; margin-bottom: .5rem; }
100% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
}
.success {
box-sizing: border-box;
text-align: center;