made form submit view more mobile friendly/responsive
This commit is contained in:
parent
f49be263d4
commit
09b14ffc6d
12
public/dist/application.js
vendored
12
public/dist/application.js
vendored
File diff suppressed because one or more lines are too long
4
public/dist/application.min.js
vendored
4
public/dist/application.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
<div class="col-xs-12 field-input container">
|
||||
<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-click="nextField()">
|
||||
<input class="focusOn"
|
||||
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
<span> I accept </span>
|
||||
</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-click="nextField()">
|
||||
<input class="focusOn"
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
<div class="col-xs-12 field-input">
|
||||
|
||||
<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"
|
||||
ng-click="nextField()"
|
||||
ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_value}">
|
||||
|
|
|
@ -22,22 +22,20 @@
|
|||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 row">
|
||||
<div class="btn btn-lg btn-default row-fluid"
|
||||
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':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
|
||||
class="btn col-sm-5 col-xs-5">
|
||||
<div>
|
||||
<div class="btn btn-lg btn-default col-xs-12"
|
||||
style="padding: 4px; margin-top:8px; background: rgba(255,255,255,0.5)">
|
||||
<button ng-disabled="!field.fieldValue || forms.myForm.{{field.fieldType}}{{$index}}.$invalid"
|
||||
ng-style="{'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
|
||||
ng-click="$root.nextField()"
|
||||
class="btn col-sm-5 col-xs-5">
|
||||
|
||||
OK <i class="fa fa-check"></i>
|
||||
</button>
|
||||
OK <i class="fa fa-check"></i>
|
||||
</button>
|
||||
<div class="col-sm-3 col-xs-6" style="margin-top:0.2em">
|
||||
<small style="color:#ddd; font-size:70%">
|
||||
press ENTER
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<small style="color:#ddd; font-size:70%">
|
||||
press ENTER
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -40,8 +40,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 row">
|
||||
<div class="btn btn-lg btn-default row-fluid"
|
||||
<div>
|
||||
<div class="btn btn-lg btn-default col-xs-12"
|
||||
style="padding: 4px; margin-top:8px; background: rgba(255,255,255,0.5)">
|
||||
<button ng-disabled="!field.fieldValue || forms.myForm.{{field.fieldType}}{{$index}}.$invalid"
|
||||
ng-style="{'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
|
||||
|
|
|
@ -6,8 +6,9 @@
|
|||
{{index+1}}
|
||||
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
|
||||
</small>
|
||||
<span class="required-error" ng-show="field.required && !field.fieldValue">
|
||||
*(required)
|
||||
{{field.title}}
|
||||
<span class="required-error" ng-show="!field.required">
|
||||
optional
|
||||
</span>
|
||||
</h3>
|
||||
<p class="row">
|
||||
|
@ -17,7 +18,7 @@
|
|||
|
||||
<div class="col-xs-12 field-input">
|
||||
<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;">
|
||||
<input type="radio" value="true"
|
||||
class="focusOn"
|
||||
|
@ -37,7 +38,7 @@
|
|||
</div>
|
||||
|
||||
<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;">
|
||||
|
||||
<input type="radio" value="false"
|
||||
|
|
|
@ -61,10 +61,10 @@ class="row field-directive">
|
|||
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: 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)"
|
||||
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
|
||||
ng-disabled="loading || forms.myForm.$invalid"
|
||||
ng-click="submitForm()"
|
||||
|
@ -74,7 +74,7 @@ class="row field-directive">
|
|||
Submit
|
||||
</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>
|
||||
press ENTER
|
||||
</small>
|
||||
|
@ -102,14 +102,14 @@ class="row field-directive">
|
|||
Edit this TellForm
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-10 col-md-offset-0 col-sm-offset-2 col-xs-12">
|
||||
<button class="btn btn-lg" id="focusDownButton"
|
||||
<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 col-xs-6" id="focusDownButton"
|
||||
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
|
||||
ng-click="nextField()"
|
||||
ng-disabled="selected.index > myform.form_fields.length-1">
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</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-click="prevField()"
|
||||
ng-disabled="selected.index == 0">
|
||||
|
@ -128,10 +128,10 @@ class="row field-directive">
|
|||
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>
|
||||
<div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-3 text-center">Form entry successfully submitted!</div>
|
||||
</div>
|
||||
<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"
|
||||
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
|
||||
<span style="font-size: 1.6em;"> Go back to Form</span>
|
||||
|
|
Loading…
Reference in a new issue