fixed input focusing bug
This commit is contained in:
parent
f08648c70e
commit
c84e90483e
|
@ -128,17 +128,17 @@ var FormSchema = new Schema({
|
|||
questionColor: {
|
||||
type: String,
|
||||
match: [/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/],
|
||||
default: '#333',
|
||||
default: '#333'
|
||||
},
|
||||
answerColor: {
|
||||
type: String,
|
||||
match: [/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/],
|
||||
default: '#333',
|
||||
default: '#333'
|
||||
},
|
||||
buttonColor: {
|
||||
type: String,
|
||||
match: [/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/]
|
||||
default: '#fff',
|
||||
match: [/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/],
|
||||
default: '#fff'
|
||||
},
|
||||
buttonTextColor: {
|
||||
type: String,
|
||||
|
|
25
public/dist/application.js
vendored
25
public/dist/application.js
vendored
File diff suppressed because one or more lines are too long
4
public/dist/application.min.css
vendored
4
public/dist/application.min.css
vendored
File diff suppressed because one or more lines are too long
8
public/dist/application.min.js
vendored
8
public/dist/application.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -46,9 +46,6 @@ body {
|
|||
border: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 70px;
|
||||
}
|
||||
.undecorated-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
@ -22,13 +22,22 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
.container.admin-form {
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
form input {
|
||||
.public-form input, .public-form textarea {
|
||||
background-color: rgba(0,0,0,0);
|
||||
border: 2px dashed #ddd!important;
|
||||
}
|
||||
|
||||
.public-form input:focus, .public-form textarea:focus {
|
||||
border: 2px dashed #ddd!important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.public-form input.no-border, .public-form textarea.no-border {
|
||||
border: none!important;
|
||||
}
|
||||
section.content p.breakwords {
|
||||
word-break: break-all;
|
||||
|
@ -176,23 +185,17 @@ form .row.field {
|
|||
padding: 0.45em 0.9em;
|
||||
width: 100%;
|
||||
line-height: 160%;
|
||||
border: 3px dashed #ddd;
|
||||
}
|
||||
|
||||
form .field-input > input.hasDatepicker{
|
||||
padding: 0.45em 0.9em;
|
||||
width: 50%;
|
||||
line-height: 160%;
|
||||
border: 3px dashed #ddd;
|
||||
}
|
||||
form .field-input > input.text-field-input{
|
||||
padding: 0.45em 0.9em;
|
||||
width: 100%;
|
||||
line-height: 160%;
|
||||
border: 2px dashed #ddd!important;
|
||||
}
|
||||
form .field-input > input.text-field-input:focus{
|
||||
border: 0;
|
||||
}
|
||||
form .required-error{
|
||||
color: #ddd;
|
||||
|
@ -374,10 +377,17 @@ div.config-form .row.field {
|
|||
}
|
||||
|
||||
/* Styles for form list view (/forms) */
|
||||
section > section.public-form {
|
||||
section.public-form {
|
||||
padding: 0 10% 0 10%;
|
||||
|
||||
}
|
||||
section.public-form .form-submitted {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
section.public-form .btn {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
text-align: center;
|
||||
border-bottom: 6px inset #ccc;
|
||||
|
|
|
@ -94,6 +94,7 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
|
|||
setTimeout(function() {
|
||||
$document.scrollToElement(angular.element('.activeField'), -10, 200).then(function(){
|
||||
$scope.noscroll = false;
|
||||
document.querySelectorAll('.activeField .focusOn')[0].focus();
|
||||
});
|
||||
}, 20);
|
||||
}
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
<div class="control-group input-append">
|
||||
<input ng-focus="setActiveField(field._id, index, true)"
|
||||
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
||||
ng-class="{ 'no-border': !!field.fieldValue }"
|
||||
ui-date="dateOptions"
|
||||
ng-model="field.fieldValue"
|
||||
ng-model-options="{ debounce: 250 }"
|
||||
|
|
|
@ -7,7 +7,9 @@
|
|||
<div class="col-xs-12 field-input container">
|
||||
<div class="row-fluid">
|
||||
<label class="btn col-xs-5">
|
||||
<input ng-focus="setActiveField(field._id, index, true)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="radio" value="true" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
|
||||
<input ng-focus="setActiveField(field._id, index, true)"
|
||||
class="focusOn"
|
||||
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="radio" value="true" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
|
||||
<span> I accept </span>
|
||||
</label>
|
||||
<label class="btn col-xs-5 col-xs-offset-1">
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
<input ng-focus="setActiveField(field._id, index, true)"
|
||||
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
||||
type="radio"
|
||||
class="focusOn"
|
||||
value="{{option.option_value}}"
|
||||
ng-model="field.fieldValue"
|
||||
ng-model-options="{ debounce: 250 }"
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
ng-model-options="{ debounce: 250 }"
|
||||
ng-required="field.required"
|
||||
ng-disabled="field.disabled"
|
||||
class="angular-input-stars">
|
||||
class="angular-input-stars focusOn">
|
||||
</input-stars>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -7,9 +7,8 @@
|
|||
<p class="col-xs-12" ng-if="field.description.length">{{field.description}} </p>
|
||||
<br>
|
||||
<div class="col-xs-offset-1 col-xs-11">
|
||||
<button class="btn btn-info"
|
||||
style="font-size: 1.3em;"
|
||||
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
|
||||
<button class="btn focusOn"
|
||||
ng-style="{'font-size': '1.3em', 'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
|
||||
ng-focused="setActiveField(field._id, index, true)"
|
||||
ng-click="$root.nextField()">
|
||||
Continue
|
||||
|
|
|
@ -4,7 +4,9 @@
|
|||
<textarea class="textarea" type="text"
|
||||
ng-model="field.fieldValue"
|
||||
ng-model-options="{ debounce: 250 }"
|
||||
ng-class="{ 'no-border': !!field.fieldValue }"
|
||||
value="{{field.fieldValue}}"
|
||||
class="focusOn"
|
||||
ng-required="field.required"
|
||||
ng-disabled="field.disabled"
|
||||
ng-focus="setActiveField(field._id, index, true)">
|
||||
|
@ -13,11 +15,11 @@
|
|||
</div>
|
||||
<div class="col-xs-12 row">
|
||||
<div class="btn btn-lg btn-default row-fluid"
|
||||
style="padding: 4px; margin-top:8px;">
|
||||
style="padding: 4px; margin-top:8px; background: rgba(255,255,255,0.5)">
|
||||
|
||||
<button ng-disabled="!field.fieldValue"
|
||||
ng-click="$root.nextField()"
|
||||
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
|
||||
ng-style="{'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
|
||||
class="btn col-sm-5 col-xs-5">
|
||||
|
||||
OK <i class="fa fa-check"></i>
|
||||
|
|
|
@ -12,7 +12,8 @@
|
|||
ng-focus="setActiveField(field._id, index, true)"
|
||||
type="{{field.input_type}}"
|
||||
placeholder="{{field.placeholder}}"
|
||||
class="text-field-input"
|
||||
ng-class="{ 'no-border': !!field.fieldValue }"
|
||||
class="focusOn text-field-input"
|
||||
ng-model="field.fieldValue"
|
||||
ng-model-options="{ debounce: 250 }"
|
||||
value="field.fieldValue"
|
||||
|
@ -23,9 +24,9 @@
|
|||
</div>
|
||||
<div class="col-xs-12 row">
|
||||
<div class="btn btn-lg btn-default row-fluid"
|
||||
style="padding: 4px; margin-top:8px;">
|
||||
style="padding: 4px; margin-top:8px; background: rgba(255,255,255,0.5)">
|
||||
<button ng-disabled="!field.fieldValue"
|
||||
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
|
||||
ng-style="{'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
|
||||
ng-click="$root.nextField()"
|
||||
class="btn col-sm-5 col-xs-5">
|
||||
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
<label class="btn btn-default col-md-2 col-sm-3 col-xs-4"
|
||||
style="background: rgba(0,0,0,0.1); text-align:left;">
|
||||
<input type="radio" value="true"
|
||||
class="focusOn"
|
||||
style="opacity: 0; margin-left: 0px;"
|
||||
ng-focus="setActiveField(field._id, index, true)"
|
||||
ng-model="field.fieldValue"
|
||||
|
|
|
@ -6,7 +6,7 @@ class="form-submitted"
|
|||
style="padding-top: 35vh;">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
|
||||
<h1 style="font-weight: 400; font-size: 25px;">
|
||||
<h1 style="font-weight: 400; nont-size: 25px;">
|
||||
{{myform.startPage.introTitle}}
|
||||
</h1>
|
||||
</div>
|
||||
|
@ -39,7 +39,8 @@ ng-style="{'color':button.color}">
|
|||
</div>
|
||||
|
||||
<!-- Form Fields View -->
|
||||
<div class="form-fields" ng-show="!myform.submitted && !myform.startPage.showStart">
|
||||
<div class="form-fields" ng-show="!myform.submitted && !myform.startPage.showStart"
|
||||
ng-style="{ 'border-color': myform.design.colors.buttonTextColor }">
|
||||
<div class="row">
|
||||
<form name="myForm"
|
||||
du-scroll-container
|
||||
|
@ -61,10 +62,11 @@ class="row field-directive">
|
|||
<div class="row form-actions" id="submit_field"
|
||||
ng-click="setActiveField('submit_field', myform.form_fields.length)"
|
||||
ng-class="{activeField: selected._id == 'submit_field' }"
|
||||
ng-style="{ 'background-color':myform.design.colors.buttonColor}"
|
||||
style="border-top: 1px solid #ddd; margin-right: -13% ;margin-left: -13%; padding-bottom: 50vh;">
|
||||
|
||||
<button ng-focus="setActiveField('submit_field', myform.form_fields.length)"
|
||||
class="Button btn"
|
||||
class="Button btn col-sm-2 col-xs-4"
|
||||
v-busy="loading" v-busy-label="Please wait" v-pressable
|
||||
ng-disabled="loading"
|
||||
ng-click="submitForm()"
|
||||
|
@ -73,7 +75,7 @@ style="font-size: 1.6em; margin-left: 1em; margin-top: 1em;">
|
|||
Submit
|
||||
</button>
|
||||
|
||||
<div class="col-sm-2" style="font-size: 75%; margin-top:2.5em">
|
||||
<div class="col-sm-2 col-xs-6" style="font-size: 75%; margin-top:2.5em">
|
||||
<small>
|
||||
press ENTER
|
||||
</small>
|
||||
|
@ -81,8 +83,7 @@ press ENTER
|
|||
</div>
|
||||
|
||||
<section ng-if="!myform.hideFooter" class="navbar navbar-fixed-bottom"
|
||||
style="padding-top:15px; border-top: 2px grey solid"
|
||||
ng-style="{'background-color':myform.design.colors.buttonColor, 'border-color':myform.design.colors.buttonTextColor, 'color':myform.design.colors.buttonTextColor}">
|
||||
ng-style="{ 'background-color':myform.design.colors.buttonColor, 'padding-top': '15px', 'border-top': '2px '+ myform.design.colors.buttonTextColor +' solid', 'color':myform.design.colors.buttonTextColor}">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-md-6 col-xs-5" ng-show="!myform.submitted">
|
||||
|
@ -124,7 +125,8 @@ press ENTER
|
|||
|
||||
<!-- End Page View -->
|
||||
<div ng-if="myform.submitted && !loading" class="form-submitted"
|
||||
ng-style="{'color':myform.design.colors.buttonTextColor}">
|
||||
ng-style="{'color':myform.design.colors.buttonTextColor}"
|
||||
style="padding-top: 5vh;">
|
||||
|
||||
<div class="field row text-center">
|
||||
<div class="col-xs-6 col-xs-offset-3 text-center">Form entry successfully submitted!</div>
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue