beenull/tellform
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

made form submit view more mobile friendly/responsive

Browse source
This commit is contained in:
David Baldwynn 2016-05-13 17:24:56 -07:00
parent f49be263d4
commit 09b14ffc6d
8 changed files with 40 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/dist/application.js vendored
View file

File diff suppressed because one or more lines are too long

4
public/dist/application.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
public/modules/forms/views/directiveViews/field/legal.html
View file

@ -14,7 +14,7 @@
</div> </div>
<div class="col-xs-12 field-input container"> <div class="col-xs-12 field-input container">
<div class="row-fluid"> <div class="row-fluid">
<label class="btn col-xs-5" <label class="btn col-md-5 col-xs-12"
ng-class="{activeBtn: field.fieldValue == 'true'}" ng-class="{activeBtn: field.fieldValue == 'true'}"
ng-click="nextField()"> ng-click="nextField()">
<input class="focusOn" <input class="focusOn"
@ -30,7 +30,7 @@
</div> </div>
<span> I accept </span> <span> I accept </span>
</label> </label>
<label class="btn col-xs-5 col-xs-offset-1" <label class="btn col-md-5 col-md-offset-1 col-xs-12"
ng-class="{activeBtn: field.fieldValue == 'false'}" ng-class="{activeBtn: field.fieldValue == 'false'}"
ng-click="nextField()"> ng-click="nextField()">
<input class="focusOn" <input class="focusOn"

2
public/modules/forms/views/directiveViews/field/radio.html
View file

@ -14,7 +14,7 @@
<div class="col-xs-12 field-input"> <div class="col-xs-12 field-input">
<div ng-repeat="option in field.fieldOptions" class="row-fluid"> <div ng-repeat="option in field.fieldOptions" class="row-fluid">
<label class="btn col-xs-4" <label class="btn col-md-4 col-xs-12 col-sm-12"
style="margin: 0.5em; padding-left:30px" style="margin: 0.5em; padding-left:30px"
ng-click="nextField()" ng-click="nextField()"
ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_value}"> ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_value}">

30
public/modules/forms/views/directiveViews/field/textarea.html
View file

@ -22,22 +22,20 @@
</textarea> </textarea>
</div> </div>
</div> </div>
<div class="col-xs-12 row"> <div>
<div class="btn btn-lg btn-default row-fluid" <div class="btn btn-lg btn-default col-xs-12"
style="padding: 4px; margin-top:8px; background: rgba(255,255,255,0.5)"> style="padding: 4px; margin-top:8px; background: rgba(255,255,255,0.5)">
<button ng-disabled="!field.fieldValue || forms.myForm.{{field.fieldType}}{{$index}}.$invalid"
<button ng-disabled="!field.fieldValue" ng-style="{'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
ng-click="$root.nextField()" ng-click="$root.nextField()"
ng-style="{'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}" class="btn col-sm-5 col-xs-5">
class="btn col-sm-5 col-xs-5">
OK <i class="fa fa-check"></i> OK <i class="fa fa-check"></i>
</button> </button>
<div class="col-sm-3 col-xs-6" style="margin-top:0.2em"> <div class="col-sm-3 col-xs-6" style="margin-top:0.2em">
<small style="color:#ddd; font-size:70%"> <small style="color:#ddd; font-size:70%">
press ENTER press ENTER
</small> </small>
</div> </div>
</div> </div>
</div> </div>

4
public/modules/forms/views/directiveViews/field/textfield.html
View file

@ -40,8 +40,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-12 row"> <div>
<div class="btn btn-lg btn-default row-fluid" <div class="btn btn-lg btn-default col-xs-12"
style="padding: 4px; margin-top:8px; background: rgba(255,255,255,0.5)"> style="padding: 4px; margin-top:8px; background: rgba(255,255,255,0.5)">
<button ng-disabled="!field.fieldValue || forms.myForm.{{field.fieldType}}{{$index}}.$invalid" <button ng-disabled="!field.fieldValue || forms.myForm.{{field.fieldType}}{{$index}}.$invalid"
ng-style="{'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}" ng-style="{'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"

9
public/modules/forms/views/directiveViews/field/yes_no.html
View file

@ -6,8 +6,9 @@
{{index+1}} {{index+1}}
<i class="fa fa-angle-double-right" aria-hidden="true"></i> <i class="fa fa-angle-double-right" aria-hidden="true"></i>
</small> </small>
<span class="required-error" ng-show="field.required && !field.fieldValue"> {{field.title}}
*(required) <span class="required-error" ng-show="!field.required">
optional
</span> </span>
</h3> </h3>
<p class="row"> <p class="row">
@ -17,7 +18,7 @@
<div class="col-xs-12 field-input"> <div class="col-xs-12 field-input">
<div class="row"> <div class="row">
<label class="btn btn-default col-md-2 col-sm-3 col-xs-4" <label class="btn btn-default col-md-2 col-sm-3 col-xs-7"
style="background: rgba(0,0,0,0.1); text-align:left;"> style="background: rgba(0,0,0,0.1); text-align:left;">
<input type="radio" value="true" <input type="radio" value="true"
class="focusOn" class="focusOn"
@ -37,7 +38,7 @@
</div> </div>
<div class="row" style="margin-top: 10px;"> <div class="row" style="margin-top: 10px;">
<label class="btn btn-default col-md-2 col-sm-3 col-xs-4" <label class="btn btn-default col-md-2 col-sm-3 col-xs-7"
style="background: rgba(0,0,0,0.1); text-align:left;"> style="background: rgba(0,0,0,0.1); text-align:left;">
<input type="radio" value="false" <input type="radio" value="false"

16
public/modules/forms/views/directiveViews/form/submit-form.client.view.html
View file

@ -61,10 +61,10 @@ class="row field-directive">
ng-click="setActiveField('submit_field', myform.form_fields.length)" ng-click="setActiveField('submit_field', myform.form_fields.length)"
ng-class="{activeField: selected._id == 'submit_field' }" ng-class="{activeField: selected._id == 'submit_field' }"
ng-style="{ 'background-color':myform.design.colors.buttonColor}" ng-style="{ 'background-color':myform.design.colors.buttonColor}"
style="border-top: 1px solid #ddd; margin-right: -13% ;margin-left: -13%; padding-bottom: 100vh;"> style="border-top: 1px solid #ddd; margin-right: -13%; margin-left: -13%; padding-bottom: 100vh;">
<button ng-focus="setActiveField('submit_field', myform.form_fields.length)" <button ng-focus="setActiveField('submit_field', myform.form_fields.length)"
class="Button btn col-sm-2 col-xs-4 focusOn" class="Button btn col-sm-2 col-xs-8 focusOn"
v-busy="loading" v-busy-label="Please wait" v-pressable v-busy="loading" v-busy-label="Please wait" v-pressable
ng-disabled="loading || forms.myForm.$invalid" ng-disabled="loading || forms.myForm.$invalid"
ng-click="submitForm()" ng-click="submitForm()"
@ -74,7 +74,7 @@ class="row field-directive">
Submit Submit
</button> </button>
<div class="col-sm-2 col-xs-6" style="font-size: 75%; margin-top:3.25em"> <div class="col-sm-2 hidden-xs" style="font-size: 75%; margin-top:3.25em">
<small> <small>
press ENTER press ENTER
</small> </small>
@ -102,14 +102,14 @@ class="row field-directive">
Edit this TellForm Edit this TellForm
</a> </a>
</div> </div>
<div class="col-md-4 col-sm-10 col-md-offset-0 col-sm-offset-2 col-xs-12"> <div class="col-md-4 col-sm-10 col-md-offset-0 col-sm-offset-2 col-xs-12 row">
<button class="btn btn-lg" id="focusDownButton" <button class="btn btn-lg col-xs-6" id="focusDownButton"
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}" ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
ng-click="nextField()" ng-click="nextField()"
ng-disabled="selected.index > myform.form_fields.length-1"> ng-disabled="selected.index > myform.form_fields.length-1">
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>
</button> </button>
<button class="btn btn-info btn-lg" id="focusUpButton" <button class="btn btn-lg col-xs-6" id="focusUpButton"
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}" ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
ng-click="prevField()" ng-click="prevField()"
ng-disabled="selected.index == 0"> ng-disabled="selected.index == 0">
@ -128,10 +128,10 @@ class="row field-directive">
style="padding-top: 5vh;"> style="padding-top: 5vh;">
<div class="field row text-center"> <div class="field row text-center">
<div class="col-xs-6 col-xs-offset-3 text-center">Form entry successfully submitted!</div> <div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-3 text-center">Form entry successfully submitted!</div>
</div> </div>
<div class="row form-actions"> <div class="row form-actions">
<p class="text-center col-xs-4 col-xs-offset-4"> <p class="text-center">
<button ng-click="reloadForm()" class="btn" type="button" <button ng-click="reloadForm()" class="btn" type="button"
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"> ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
<span style="font-size: 1.6em;"> Go back to Form</span> <span style="font-size: 1.6em;"> Go back to Form</span>