keith/friendica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

hovercard: some polishing

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

15
css/hovercard.css
View file

@ -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;

10
css/style.css
View file

@ -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 {

26
js/hovercard.js
View file

@ -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

2
templates/search_item.tpl
View file

@ -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>

6
templates/wall_thread.tpl
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 *}}
<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>