GUAC-1161: Use labels and CSS for form layout.

This commit is contained in:
Michael Jumper
2015-04-20 23:33:19 -07:00
parent 999be47b20
commit a97145edf6
3 changed files with 21 additions and 9 deletions

View File

@@ -25,13 +25,11 @@
<h3 ng-show="form.name">{{getSectionHeader(form) | translate}}</h3>
<!-- All fields in form -->
<table class="fields">
<tr ng-repeat="field in form.fields">
<th>{{getFieldHeader(field) | translate}}</th>
<td>
<guac-form-field namespace="namespace" field="field" model="values[field.name]"></guac-form-field>
</td>
</tr>
</table>
<div class="fields">
<label ng-repeat="field in form.fields" class="labeled-field">
<span class="field-header">{{getFieldHeader(field) | translate}}</span>
<guac-form-field namespace="namespace" field="field" model="values[field.name]"></guac-form-field>
</label>
</div>
</div>

View File

@@ -1,4 +1,4 @@
<div class="form-field">
<div class="form-field" ng-class="{empty: !model}">
<!--
Copyright 2014 Glyptodon LLC.

View File

@@ -26,3 +26,17 @@
.connection-parameters input[type=number] {
width: auto;
}
.connection-parameters .form .fields {
display: table;
}
.connection-parameters .form .fields .labeled-field {
display: table-row;
}
.connection-parameters .form .fields .field-header,
.connection-parameters .form .fields .form-field {
display: table-cell;
padding: 0.125em;
}