hovercard: some polishing

This commit is contained in:
rabuzarus 2016-05-06 22:28:12 +02:00
parent 415c36e4bb
commit 697104dcce
5 changed files with 38 additions and 21 deletions

View File

@ -240,7 +240,7 @@ a:visited {
/* Basic hovercard */ /* Basic hovercard */
.basic-content { .basic-content {
padding: 9px 14px; padding: 9px;
} }
.basic-image-wrapper { .basic-image-wrapper {
background: #fff; background: #fff;
@ -425,6 +425,7 @@ a:visited {
.image-wrapper.medium > a img { .image-wrapper.medium > a img {
height: 80px; height: 80px;
width: 80px; width: 80px;
margin-bottom: 0;
} }
.image-wrapper.large { .image-wrapper.large {
max-width: 140px; max-width: 140px;
@ -451,7 +452,7 @@ a:visited {
border-radius: 4px; border-radius: 4px;
/*max-width: 250px;*/ /*max-width: 250px;*/
max-width: 400px; max-width: 400px;
width: 400px; width: 350px;
-webkit-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.25);
-moz-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); box-shadow: 0 10px 100px rgba(0, 0, 0, 0.25);
@ -493,7 +494,7 @@ a:visited {
.hover-card-header h4 { .hover-card-header h4 {
/*float: left;*/ /*float: left;*/
display: block; display: block;
width: 310px; /*width: 310px;*/
/*margin-top: 25px;*/ /*margin-top: 25px;*/
/*clear: right;*/ /*clear: right;*/
} }
@ -533,6 +534,11 @@ a:visited {
.hover-card-content .profile-details { .hover-card-content .profile-details {
font-size: 13px; font-size: 13px;
} }
.hover-card-content .profile-addr {
overflow: hidden;
display: block;
text-overflow: ellipsis;
}
.hover-card-content li.right-aligned { .hover-card-content li.right-aligned {
padding: .15em 1.25em; padding: .15em 1.25em;
border-left: 1px #F3F2F2 solid; border-left: 1px #F3F2F2 solid;
@ -573,6 +579,9 @@ a:visited {
.hover-card-actions-connection { .hover-card-actions-connection {
margin-left: 30px; margin-left: 30px;
} }
.hovercard .hovercard-content .hover-card-actions a.btn {
display: inline-block;
}
.hover-card-options-wrapper { .hover-card-options-wrapper {
position: relative; position: relative;
display: block; display: block;

View File

@ -1163,7 +1163,11 @@ section #jotOpen {
.media .media-body h5.media-heading a { .media .media-body h5.media-heading a {
display: block; 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; margin: 0 0 5px;
} }
.media-heading { .media-heading {
@ -1173,6 +1177,10 @@ section #jotOpen {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
} }
.wall-item-name.xs {
font-weight: 700;
font-size: 14px;
}
/* The lock symbol popup */ /* The lock symbol popup */
#panel { #panel {

View File

@ -95,19 +95,19 @@ $('body').on("mouseleave touchstart scroll click dblclick mousedown mouseup subm
// removes all hover cards // removes all hover cards
function removeAllhoverCards(event,priorTo) { 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) // 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(){ // setTimeout(function(){
$.each($('.hovercard'),function(){ // $.each($('.hovercard'),function(){
var title = $(this).attr("data-orig-title"); // var title = $(this).attr("data-orig-title");
// don't remove card if it was created after removeAllhoverCards() was called // // don't remove card if it was created after removeAllhoverCards() was called
if($(this).data('card-created') < priorTo) { // if($(this).data('card-created') < priorTo) {
// don't remove it if we're hovering it right now! // // don't remove it if we're hovering it right now!
if(!$(this).hasClass('dont-remove-card')) { // if(!$(this).hasClass('dont-remove-card')) {
$('[data-hover-card-active="' + $(this).data('card-created') + '"]').removeAttr('data-hover-card-active'); // $('[data-hover-card-active="' + $(this).data('card-created') + '"]').removeAttr('data-hover-card-active');
$(this).popover("hide"); // $(this).popover("hide");
} // }
} // }
}); // });
},100); // },100);
} }
// if we're hovering a hover card, give it a class, so we don't remove it // if we're hovering a hover card, give it a class, so we don't remove it

View File

@ -96,7 +96,7 @@
{{* contact info header for smartphones *}} {{* contact info header for smartphones *}}
<div role="heading " class="contact-info-xs hidden-lg hidden-md"> <div role="heading " class="contact-info-xs hidden-lg hidden-md">
<h5 class="media-heading"> <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> <p class="text-muted"><small>
<span class="wall-item-ago">{{$item.ago}}</span> {{if $item.location}}&nbsp;&mdash;&nbsp;({{$item.location}}){{/if}}</small> <span class="wall-item-ago">{{$item.ago}}</span> {{if $item.location}}&nbsp;&mdash;&nbsp;({{$item.location}}){{/if}}</small>
</p> </p>

View File

@ -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 *}} {{* contact info header for smartphones *}}
<div role="heading " aria-level="{{$item.thread_level}}" class="contact-info-xs hidden-lg hidden-md"><!-- <= For smartphone (responsive) --> <div role="heading " aria-level="{{$item.thread_level}}" class="contact-info-xs hidden-lg hidden-md"><!-- <= For smartphone (responsive) -->
<h5 class="media-heading"> <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"> <p class="text-muted">
<small><span class="wall-item-ago">{{$item.ago}}</span> {{if $item.location}}&nbsp;&mdash;&nbsp;({{$item.location}}){{/if}}</small> <small><span class="wall-item-ago">{{$item.ago}}</span> {{if $item.location}}&nbsp;&mdash;&nbsp;({{$item.location}}){{/if}}</small>
</p> </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 *}} {{* contact info header for comments *}}
{{if $item.thread_level!=1}} {{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 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"> <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"> <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> <small><span title="{{$item.localtime}}" data-toggle="tooltip">{{$item.ago}}</span> {{if $item.location}}&nbsp;&mdash;&nbsp;({{$item.location}}){{/if}}</small>
</span> </span>