Commit 547521f5 authored by Ryan Herbert's avatar Ryan Herbert

sample_set form input styling

make the inputs look a little bit nicer with a little bit of css from
bootstrap
parent ee8dc084
......@@ -2422,3 +2422,31 @@ form {
font-weight: normal;
}
}
// taken and modified from the W3 schools webpage https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
.form-control {
padding: 3px 6px;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition-property: border-color, box-shadow;
transition-duration: 0.15s, 0.15s;
transition-timing-function: ease-in-out, ease-in-out;
transition-delay: 0s, 0s;
display: inline-block;
width: auto;
vertical-align: middle;
margin: 0;
}
.form-control:invalid {
border: 1px solid red;
-webkit-box-shadow: inset 0 1px 1px rgba(255,0,0,.075);
box-shadow: inset 0 1px 1px rgba(255,0,0,.075);
}
......@@ -39,7 +39,7 @@ FormBuilder.prototype = {
build_input: function(id, className, name, input_type, set_type, required, placeholder) {
var i = document.createElement('input');
i.id = set_type + "_" + id + "_" + this.index;
i.className = className;
i.className = "form-control " + className;
i.type = input_type;
i.name = set_type + "[" + this.index + "][" + name + "]";
......@@ -72,7 +72,7 @@ FormBuilder.prototype = {
build_textarea: function(id, className, name, set_type) {
var t = document.createElement('textarea');
t.id = set_type + "_" + id + "_" + this.index;
t.className = className;
t.className = "form-control " + className;
t.name = set_type + "[" + this.index + "][" + name + "]";
t.rows = 1;
return t;
......
......@@ -6,7 +6,7 @@
{{pass}}
<div class="field_div">
<label for="sample_set_name_{{=i}}" id="sample_set_name__label_{{=i}}">Name: </label>
<input class="string" id="sample_set_name_{{=i}}" name="generic[{{=i}}][name]" type="text"
<input id="sample_set_name_{{=i}}" name="generic[{{=i}}][name]" type="text" class="string form-control"
value="{{if set is not None:}}{{=set['name']}}{{pass}}" required>
</div>
<div class="field_div">
......@@ -15,7 +15,7 @@
onfocus="$(this).data('group-ids', [$('#group_select option:selected').val()]);
new VidjilAutoComplete().setupAtWho(this);"
data-needs-atwho="true"
class="text"
class="text form-control"
id="sample_set_info_{{=i}}"
name="generic[{{=i}}][info]"
rows="1">{{if set is not None and set['info'] is not None:}}{{=set['info']}}{{pass}}</textarea>
......
......@@ -6,22 +6,22 @@
{{ pass }}
<div class="field_div">
<label for="patient_id_label_{{=i}}" id="patient_id_label__label_{{=i}}">Patient ID: </label>
<input class="date" id="patient_id_label_{{=i}}" name="patient[{{=i}}][id_label]" type="text"
value="{{if set is not None and set['id_label'] is not None:}}{{=set['id_label']}}{{pass}}"><span></span>
<input class="date form-control" id="patient_id_label_{{=i}}" name="patient[{{=i}}][id_label]" type="text"
value="{{if set is not None and set['id_label'] is not None:}}{{=set['id_label']}}{{pass}}">
</div>
<div class="field_div">
<label for="patient_first_name_{{=i}}" id="patient_first_name__label_{{=i}}">First Name: </label>
<input class="string" id="patient_first_name_{{=i}}" name="patient[{{=i}}][first_name]" type="text"
<input class="string form-control" id="patient_first_name_{{=i}}" name="patient[{{=i}}][first_name]" type="text"
value="{{if set is not None:}}{{=set['first_name']}}{{pass}}" required>
</div>
<div class="field_div">
<label for="patient_last_name_{{=i}}" id="patient_last_name__label_{{=i}}">Last Name: </label>
<input class="string" id="patient_last_name_{{=i}}" name="patient[{{=i}}][last_name]" type="text"
<input class="string form-control" id="patient_last_name_{{=i}}" name="patient[{{=i}}][last_name]" type="text"
value="{{if set is not None:}}{{=set['last_name']}}{{pass}}" required>
</div>
<div class="field_div">
<label for="patient_birth_{{=i}}" id="patient_birth__label_{{=i}}">Birth: </label>
<input class="date" id="patient_birth_{{=i}}" name="patient[{{=i}}][birth]" type="text"
<input class="date form-control" id="patient_birth_{{=i}}" name="patient[{{=i}}][birth]" type="text"
value="{{if set is not None and set['birth'] is not None:}}{{=set['birth']}}{{pass}}"
placeholder="yyyy-mm-dd" title="yyyy-mm-dd" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
</div>
......@@ -31,7 +31,7 @@
onfocus="$(this).data('keys', [$('#group_select option:selected').val()]);
new VidjilAutoComplete().setupTags(this);"
data-needs-atwho="true"
class="text"
class="text form-control"
id="patient_info_{{=i}}"
name="patient[{{=i}}][info]"
rows="1">{{if set is not None and set['info'] is not None:}}{{=set['info']}}{{pass}}</textarea>
......
......@@ -11,12 +11,12 @@
</div>
<div class="field_div">
<label for="run_name_{{=i}}" id="run_name__label_{{=i}}">Name: </label>
<input class="string" id="run_name_{{=i}}" name="run[{{=i}}][name]" type="text"
<input class="string form-control" id="run_name_{{=i}}" name="run[{{=i}}][name]" type="text"
value="{{if set is not None:}}{{=set['name']}}{{pass}}" required>
</div>
<div class="field_div">
<label for="run_date_{{=i}}" id="run_date__label_{{=i}}">Date: </label>
<input class="date" id="run_date_{{=i}}" name="run[{{=i}}][run_date]" type="text"
<input id="run_date_{{=i}}" name="run[{{=i}}][run_date]" type="text" class="date form-control"
value="{{if set is not None and set['run_date'] is not None:}}{{=set['run_date']}}{{pass}}"
placeholder="yyyy-mm-dd" title="yyyy-mm-dd" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
</div>
......@@ -26,19 +26,19 @@
onfocus="$(this).data('group-ids', [$('#group_select option:selected').val()]);
new VidjilAutoComplete().setupAtWho(this);"
data-needs-atwho="true"
class="text"
class="text form-control"
id="run_info+{{=i}}"
name="run[{{=i}}][info]"
rows="1">{{if set is not None and set['info'] is not None:}}{{=set['info']}}{{pass}}</textarea>
</div>
<div class="field_div">
<label for="run_sequencer_{{=i}}" id="run_sequencer__label_{{=i}}">Sequencer: </label>
<input id="run_sequencer_{{=i}}" name="run[{{=i}}][sequencer]" type="text"
<input id="run_sequencer_{{=i}}" name="run[{{=i}}][sequencer]" type="text" class="form-control"
value="{{if set is not None and set['sequencer'] is not None:}}{{=set['sequencer']}}{{pass}}">
</div>
<div class="field_div">
<label for="run_pcr_{{=i}}" id="pcr__label_{{=i}}">PCR </label>
<input id="run_pcr_{{=i}}" name="run[{{=i}}][pcr]" type="text"
<input id="run_pcr_{{=i}}" name="run[{{=i}}][pcr]" type="text" class="form-control"
value="{{if set is not None and set['pcr'] is not None:}}{{=set['pcr']}}{{pass}}">
</div>
</fieldset>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment