From a099059f2e1e2cba48a0c099c18602dd02733cd6 Mon Sep 17 00:00:00 2001 From: Godwin Date: Mon, 13 Jun 2016 17:28:45 -0700 Subject: [PATCH] Fixed labels on inputs when autosomplete is used --- app/assets/javascripts/main.js | 22 +++++++++++++-------- app/assets/stylesheets/_application.scss | 25 +++++++++++++++--------- 2 files changed, 30 insertions(+), 17 deletions(-) diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 2c6c800..c9655db 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -18,19 +18,25 @@ field.classList[input.value ? 'remove' : 'add']('empty'); } positionLabel(input); - input.addEventListener('keyup', function(event) { positionLabel(event.target); }); - input.addEventListener('blur', function(event) { field.classList.remove('focused'); }); - input.addEventListener('focus', function(event) { field.classList.add('focused'); }); + input.addEventListener('keyup', function(event) { + positionLabel(event.target); + }); + input.addEventListener('blur', function(event) { + positionLabel(event.target); + field.classList.remove('focused'); + }); + input.addEventListener('focus', function(event) { + field.classList.add('focused'); + }); }); var body = document.querySelector('body'); var primaryContent = document.getElementById('primary-content'); var overlay = document.getElementById('content-overlay'); primaryContent.addEventListener('keydown', function(event) { - event.stopPropagation(); - return false; - //if (body.classList.contains('has-overlay')) { - // return false; - //} + if (body.classList.contains('has-overlay')) { + event.stopPropagation(); + return false; + } }); document.addEventListener('focus', function(event) { if (overlay.querySelector('.dlg.open') && !overlay.querySelector('.dlg.open :focus')) { diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index 183675d..cd218b4 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -2333,19 +2333,26 @@ html[data-lingua-franca-example="html"] { } @include breakpoint(medium) { - html[data-input="kb"] { - :focus, - input[type="submit"]:focus, - .check-box-field input:focus + label, - .radio-button-field input:focus + label, - .select-field select:focus, - .workshop-link:focus .title, - #main-nav .nav a:focus .title { - outline: 0.25rem solid rgba($colour-2, 0.5); + :focus, + input[type="submit"]:focus, + .check-box-field input:focus + label, + .radio-button-field input:focus + label, + .select-field select:focus, + .workshop-link:focus .title, + #main-nav .nav a:focus .title { + html & { + outline: 0.25rem solid rgba($colour-2, 0); outline-offset: 0.2rem; + @include _(transition, outline 150ms ease-in-out); + } + + html[data-input="kb"] & { + outline: 0.25rem solid rgba($colour-2, 0.5); z-index: 1; } + } + html[data-input="kb"] { #main-nav .logo:focus { outline-offset: -0.2em; }