Fixed focus outline on project ID field
This commit is contained in:
parent
0e062e7669
commit
5cacaa8e1e
2 changed files with 24 additions and 23 deletions
|
@ -36,11 +36,14 @@ $(function() {
|
|||
delete runtime.keysDown[e.which];
|
||||
});
|
||||
|
||||
var address = $('#address-hint');
|
||||
var project = $('#project-id');
|
||||
|
||||
// Update the project ID field
|
||||
$('#project-id').val(project_id);
|
||||
project.val(project_id);
|
||||
|
||||
// Validate project ID field
|
||||
$('#project-id').keyup(function() {
|
||||
project.keyup(function() {
|
||||
var n = this.value;
|
||||
|
||||
// Allow URL pasting
|
||||
|
@ -55,8 +58,14 @@ $(function() {
|
|||
});
|
||||
|
||||
// Focus the actual input when the user clicks on the URL hint
|
||||
$('#address-hint').click(function() {
|
||||
$('#project-id').select();
|
||||
address.click(function() {
|
||||
project.select();
|
||||
});
|
||||
|
||||
var width = address.outerWidth();
|
||||
project.css({
|
||||
paddingLeft: width,
|
||||
marginLeft: -width
|
||||
});
|
||||
|
||||
// Go project button behavior
|
||||
|
|
30
player.css
30
player.css
|
@ -204,37 +204,28 @@ button#trigger-stop:hover {
|
|||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
#project-id,
|
||||
#address-hint {
|
||||
#project-id {
|
||||
border: 1px solid #aaa;
|
||||
padding: 6px;
|
||||
}
|
||||
#project-id {
|
||||
-webkit-box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, .3);
|
||||
box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, .3);
|
||||
-webkit-box-shadow: inset 3px 3px 3px -3px rgba(0, 0, 0, .3);
|
||||
box-shadow: inset 3px 3px 3px -3px rgba(0, 0, 0, .3);
|
||||
background: 0;
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
width: 6em;
|
||||
position: relative;
|
||||
}
|
||||
#project-id.error {
|
||||
background: #fee;
|
||||
-webkit-box-shadow: inset 0 3px 3px -3px rgba(100, 0, 0, .3);
|
||||
box-shadow: inset 0 3px 3px -3px rgba(100, 0, 0, .3);
|
||||
}
|
||||
#address-hint {
|
||||
-webkit-box-shadow: inset 3px 3px 3px -3px rgba(0, 0, 0, .3);
|
||||
box-shadow: inset 3px 3px 3px -3px rgba(0, 0, 0, .3);
|
||||
padding-right: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
#address-hint.error {
|
||||
background: #fee;
|
||||
-webkit-box-shadow: inset 3px 3px 3px -3px rgba(100, 0, 0, .3);
|
||||
box-shadow: inset 3px 3px 3px -3px rgba(100, 0, 0, .3);
|
||||
}
|
||||
#project-id:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
#address-hint {
|
||||
padding-left: 6px;
|
||||
}
|
||||
#go-project {
|
||||
padding: 6px;
|
||||
margin: 0;
|
||||
|
@ -250,6 +241,7 @@ button#trigger-stop:hover {
|
|||
-webkit-box-shadow: inset 0 -1px rgba(255, 255, 255, .2);
|
||||
box-shadow: inset 0 -1px rgba(255, 255, 255, .2);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
#go-project:active {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#eee));
|
||||
|
|
Reference in a new issue