Single contact export button

Added addressbook export button
Fixed header css and export button location
+ add empty div to replace empty space if no picture

1 files changed, 47 insertions, 28 deletions

diff --git a/css/public/style.css b/css/public/style.css
index 83af8bba..a0fb2fe2 100644
--- a/css/public/style.css
+++ b/css/public/style.css
@@ -7,41 +7,43 @@
 	align-items: center;
 }
 
+.contactdetails__header #details-contact-infos {
+	width: 80%;
+	margin: 2px 6px 0px;
+	flex-grow: 1;
+}
 .contactdetails__header h2 {
-	position: absolute;
-	top: 15px;
-	left: 100px;
-	width: 75%;
+	margin: 0;
 }
 .contactdetails__header #details-org-container {
-	position: absolute;
 	display: flex;
-	top: 50px;
-	left: 100px;
-	width: 70%;
+	flex-wrap: wrap;
 }
 .contactdetails__header .contactdetails__name,
 .contactdetails__header .contactdetails__org,
 .contactdetails__header .contactdetails__title {
-	font-size: inherit !important;
-	width: auto !important;
-	color: #fff !important;
-	background: transparent !important;
-	border: none !important;
+	font-size: inherit;
+	color: #fff !important; /* override focus,active&hover */
+	background: transparent;
+	border: none;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
 	max-width: 100%;
-	min-width: 25%;
-	margin: 3px 0;
+	margin: 0;
+    padding: 4px 5px;
 }
 .contactdetails__header .contactdetails__org,
 .contactdetails__header .contactdetails__title {
 	max-width: 50%;
+	min-width: 150px;
 }
 .contactdetails__header .contactdetails__name {
-    max-width: 100%;
-    width: 100% !important;
+    width: 100%;
+}
+.contactdetails__header #details-actions {
+	display: flex;
+	flex-shrink: 0;
 }
 /* fix placeholder color */
 .contactdetails__header .contactdetails__name::-webkit-input-placeholder,
@@ -69,26 +71,45 @@
 	opacity: .8;
 }
 
-.contactdetails__header .icon-delete-white {
-	position: absolute;
-	right: 0;
+.contactdetails__header .icon-delete-white,
+.contactdetails__header #contact-export-link {
 	padding: 15px;
-	right: 15px;
-	top: 30px;
 	background-color: transparent;
 	border: none;
 	opacity: .5;
+	margin: 3px;
 }
 .contactdetails__header .icon-delete-white:hover,
-.contactdetails__header .icon-delete-white:focus {
+.contactdetails__header .icon-delete-white:focus,
+.contactdetails__header #contact-export-link:hover,
+.contactdetails__header #contact-export-link:focus {
 	opacity: .7
 }
 
-.contactdetails__logo {
+.contactdetails__header .contactdetails__logo {
 	height: 75px;
 	width: 75px;
 	object-fit: cover;
 	background-color: transparent;
+	flex-shrink: 0;
+	margin: 0;
+}
+.contactdetails__header .contactdetails__logo.contact__icon {
+	background-color: transparent;
+	height: 75px;
+	width: 75px;
+	font-size: 2.5em;
+	line-height: 75px;
+}
+.contactdetails__header .contactdetails__logo.contact__icon > span {
+	display: block;
+	width: 100%;
+	height: 100%;
+	opacity: 0.5;
+	cursor: pointer;
+}
+.contactdetails__header .contactdetails__logo.contact__icon:hover > span {
+	opacity: 0.7;
 }
 
 #check-all + label:before {
@@ -239,10 +260,8 @@ ul.addressBook-share-list li {
 	margin-left: 15px;
 }
 
-ul.addressBookList li .action .icon-public,
-ul.addressBookList li .action .icon-share,
-ul.addressBookList li .action .icon-delete {
-	padding: 10px 18px;
+ul.addressBookList li .action > span {
+	padding: 10px 14px;
 }
 
 div.addressBookShares ul.dropdown-menu {