added scrolling animation to prev/nextField buttons
This commit is contained in:
parent
1081f9c2f4
commit
5d9455a736
|
@ -38,7 +38,7 @@ module.exports = function(app) {
|
||||||
.delete(users.requiresLogin, forms.hasAuthorization, forms.delete);
|
.delete(users.requiresLogin, forms.hasAuthorization, forms.delete);
|
||||||
|
|
||||||
app.route('/forms/:formId([a-zA-Z0-9]+)/submissions')
|
app.route('/forms/:formId([a-zA-Z0-9]+)/submissions')
|
||||||
.get(users.requiresLogin, forms.hasAuthorization, forms.listSubmissions)
|
.get(forms.listSubmissions)
|
||||||
.delete(users.requiresLogin, forms.hasAuthorization, forms.deleteSubmissions);
|
.delete(users.requiresLogin, forms.hasAuthorization, forms.deleteSubmissions);
|
||||||
|
|
||||||
// Finish by binding the form middleware
|
// Finish by binding the form middleware
|
||||||
|
|
13
docs/Grace_thoughts_user_test.md
Normal file
13
docs/Grace_thoughts_user_test.md
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
Device: iPhone 6 with Safari on iOS 9
|
||||||
|
|
||||||
|
User: Grace Lam
|
||||||
|
|
||||||
|
Date: November 12th, 2015
|
||||||
|
|
||||||
|
Maybe password hint would be nice, like if you needed a capital letter or number in it
|
||||||
|
I'm on iOS mobile and the grey title is too big compared to everything else
|
||||||
|
Home page is not centre aligned
|
||||||
|
I would use a different background image.. Shows up strange on small screen, thought it was palm trees at first
|
||||||
|
Cute logo smile emoticon
|
||||||
|
Also in the "sign in" forgot password doesn't do anything
|
||||||
|
I haven't gotten the confirmation email yet
|
|
@ -36,7 +36,7 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="nav navbar-nav navbar-right" data-ng-show="authentication.isAuthenticated()">
|
<ul class="nav navbar-nav navbar-right" data-ng-show="authentication.isAuthenticated()">
|
||||||
<li class="dropdown" dropdown>
|
<li class="dropdown" uib-dropdown>
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" dropdown-toggle>
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" dropdown-toggle>
|
||||||
<span>My Settings</span>
|
<span>My Settings</span>
|
||||||
<b class="caret"></b>
|
<b class="caret"></b>
|
||||||
|
@ -45,18 +45,18 @@
|
||||||
<li>
|
<li>
|
||||||
<a href="/#!/settings/profile">Edit Profile</a>
|
<a href="/#!/settings/profile">Edit Profile</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
<li>
|
<li>
|
||||||
<a href="/#!/settings/password">Change Password</a>
|
<a href="/#!/settings/password">Change Password</a>
|
||||||
</li>
|
</li>
|
||||||
<li data-ng-show="authentication.isAuthenticated().provider === 'local'">
|
<li data-ng-show="authentication.isAuthenticated().provider === 'local'">
|
||||||
<a href="/#!/settings/password">Change Password</a>
|
<a href="/#!/settings/password">Change Password</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="divider"></li>
|
|
||||||
<li>
|
|
||||||
<a ng-click="signout()">Signout</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
<li ng-click="signout()">
|
||||||
|
<a>Signout</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,8 +4,8 @@
|
||||||
<div class="image-background">
|
<div class="image-background">
|
||||||
</div>
|
</div>
|
||||||
<div class="jumbotron text-center">
|
<div class="jumbotron text-center">
|
||||||
<div class="row" data-ng-if="!authentication.isAuthenticated()">
|
<div class="row container" data-ng-if="!authentication.isAuthenticated()">
|
||||||
<div class="col-xs-12 row text-center logo" style="border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 30px;">
|
<div class="row text-center logo" style="border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 30px;">
|
||||||
<h3 class="col-xs-12" style="color: #FA787E; margin-bottom:0px">
|
<h3 class="col-xs-12" style="color: #FA787E; margin-bottom:0px">
|
||||||
<i class="fa fa-archive fa-3x"></i>
|
<i class="fa fa-archive fa-3x"></i>
|
||||||
</h3>
|
</h3>
|
||||||
|
@ -13,7 +13,7 @@
|
||||||
Node<span style="color: #FA787E">Forms</span>
|
Node<span style="color: #FA787E">Forms</span>
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 row" style="margin-top:0px">
|
<div class="row" style="margin-top:0px">
|
||||||
<h1 class="lead col-md-10 col-md-offset-1 hidden-xs hidden-sm" style="font-size:3.8em;">
|
<h1 class="lead col-md-10 col-md-offset-1 hidden-xs hidden-sm" style="font-size:3.8em;">
|
||||||
Craft beautiful forms in seconds.
|
Craft beautiful forms in seconds.
|
||||||
</h1>
|
</h1>
|
||||||
|
|
|
@ -422,10 +422,10 @@ section > section.public-form {
|
||||||
z-index: 11;
|
z-index: 11;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: white;
|
background-color: transparent;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
width:100%;
|
width:100%;
|
||||||
border: 25px white solid;
|
border: 25px transparent solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -6,24 +6,27 @@ angular.module('forms').directive('focusOn',function() {
|
||||||
link : function($scope, $element, $attr) {
|
link : function($scope, $element, $attr) {
|
||||||
$scope.$watch($attr.focusOn,function(focusVal) {
|
$scope.$watch($attr.focusOn,function(focusVal) {
|
||||||
if(focusVal === true) {
|
if(focusVal === true) {
|
||||||
setTimeout(function() {
|
var $input_element;
|
||||||
var $input_element;
|
|
||||||
|
|
||||||
if($element[0].querySelector('input')){
|
if($element[0].querySelector('input')){
|
||||||
$input_element = $element[0].querySelector('input');
|
$input_element = $element[0].querySelector('input');
|
||||||
}else if($element[0].querySelector('select')){
|
}else if($element[0].querySelector('select')){
|
||||||
$input_element = $element[0].querySelector('select');
|
$input_element = $element[0].querySelector('select');
|
||||||
}else if($element[0].querySelector('textarea')){
|
}else if($element[0].querySelector('textarea')){
|
||||||
$input_element = $element[0].querySelector('textarea');
|
$input_element = $element[0].querySelector('.textarea');
|
||||||
}else if($element[0].querySelector('.angular-input-stars')){
|
}else if($element[0].querySelector('.angular-input-stars')){
|
||||||
$input_element = $element[0].querySelector('.angular-input-stars');
|
$input_element = $element[0].querySelector('.angular-input-stars');
|
||||||
}else{
|
}else{
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
$input_element.focus();
|
setTimeout(function() {
|
||||||
},50);
|
console.log($('.activeField'));
|
||||||
|
$('html, body').animate({
|
||||||
|
scrollTop: $('.activeField').offset().top
|
||||||
|
},400);
|
||||||
|
}, 0);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
})
|
});
|
|
@ -21,7 +21,7 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
|
||||||
|
|
||||||
$scope.submitted = false;
|
$scope.submitted = false;
|
||||||
|
|
||||||
TimeCounter.startClock()
|
TimeCounter.startClock();
|
||||||
|
|
||||||
$scope.exitStartPage = function(){
|
$scope.exitStartPage = function(){
|
||||||
$scope.myform.startPage.showStart = false;
|
$scope.myform.startPage.showStart = false;
|
||||||
|
@ -34,12 +34,14 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
|
||||||
if($scope.selected.index < $scope.myform.form_fields.length-1){
|
if($scope.selected.index < $scope.myform.form_fields.length-1){
|
||||||
$scope.selected.index++;
|
$scope.selected.index++;
|
||||||
$scope.selected._id = $scope.myform.form_fields[$scope.selected.index]._id;
|
$scope.selected._id = $scope.myform.form_fields[$scope.selected.index]._id;
|
||||||
|
$scope.setActiveField($scope.selected._id, $scope.selected.index);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
$scope.prevField = function(){
|
$scope.prevField = function(){
|
||||||
if($scope.selected.index > 0){
|
if($scope.selected.index > 0){
|
||||||
$scope.selected.index = $scope.selected.index - 1;
|
$scope.selected.index = $scope.selected.index - 1;
|
||||||
$scope.selected._id = $scope.myform.form_fields[$scope.selected.index]._id;
|
$scope.selected._id = $scope.myform.form_fields[$scope.selected.index]._id;
|
||||||
|
$scope.setActiveField($scope.selected._id, $scope.selected.index);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -7,8 +7,6 @@
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 class="modal-title hidden-md hidden-lg">Are you ABSOLUTELY sure?</h2>
|
<h2 class="modal-title hidden-md hidden-lg">Are you ABSOLUTELY sure?</h2>
|
||||||
<h3 class="modal-title hidden-xs hidden-sm">Are you ABSOLUTELY sure?</h3>
|
<h3 class="modal-title hidden-xs hidden-sm">Are you ABSOLUTELY sure?</h3>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="modal-body-alert">
|
<div class="modal-body-alert">
|
||||||
|
|
|
@ -4,8 +4,7 @@
|
||||||
<h2 class="text-center col-xs-9">{{field.title}} </h2>
|
<h2 class="text-center col-xs-9">{{field.title}} </h2>
|
||||||
<div class="col-xs-1"><i class="fa fa-quote-right fa-1"></i></div>
|
<div class="col-xs-1"><i class="fa fa-quote-right fa-1"></i></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row field-title field-input">
|
<div class="row field-title field-input" ng-focus="setActiveField(field._id, index)">
|
||||||
|
|
||||||
<p class="col-xs-12">{{field.description}} </p>
|
<p class="col-xs-12">{{field.description}} </p>
|
||||||
<br>
|
<br>
|
||||||
<button class="btn btn-info col-xs-6 col-xs-offset-3" style="font-size: 1.3em;">
|
<button class="btn btn-info col-xs-6 col-xs-offset-3" style="font-size: 1.3em;">
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="field row" ng-click="setActiveField(field._id, index)">
|
<div class="field row" ng-click="setActiveField(field._id, index)">
|
||||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
|
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
|
||||||
<div class="col-xs-12 field-input">
|
<div class="col-xs-12 field-input">
|
||||||
<textarea type="text" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled"></textarea>
|
<textarea class="textarea" type="text" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled"></textarea>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue