styling details page, second pass

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>