added styling for yes/no

This commit is contained in:
David Baldwynn 2016-04-12 09:41:22 -04:00
parent ed860c9a3d
commit 37c9d7f364
8 changed files with 75 additions and 23 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -80,6 +80,26 @@ div.form-fields {
position: relative;
margin-top: 25vh;
}
.letter {
position: relative;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
width: 16px;
padding: 0;
height: 17px;
font-size: 12px;
line-height: 19px;
border: 1px solid #000;
border: 1px solid rgba(0,0,0,.2);
margin-right: 7px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
text-align: center;
font-weight: 700;
}
div.form-submitted > .field.row {
padding-bottom: 10%;

View file

@ -1,5 +1,14 @@
<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">
<input ng-focus="setActiveField(field._id, index)"
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
@ -24,7 +33,7 @@
</div>
<div class="col-sm-3" style="margin-top:0.2em">
<small style="color:#ddd; font-size:70%">
press ENTER
press ENTER
</small>
</div>
</div>

View file

@ -12,15 +12,38 @@
</div>
<div class="col-xs-12 field-input">
<div class="row-fluid">
<label class="btn btn-success col-xs-3">
<input ng-focus="setActiveField(field._id, index)" type="radio" value="true" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled" ng-init="field.fieldValue = true"/>
<span>Yes</span>
<div class="row">
<label class="btn btn-default col-xs-2"
style="background: rgba(0,0,0,0.1); text-align:left;">
<input ng-focus="setActiveField(field._id, index)"
type="radio" value="true"
style="display: none;"
ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }"
ng-required="field.required"
ng-disabled="field.disabled" />
<div class="letter">
Y
</div>
<span>Yes</span>
<i ng-show="field.fieldValue == true" class="fa fa-check" aria-hidden="true"></i>
</label>
<label class="btn btn-danger col-xs-3">
<input ng-focus="setActiveField(field._id, index)" type="radio" value="false" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
<span>No</span>
</div>
<div class="row" style="margin-top: 10px;">
<label class="btn btn-default col-xs-2"
style="background: rgba(0,0,0,0.1); text-align:left;">
<input ng-focus="setActiveField(field._id, index)"
type="radio" value="false"
style="display: none;"
ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }"
ng-required="field.required"
ng-disabled="field.disabled"/>
<div class="letter">
N
</div>
<span>No</span>
<i ng-show="field.fieldValue == false" class="fa fa-check" aria-hidden="true"></i>
</label>
</div>
</div>

View file

@ -19,7 +19,7 @@
<div class="row form-actions text-center" style="padding: 5px 25px 5px 25px;">
<button ng-click="exitStartPage()" class="btn btn-info" type="button">
<a style="color:grey; font-size: 1.6em; text-decoration: none;">
<a style="font-size: 1.6em; text-decoration: none;">
Start
</a>
</button>

File diff suppressed because one or more lines are too long