From 697104dcce65f8e9509f9f729c11db1e8befe2c4 Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Fri, 6 May 2016 22:28:12 +0200
Subject: [PATCH] hovercard: some polishing

---
 css/hovercard.css         | 15 ++++++++++++---
 css/style.css             | 10 +++++++++-
 js/hovercard.js           | 26 +++++++++++++-------------
 templates/search_item.tpl |  2 +-
 templates/wall_thread.tpl |  6 +++---
 5 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/css/hovercard.css b/css/hovercard.css
index 54dff6a402..b646bf4f28 100644
--- a/css/hovercard.css
+++ b/css/hovercard.css
@@ -240,7 +240,7 @@ a:visited {
 
 /* Basic hovercard */
 .basic-content {
-  padding: 9px 14px;
+  padding: 9px;
 }
 .basic-image-wrapper {
   background: #fff;
@@ -425,6 +425,7 @@ a:visited {
 .image-wrapper.medium > a img {
   height: 80px;
   width: 80px;
+  margin-bottom: 0;
 }
 .image-wrapper.large {
   max-width: 140px;
@@ -451,7 +452,7 @@ a:visited {
   border-radius: 4px;
   /*max-width: 250px;*/
   max-width: 400px;
-  width: 400px;
+  width: 350px;
   -webkit-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.25);
   -moz-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.25);
   box-shadow: 0 10px 100px rgba(0, 0, 0, 0.25);
@@ -493,7 +494,7 @@ a:visited {
 .hover-card-header h4 {
   /*float: left;*/
   display: block;
-  width: 310px;
+  /*width: 310px;*/
   /*margin-top: 25px;*/
   /*clear: right;*/
 }
@@ -533,6 +534,11 @@ a:visited {
 .hover-card-content .profile-details {
     font-size: 13px;
 }
+.hover-card-content .profile-addr {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+}
 .hover-card-content li.right-aligned {
   padding: .15em 1.25em;
   border-left: 1px #F3F2F2 solid;
@@ -573,6 +579,9 @@ a:visited {
 .hover-card-actions-connection {
   margin-left: 30px;
 }
+.hovercard .hovercard-content .hover-card-actions a.btn {
+  display: inline-block;
+}
 .hover-card-options-wrapper {
   position: relative;
   display: block;
diff --git a/css/style.css b/css/style.css
index f06481112a..d17e283503 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1163,7 +1163,11 @@ section #jotOpen {
 .media .media-body h5.media-heading a {
     display: block;
 }
-.media .contact-info-xs h5 {
+.media .contact-info-comment {
+    display: table-cell;
+}
+.media .contact-info-xs h5,
+.media .contact-info-comment {
     margin: 0 0 5px;
 }
 .media-heading {
@@ -1173,6 +1177,10 @@ section #jotOpen {
     font-size: 15px;
     font-weight: bold;
 }
+.wall-item-name.xs {
+    font-weight: 700;
+    font-size: 14px;
+}
 
 /* The lock symbol popup */
 #panel {
diff --git a/js/hovercard.js b/js/hovercard.js
index c42b0ce2f1..55d2b2496d 100644
--- a/js/hovercard.js
+++ b/js/hovercard.js
@@ -95,19 +95,19 @@ $('body').on("mouseleave touchstart scroll click dblclick mousedown mouseup subm
 // removes all hover cards
 function removeAllhoverCards(event,priorTo) {
 	// don't remove hovercards until after 100ms, so user have time to move the cursor to it (which gives it the dont-remove-card class)
-	setTimeout(function(){
-		$.each($('.hovercard'),function(){
-			var title = $(this).attr("data-orig-title");
-			// don't remove card if it was created after removeAllhoverCards() was called
-			if($(this).data('card-created') < priorTo) {
-				// don't remove it if we're hovering it right now!
-				if(!$(this).hasClass('dont-remove-card')) {
-					$('[data-hover-card-active="' + $(this).data('card-created') + '"]').removeAttr('data-hover-card-active');
-					$(this).popover("hide");
-				}
-			}
-		});
-	},100);
+//	setTimeout(function(){
+//		$.each($('.hovercard'),function(){
+//			var title = $(this).attr("data-orig-title");
+//			// don't remove card if it was created after removeAllhoverCards() was called
+//			if($(this).data('card-created') < priorTo) {
+//				// don't remove it if we're hovering it right now!
+//				if(!$(this).hasClass('dont-remove-card')) {
+//					$('[data-hover-card-active="' + $(this).data('card-created') + '"]').removeAttr('data-hover-card-active');
+//					$(this).popover("hide");
+//				}
+//			}
+//		});
+//	},100);
 }
 
 // if we're hovering a hover card, give it a class, so we don't remove it
diff --git a/templates/search_item.tpl b/templates/search_item.tpl
index cffcf3fb15..da5b0d8e98 100644
--- a/templates/search_item.tpl
+++ b/templates/search_item.tpl
@@ -96,7 +96,7 @@
 			{{* contact info header for smartphones *}}
 			<div role="heading " class="contact-info-xs hidden-lg hidden-md">
 				<h5 class="media-heading">
-					<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo"><strong>{{$item.name}}</strong></a>
+					<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo"><span>{{$item.name}}</span></a>
 					<p class="text-muted"><small>
 						<span class="wall-item-ago">{{$item.ago}}</span> {{if $item.location}}&nbsp;&mdash;&nbsp;({{$item.location}}){{/if}}</small>
 					</p>
diff --git a/templates/wall_thread.tpl b/templates/wall_thread.tpl
index 37971b3bc2..eaeb23c98e 100644
--- a/templates/wall_thread.tpl
+++ b/templates/wall_thread.tpl
@@ -205,7 +205,7 @@ as the value of $top_child_total (this is done at the end of this file)
 		{{* contact info header for smartphones *}}
 		<div role="heading " aria-level="{{$item.thread_level}}" class="contact-info-xs hidden-lg hidden-md"><!-- <= For smartphone (responsive) -->
 			<h5 class="media-heading">
-				<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo"><strong>{{$item.name}}</strong></a>
+				<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo"><span>{{$item.name}}</span></a>
 				<p class="text-muted">
 					<small><span class="wall-item-ago">{{$item.ago}}</span> {{if $item.location}}&nbsp;&mdash;&nbsp;({{$item.location}}){{/if}}</small>
 				</p>
@@ -216,9 +216,9 @@ as the value of $top_child_total (this is done at the end of this file)
 		{{* contact info header for comments *}}
 		{{if $item.thread_level!=1}}
 		<div class="media-body">{{*this is the media body for comments - this div must be closed at the end of the file *}}
-		<div role="heading " aria-level="{{$item.thread_level}}" class="contact-info-xs">
+		<div role="heading " aria-level="{{$item.thread_level}}" class="contact-info-comment">
 			<h5 class="media-heading">
-				<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo"><strong class="btn-link">{{$item.name}}</strong></a>
+				<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo"><span class="btn-link">{{$item.name}}</span></a>
 				<span class="text-muted">
 					<small><span title="{{$item.localtime}}" data-toggle="tooltip">{{$item.ago}}</span> {{if $item.location}}&nbsp;&mdash;&nbsp;({{$item.location}}){{/if}}</small>
 				</span>