prettier item-action overflow

4 files changed, 16 insertions, 8 deletions

diff --git a/css/public/style.css b/css/public/style.css
index 8f7759ae..f5764886 100644
--- a/css/public/style.css
+++ b/css/public/style.css
@@ -264,11 +264,15 @@ detailsitem .icon-delete {
 
 detailsitem .item-action {
 	position: absolute;
-	padding: 8px 10px;
-	margin-left: -30px;
+	padding: 8px 5px;
 	opacity: .5;
 	top: 2px;
-	right: 33px;
+	right: 30px;
+}
+
+detailsitem .item-action ~ input {
+	padding-right: 30px;
+	text-overflow: ellipsis;
 }
 
 detailsitem .item-action i {
diff --git a/templates/detailItems/email.html b/templates/detailItems/email.html
index c31f629f..d297bf9d 100644
--- a/templates/detailItems/email.html
+++ b/templates/detailItems/email.html
@@ -1,6 +1,9 @@
 <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>
+<a ng-if="ctrl.data.value.length" class="item-action" href="mailto:{{ctrl.data.value}}">
+    <i class="icon-mail"></i>
+</a>
 <input type="email" id="details-{{ctrl.name}}-{{ctrl.index}}" name="email"
        ng-model="ctrl.data.value" email-model ng-model-options="{ debounce: 500 }"
        ng-change="ctrl.model.updateContact()" value=""
@@ -8,6 +11,3 @@
        focus-expression="$parent.ctrl.focus === ctrl.name"
 />
 <button ng-click="ctrl.deleteField()" class="icon-delete" title="{{ctrl.t.delete}}"></button>
-<a ng-if="ctrl.data.value.length" class="item-action" href="mailto:{{ctrl.data.value}}">
-    <i class="icon-mail"></i>
-</a>
diff --git a/templates/detailItems/tel.html b/templates/detailItems/tel.html
index c522976c..340d90cc 100644
--- a/templates/detailItems/tel.html
+++ b/templates/detailItems/tel.html
@@ -1,6 +1,9 @@
 <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>
+<a ng-if="ctrl.data.value.length" class="item-action" href="tel:{{ctrl.data.value}}">
+    <i class="icon-comment"></i>
+</a>
 <input type="tel" id="details-{{ctrl.name}}-{{ctrl.index}}" name="phone"
        ng-model="ctrl.data.value" tel-model ng-model-options="{ debounce: 500 }"
        ng-change="ctrl.model.updateContact()" value=""
@@ -8,4 +11,3 @@
        focus-expression="$parent.ctrl.focus === ctrl.name"
 />
 <button ng-click="ctrl.deleteField()" class="icon-delete" title="{{ctrl.t.delete}}"></button>
-<a ng-if="ctrl.data.value.length" class="item-action" href="tel:{{ctrl.data.value}}">📞</a>
diff --git a/templates/detailItems/url.html b/templates/detailItems/url.html
index d8cdd2e5..e3bf47f0 100644
--- a/templates/detailItems/url.html
+++ b/templates/detailItems/url.html
@@ -1,4 +1,7 @@
 <label for="details-{{ctrl.name}}-{{ctrl.index}}">{{ctrl.meta.readableName}}</label>
+<a ng-if="ctrl.data.value.length" class="item-action" target="_blank" href="{{ctrl.data.value}}">
+	<i class="icon-external"></i>
+</a>
 <input type="url" id="details-{{ctrl.name}}-{{ctrl.index}}" name="{{ctrl.name}}"
 	   ng-model="ctrl.data.value" ng-model-options="{ debounce: 500, allowInvalid: true }"
 	   ng-change="ctrl.model.updateContact()" value=""
@@ -6,4 +9,3 @@
 	   focus-expression="$parent.ctrl.focus === ctrl.name"
 />
 <button ng-click="ctrl.deleteField()" class="icon-delete" title="{{ctrl.t.delete}}"></button>
-<a ng-if="ctrl.data.value.length" class="item-action" target="_blank" href="{{ctrl.data.value}}">↗</a>