bike/BikeBikeBike
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

Fixed labels on inputs when autosomplete is used

Browse Source
This commit is contained in:
Godwin 2016-06-13 17:28:45 -07:00
parent 2b156269f9
commit a099059f2e
2 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/javascripts/main.js
View File

@ -18,19 +18,25 @@
field.classList[input.value ? 'remove' : 'add']('empty'); field.classList[input.value ? 'remove' : 'add']('empty');
} }
positionLabel(input); positionLabel(input);
input.addEventListener('keyup', function(event) { positionLabel(event.target); }); input.addEventListener('keyup', function(event) {
input.addEventListener('blur', function(event) { field.classList.remove('focused'); }); positionLabel(event.target);
input.addEventListener('focus', function(event) { field.classList.add('focused'); }); });
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 body = document.querySelector('body');
var primaryContent = document.getElementById('primary-content'); var primaryContent = document.getElementById('primary-content');
var overlay = document.getElementById('content-overlay'); var overlay = document.getElementById('content-overlay');
primaryContent.addEventListener('keydown', function(event) { primaryContent.addEventListener('keydown', function(event) {
event.stopPropagation(); if (body.classList.contains('has-overlay')) {
return false; event.stopPropagation();
//if (body.classList.contains('has-overlay')) { return false;
// return false; }
//}
}); });
document.addEventListener('focus', function(event) { document.addEventListener('focus', function(event) {
if (overlay.querySelector('.dlg.open') && !overlay.querySelector('.dlg.open :focus')) { if (overlay.querySelector('.dlg.open') && !overlay.querySelector('.dlg.open :focus')) {

27
app/assets/stylesheets/_application.scss
View File

@ -2333,19 +2333,26 @@ html[data-lingua-franca-example="html"] {
} }
@include breakpoint(medium) { @include breakpoint(medium) {
html[data-input="kb"] { :focus,
:focus, input[type="submit"]:focus,
input[type="submit"]:focus, .check-box-field input:focus + label,
.check-box-field input:focus + label, .radio-button-field input:focus + label,
.radio-button-field input:focus + label, .select-field select:focus,
.select-field select:focus, .workshop-link:focus .title,
.workshop-link:focus .title, #main-nav .nav a:focus .title {
#main-nav .nav a:focus .title { html & {
outline: 0.25rem solid rgba($colour-2, 0.5); outline: 0.25rem solid rgba($colour-2, 0);
outline-offset: 0.2rem; outline-offset: 0.2rem;
z-index: 1; @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 { #main-nav .logo:focus {
outline-offset: -0.2em; outline-offset: -0.2em;
} }