diff options
-rw-r--r-- | css/public/style.css | 32 | ||||
-rw-r--r-- | templates/contactDetails.html | 4 | ||||
-rw-r--r-- | templates/detailItems/adr.html | 38 | ||||
-rw-r--r-- | templates/detailItems/date.html | 2 | ||||
-rw-r--r-- | templates/detailItems/text.html | 2 | ||||
-rw-r--r-- | templates/detailItems/textarea.html | 4 | ||||
-rw-r--r-- | templates/detailItems/url.html | 4 |
7 files changed, 64 insertions, 22 deletions
diff --git a/css/public/style.css b/css/public/style.css index 173581c3..708ad8bb 100644 --- a/css/public/style.css +++ b/css/public/style.css @@ -57,7 +57,7 @@ } .contactdetails__header + section { - padding: 20px; + padding: 20px 20px 100px; } detailsitem { @@ -68,6 +68,36 @@ detailsitem label { width: 80px; display: inline-block; text-align: right; + opacity: .5; +} +detailsitem label ~ textarea { + vertical-align: top; + padding-top: 10px; +} +.url-link { + padding: 8px 10px; + margin-left: -6px; + opacity: .5; +} + +.select-addressbook, +.add-field { + margin-left: 83px; +} + +detailsitem input[type="text"], +detailsitem input[type="password"], +detailsitem input[type="search"], +detailsitem input[type="number"], +detailsitem input[type="email"], +detailsitem input[type="tel"], +detailsitem input[type="url"], +detailsitem input[type="time"], +detailsitem input[type="date"], +detailsitem textarea, +.select-addressbook select, +.add-field { + width: 200px; } diff --git a/templates/contactDetails.html b/templates/contactDetails.html index 7d475d05..04c03be5 100644 --- a/templates/contactDetails.html +++ b/templates/contactDetails.html @@ -14,11 +14,11 @@ </header> <section> <detailsItem ng-repeat="prop in ctrl.singleProperties" name="prop.name" data="prop.data" model="ctrl" index="prop.index" ng-class="[ 'details-item-' + prop.name ]"></detailsItem> - <div ng-if="addressBooks.length > 1"> + <div class="select-addressbook" ng-if="addressBooks.length > 1"> <select ng-model="addressBook" ng-change="ctrl.changeAddressBook(addressBook)" ng-options="book.id for book in addressBooks track by book.id"> </select> </div> - <select ng-model="field" ng-change="ctrl.addField(field)"> + <select class="add-field" ng-model="field" ng-change="ctrl.addField(field)"> <option value=''>{{ctrl.t.selectField}}</option> <option ng-repeat="field in ctrl.fieldDefinitions | fieldFilter: ctrl.contact | orderBy : 'name'" value="{{field.id}}">{{field.name}}</option> </select> diff --git a/templates/detailItems/adr.html b/templates/detailItems/adr.html index adca0db8..bce6ffbb 100644 --- a/templates/detailItems/adr.html +++ b/templates/detailItems/adr.html @@ -1,17 +1,29 @@ <select ng-model="ctrl.type" ng-model-options="{ debounce: 500 }" ng-change="ctrl.changeType(ctrl.type)"> <option ng-repeat="option in ctrl.availableOptions" value="{{option.id}}">{{option.name}}</option> </select> -<label for="details-pobox">{{ctrl.t.poBox}}</label> -<input type="text" id="details-pobox" name="address" ng-model="ctrl.data.value[0]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" /> -<label for="details-address">{{ctrl.t.address}}</label> -<input type="text" id="details-address" name="address" ng-model="ctrl.data.value[2]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" - focus-expression="$parent.ctrl.focus === ctrl.name" /> -<label for="details-postal-code">{{ctrl.t.postalCode}}</label> -<input type="text" id="details-postal-code" name="postal-code" ng-model="ctrl.data.value[5]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" /> -<label for="details-city">{{ctrl.t.city}}</label> -<input type="text" id="details-city" name="city" ng-model="ctrl.data.value[3]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" /> -<label for="details-state">{{ctrl.t.state}}</label> -<input type="text" id="details-state" name="state" ng-model="ctrl.data.value[4]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" /> -<label for="details-country">{{ctrl.t.country}}</label> -<input type="text" id="details-country" name="state" ng-model="ctrl.data.value[6]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" /> +<div> + <label for="details-pobox">{{ctrl.t.poBox}}</label> + <input type="text" id="details-pobox" name="address" ng-model="ctrl.data.value[0]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" /> +</div> +<div> + <label for="details-address">{{ctrl.t.address}}</label> + <input type="text" id="details-address" name="address" ng-model="ctrl.data.value[2]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" + focus-expression="$parent.ctrl.focus === ctrl.name" /> +</div> +<div> + <label for="details-postal-code">{{ctrl.t.postalCode}}</label> + <input type="text" id="details-postal-code" name="postal-code" ng-model="ctrl.data.value[5]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" /> +</div> +<div> + <label for="details-city">{{ctrl.t.city}}</label> + <input type="text" id="details-city" name="city" ng-model="ctrl.data.value[3]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" /> +</div> +<div> + <label for="details-state">{{ctrl.t.state}}</label> + <input type="text" id="details-state" name="state" ng-model="ctrl.data.value[4]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" /> +</div> +<div> + <label for="details-country">{{ctrl.t.country}}</label> + <input type="text" id="details-country" name="state" ng-model="ctrl.data.value[6]" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" /> +</div> <button ng-click="ctrl.deleteField()" class="icon-delete" title="Delete"></button> diff --git a/templates/detailItems/date.html b/templates/detailItems/date.html index 08664fd9..b066361d 100644 --- a/templates/detailItems/date.html +++ b/templates/detailItems/date.html @@ -1,4 +1,4 @@ -<label for="details-{{ctrl.name}}">{{ctrl.meta.readableName}}:</label> +<label for="details-{{ctrl.name}}">{{ctrl.meta.readableName}}</label> <input type="text" id="details-{{ctrl.name}}" name="{{ctrl.name}}" ng-model="ctrl.data.value" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" diff --git a/templates/detailItems/text.html b/templates/detailItems/text.html index 08664fd9..b066361d 100644 --- a/templates/detailItems/text.html +++ b/templates/detailItems/text.html @@ -1,4 +1,4 @@ -<label for="details-{{ctrl.name}}">{{ctrl.meta.readableName}}:</label> +<label for="details-{{ctrl.name}}">{{ctrl.meta.readableName}}</label> <input type="text" id="details-{{ctrl.name}}" name="{{ctrl.name}}" ng-model="ctrl.data.value" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" diff --git a/templates/detailItems/textarea.html b/templates/detailItems/textarea.html index 25e83eca..38dc0dca 100644 --- a/templates/detailItems/textarea.html +++ b/templates/detailItems/textarea.html @@ -1,6 +1,6 @@ -<label for="details-{{ctrl.name}}">{{ctrl.meta.readableName}}:</label> +<label for="details-{{ctrl.name}}">{{ctrl.meta.readableName}}</label> <textarea id="details-{{ctrl.name}}" name="{{ctrl.name}}" - ng-model="ctrl.data.value" rows="8" cols="40" + ng-model="ctrl.data.value" rows="3" cols="40" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" focus-expression="$parent.ctrl.focus === ctrl.name"> </textarea> diff --git a/templates/detailItems/url.html b/templates/detailItems/url.html index 4e32c5b7..08cc58e3 100644 --- a/templates/detailItems/url.html +++ b/templates/detailItems/url.html @@ -1,8 +1,8 @@ -<label for="details-{{ctrl.name}}">{{ctrl.meta.readableName}}:</label> +<label for="details-{{ctrl.name}}">{{ctrl.meta.readableName}}</label> <input type="text" id="details-{{ctrl.name}}" name="{{ctrl.name}}" ng-model="ctrl.data.value" ng-model-options="{ debounce: 500 }" ng-change="ctrl.model.updateContact()" value="" focus-expression="$parent.ctrl.focus === ctrl.name" /> <button ng-click="ctrl.deleteField()" class="icon-delete" title="Delete"></button> -<a target="_blank" href="{{ctrl.data.value}}">Open</a> +<a class="url-link" target="_blank" href="{{ctrl.data.value}}">↗</a> |