[frio] Add click card on contact avatars
This commit is contained in:
parent
eb3cf5a764
commit
e67833a784
8 changed files with 164 additions and 95 deletions
|
@ -1800,6 +1800,28 @@ aside .panel-body {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Contact avatar click card */
|
||||||
|
.userinfo.click-card {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userinfo.click-card > *:hover:after {
|
||||||
|
content: '⌄';
|
||||||
|
color: #bebebe;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 33%;
|
||||||
|
height: 33%;
|
||||||
|
opacity: .8;
|
||||||
|
border-radius: 0 0 40% 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* The lock symbol popup */
|
/* The lock symbol popup */
|
||||||
#panel {
|
#panel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -8,18 +8,53 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
// Elements with the class "userinfo" will get a hover-card.
|
let $body = $('body');
|
||||||
// Note that this elements does need a href attribute which links to
|
// Prevents normal click action on click hovercard elements
|
||||||
// a valid profile url
|
$body.on('click', '.userinfo.click-card', function (e) {
|
||||||
$("body").on("mouseover", ".userinfo, .wall-item-responses a, .wall-item-bottom .mention a", function (e) {
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
// This event listener needs to be declared before the one that removes
|
||||||
|
// all cards so that we can stop the immediate propagation of the event
|
||||||
|
// Since the manual popover appears instantly and the hovercard removal is
|
||||||
|
// on a 100ms delay, leaving event propagation immediately hides any click hovercard
|
||||||
|
$body.on('mousedown', '.userinfo.click-card', function (e) {
|
||||||
|
e.stopImmediatePropagation();
|
||||||
let timeNow = new Date().getTime();
|
let timeNow = new Date().getTime();
|
||||||
removeAllHovercards(e, timeNow);
|
|
||||||
let contact_url = false;
|
let contactUrl = false;
|
||||||
let targetElement = $(this);
|
let targetElement = $(this);
|
||||||
|
|
||||||
// get href-attribute
|
// get href-attribute
|
||||||
if (targetElement.is('[href]')) {
|
if (targetElement.is('[href]')) {
|
||||||
contact_url = targetElement.attr('href');
|
contactUrl = targetElement.attr('href');
|
||||||
|
} else {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// no hovercard for anchor links
|
||||||
|
if (contactUrl.substring(0, 1) === '#') {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
openHovercard(targetElement, contactUrl, timeNow);
|
||||||
|
});
|
||||||
|
|
||||||
|
// hover cards should be removed very easily, e.g. when any of these events happens
|
||||||
|
$body.on('mouseleave touchstart scroll mousedown submit keydown', function (e) {
|
||||||
|
// remove hover card only for desktiop user, since on mobile we open the hovercards
|
||||||
|
// by click event insteadof hover
|
||||||
|
removeAllHovercards(e, new Date().getTime());
|
||||||
|
});
|
||||||
|
|
||||||
|
$body.on('mouseover', '.userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a', function (e) {
|
||||||
|
let timeNow = new Date().getTime();
|
||||||
|
removeAllHovercards(e, timeNow);
|
||||||
|
let contactUrl = false;
|
||||||
|
let targetElement = $(this);
|
||||||
|
|
||||||
|
// get href-attribute
|
||||||
|
if (targetElement.is('[href]')) {
|
||||||
|
contactUrl = targetElement.attr('href');
|
||||||
} else {
|
} else {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
@ -30,88 +65,34 @@ $(document).ready(function () {
|
||||||
}
|
}
|
||||||
|
|
||||||
// no hovercard for anchor links
|
// no hovercard for anchor links
|
||||||
if (contact_url.substring(0, 1) === '#') {
|
if (contactUrl.substring(0, 1) === '#') {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
targetElement.attr('data-awaiting-hover-card', timeNow);
|
targetElement.attr('data-awaiting-hover-card', timeNow);
|
||||||
|
|
||||||
// store the title in an other data attribute beause bootstrap
|
// Delay until the hover-card does appear
|
||||||
// popover destroys the title.attribute. We can restore it later
|
|
||||||
let title = targetElement.attr("title");
|
|
||||||
targetElement.attr({"data-orig-title": title, title: ""});
|
|
||||||
|
|
||||||
// if the device is a mobile open the hover card by click and not by hover
|
|
||||||
if (typeof is_mobile != "undefined") {
|
|
||||||
targetElement[0].removeAttribute("href");
|
|
||||||
var hctrigger = 'click';
|
|
||||||
} else {
|
|
||||||
var hctrigger = 'manual';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Timeout until the hover-card does appear
|
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
if (
|
if (
|
||||||
targetElement.is(":hover")
|
targetElement.is(':hover')
|
||||||
&& parseInt(targetElement.attr('data-awaiting-hover-card'), 10) === timeNow
|
&& parseInt(targetElement.attr('data-awaiting-hover-card'), 10) === timeNow
|
||||||
&& $('.hovercard').length === 0
|
&& $('.hovercard').length === 0
|
||||||
) { // no card if there already is one open
|
) {
|
||||||
// get an additional data atribute if the card is active
|
openHovercard(targetElement, contactUrl, timeNow);
|
||||||
targetElement.attr('data-hover-card-active', timeNow);
|
|
||||||
// get the whole html content of the hover card and
|
|
||||||
// push it to the bootstrap popover
|
|
||||||
getHoverCardContent(contact_url, function (data) {
|
|
||||||
if (data) {
|
|
||||||
targetElement.popover({
|
|
||||||
html: true,
|
|
||||||
placement: function () {
|
|
||||||
// Calculate the placement of the the hovercard (if top or bottom)
|
|
||||||
// The placement depence on the distance between window top and the element
|
|
||||||
// which triggers the hover-card
|
|
||||||
var get_position = $(targetElement).offset().top - $(window).scrollTop();
|
|
||||||
if (get_position < 270) {
|
|
||||||
return "bottom";
|
|
||||||
}
|
|
||||||
return "top";
|
|
||||||
},
|
|
||||||
trigger: hctrigger,
|
|
||||||
template: '<div class="popover hovercard" data-card-created="' + timeNow + '"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
|
|
||||||
content: data,
|
|
||||||
container: "body",
|
|
||||||
sanitizeFn: function (content) {
|
|
||||||
return DOMPurify.sanitize(content)
|
|
||||||
},
|
|
||||||
}).popover('show');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}, 500);
|
}, 500);
|
||||||
}).on("mouseleave", ".userinfo, .wall-item-responses a, .wall-item-bottom .mention a", function (e) { // action when mouse leaves the hover-card
|
}).on('mouseleave', '.userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a', function (e) { // action when mouse leaves the hover-card
|
||||||
var timeNow = new Date().getTime();
|
removeAllHovercards(e, new Date().getTime());
|
||||||
// copy the original title to the title atribute
|
|
||||||
var title = $(this).attr("data-orig-title");
|
|
||||||
$(this).attr({"data-orig-title": "", title: title});
|
|
||||||
removeAllHovercards(e, timeNow);
|
|
||||||
});
|
|
||||||
|
|
||||||
// hover cards should be removed very easily, e.g. when any of these events happen
|
|
||||||
$('body').on("mouseleave touchstart scroll click dblclick mousedown mouseup submit keydown keypress keyup", function (e) {
|
|
||||||
// remove hover card only for desktiop user, since on mobile we openen the hovercards
|
|
||||||
// by click event insteadof hover
|
|
||||||
if (typeof is_mobile == "undefined") {
|
|
||||||
var timeNow = new Date().getTime();
|
|
||||||
removeAllHovercards(e, timeNow);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 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
|
||||||
$('body').on('mouseover', '.hovercard', function (e) {
|
$body.on('mouseover', '.hovercard', function (e) {
|
||||||
$(this).addClass('dont-remove-card');
|
$(this).addClass('dont-remove-card');
|
||||||
});
|
});
|
||||||
|
|
||||||
$('body').on('mouseleave', '.hovercard', function (e) {
|
$body.on('mouseleave', '.hovercard', function (e) {
|
||||||
$(this).removeClass('dont-remove-card');
|
$(this).removeClass('dont-remove-card');
|
||||||
$(this).popover("hide");
|
$(this).popover('hide');
|
||||||
});
|
});
|
||||||
}); // End of $(document).ready
|
}); // End of $(document).ready
|
||||||
|
|
||||||
|
@ -120,19 +101,61 @@ 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");
|
let 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');
|
let $handle = $('[data-hover-card-active="' + $(this).data('card-created') + '"]');
|
||||||
$(this).popover("hide");
|
$handle.removeAttr('data-hover-card-active');
|
||||||
|
|
||||||
|
// Restoring the popover handle title
|
||||||
|
let title = $handle.attr('data-orig-title');
|
||||||
|
$handle.attr({'data-orig-title': '', title: title});
|
||||||
|
|
||||||
|
$(this).popover('hide');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, 100);
|
}, 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openHovercard(targetElement, contactUrl, timeNow) {
|
||||||
|
// store the title in a data attribute because Bootstrap
|
||||||
|
// popover destroys the title attribute.
|
||||||
|
let title = targetElement.attr('title');
|
||||||
|
targetElement.attr({'data-orig-title': title, title: ''});
|
||||||
|
|
||||||
|
// get an additional data atribute if the card is active
|
||||||
|
targetElement.attr('data-hover-card-active', timeNow);
|
||||||
|
// get the whole html content of the hover card and
|
||||||
|
// push it to the bootstrap popover
|
||||||
|
getHoverCardContent(contactUrl, function (data) {
|
||||||
|
if (data) {
|
||||||
|
targetElement.popover({
|
||||||
|
html: true,
|
||||||
|
placement: function () {
|
||||||
|
// Calculate the placement of the the hovercard (if top or bottom)
|
||||||
|
// The placement depence on the distance between window top and the element
|
||||||
|
// which triggers the hover-card
|
||||||
|
let get_position = $(targetElement).offset().top - $(window).scrollTop();
|
||||||
|
if (get_position < 270) {
|
||||||
|
return 'bottom';
|
||||||
|
}
|
||||||
|
return 'top';
|
||||||
|
},
|
||||||
|
trigger: 'manual',
|
||||||
|
template: '<div class="popover hovercard" data-card-created="' + timeNow + '"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
|
||||||
|
content: data,
|
||||||
|
container: 'body',
|
||||||
|
sanitizeFn: function (content) {
|
||||||
|
return DOMPurify.sanitize(content)
|
||||||
|
},
|
||||||
|
}).popover('show');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
getHoverCardContent.cache = {};
|
getHoverCardContent.cache = {};
|
||||||
|
|
||||||
function getHoverCardContent(contact_url, callback) {
|
function getHoverCardContent(contact_url, callback) {
|
||||||
|
@ -152,7 +175,7 @@ function getHoverCardContent(contact_url, callback) {
|
||||||
}
|
}
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: baseurl + "/contact/hovercard",
|
url: baseurl + '/contact/hovercard',
|
||||||
data: postdata,
|
data: postdata,
|
||||||
success: function (data, textStatus, request) {
|
success: function (data, textStatus, request) {
|
||||||
getHoverCardContent.cache[nurl] = data;
|
getHoverCardContent.cache[nurl] = data;
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
<div class="event-card-profile-name profile-entry-name">
|
<div class="event-card-profile-name profile-entry-name">
|
||||||
<a href="{{$author_link}}" class="userinfo">{{$author_name}}</a>
|
<a href="{{$author_link}}" class="userinfo hover-card">{{$author_name}}</a>
|
||||||
</div>
|
</div>
|
||||||
{{if $location.map}}
|
{{if $location.map}}
|
||||||
<div id="event-location-map-{{$id}}" class="event-location-map">{{$location.map nofilter}}</div>
|
<div id="event-location-map-{{$id}}" class="event-location-map">{{$location.map nofilter}}</div>
|
||||||
|
|
|
@ -285,7 +285,7 @@
|
||||||
<ul id="nav-notifications-template" class="media-list" style="display:none;" rel="template">
|
<ul id="nav-notifications-template" class="media-list" style="display:none;" rel="template">
|
||||||
<li class="{4} notif-entry">
|
<li class="{4} notif-entry">
|
||||||
<div class="notif-entry-wrapper media">
|
<div class="notif-entry-wrapper media">
|
||||||
<div class="notif-photo-wrapper media-object pull-left"><a href="{6}" class="userinfo"><img data-src="{1}"></a></div>
|
<div class="notif-photo-wrapper media-object pull-left"><a href="{6}" class="userinfo click-card"><img data-src="{1}"></a></div>
|
||||||
<a href="{0}" class="notif-desc-wrapper media-body">
|
<a href="{0}" class="notif-desc-wrapper media-body">
|
||||||
{2}
|
{2}
|
||||||
<div><time class="notif-when time" data-toggle="tooltip" title="{5}">{3}</time></div>
|
<div><time class="notif-when time" data-toggle="tooltip" title="{5}">{3}</time></div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
|
|
||||||
<div class="notif-item {{if !$item_seen}}unseen{{/if}} {{$item_label}} media">
|
<div class="notif-item {{if !$item_seen}}unseen{{/if}} {{$item_label}} media">
|
||||||
<div class="notif-photo-wrapper media-object pull-left">
|
<div class="notif-photo-wrapper media-object pull-left">
|
||||||
<a class="userinfo" href="{{$item_url}}"><img src="{{$item_image}}" class="notif-image"></a>
|
<a class="userinfo click-card" href="{{$item_url}}"><img src="{{$item_image}}" class="notif-image"></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="notif-desc-wrapper media-body">
|
<div class="notif-desc-wrapper media-body">
|
||||||
<a href="{{$item_link}}">
|
<a href="{{$item_link}}">
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
|
|
||||||
{{* avatar picture *}}
|
{{* avatar picture *}}
|
||||||
<div class="contact-photo-wrapper mframe p-author h-card pull-left">
|
<div class="contact-photo-wrapper mframe p-author h-card pull-left">
|
||||||
<a class="userinfo u-url" id="wall-item-photo-menu-{{$id}}" href="{{$profile_url}}">
|
<a class="userinfo click-card u-url" id="wall-item-photo-menu-{{$id}}" href="{{$profile_url}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<div class="contact-photo-image-wrapper">
|
||||||
<img src="{{$thumb}}" class="contact-photo-xs media-object p-name u-photo" id="wall-item-photo-{{$id}}" alt="{{$name}}" />
|
<img src="{{$thumb}}" class="contact-photo-xs media-object p-name u-photo" id="wall-item-photo-{{$id}}" alt="{{$name}}" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -33,7 +33,7 @@
|
||||||
{{* the header with the comment author name *}}
|
{{* the header with the comment author name *}}
|
||||||
<div role="heading " class="contact-info-comment">
|
<div role="heading " class="contact-info-comment">
|
||||||
<h5 class="media-heading">
|
<h5 class="media-heading">
|
||||||
<a href="{{$profile_url}}" title="View {{$name}}'s profile" class="wall-item-name-link userinfo"><span class="btn-link">{{$name}}</span></a>
|
<a href="{{$profile_url}}" title="View {{$name}}'s profile" class="wall-item-name-link userinfo hover-card"><span class="btn-link">{{$name}}</span></a>
|
||||||
</h5>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -74,14 +74,14 @@
|
||||||
{{* The avatar picture and the photo-menu *}}
|
{{* The avatar picture and the photo-menu *}}
|
||||||
<div class="dropdown pull-left"><!-- Dropdown -->
|
<div class="dropdown pull-left"><!-- Dropdown -->
|
||||||
<div class="hidden-sm hidden-xs contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
<div class="hidden-sm hidden-xs contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
||||||
<a href="{{$item.profile_url}}" class="userinfo u-url" id="wall-item-photo-menu-{{$item.id}}">
|
<a href="{{$item.profile_url}}" class="userinfo click-card u-url" id="wall-item-photo-menu-{{$item.id}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<div class="contact-photo-image-wrapper">
|
||||||
<img src="{{$item.thumb}}" class="contact-photo media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
<img src="{{$item.thumb}}" class="contact-photo media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden-lg hidden-md contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
<div class="hidden-lg hidden-md contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
||||||
<a href="{{$item.profile_url}}" class="userinfo u-url" id="wall-item-photo-menu-xs-{{$item.id}}">
|
<a href="{{$item.profile_url}}" class="userinfo click-card u-url" id="wall-item-photo-menu-xs-{{$item.id}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<div class="contact-photo-image-wrapper">
|
||||||
<img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-xs-{{$item.id}}" alt="{{$item.name}}" />
|
<img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-xs-{{$item.id}}" alt="{{$item.name}}" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -92,9 +92,21 @@
|
||||||
|
|
||||||
{{* contact info header*}}
|
{{* contact info header*}}
|
||||||
<div role="heading" class="contact-info hidden-sm hidden-xs media-body"><!-- <= For computer -->
|
<div role="heading" class="contact-info hidden-sm hidden-xs media-body"><!-- <= For computer -->
|
||||||
<h4 class="media-heading"><a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo"><span class="wall-item-name {{$item.sparkle}}">{{$item.name}}</span></a>
|
<h4 class="media-heading">
|
||||||
{{if $item.owner_url}}{{$item.via}} <a href="{{$item.owner_url}}" target="redir" title="{{$item.olinktitle}}" class="wall-item-name-link userinfo"><span class="wall-item-name {{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a>{{/if}}
|
<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo hover-card">
|
||||||
{{if $item.lock}}<span class="navicon lock fakelink" onClick="lockview(event, {{$item.id}});" title="{{$item.lock}}"> <small><i class="fa fa-lock" aria-hidden="true"></i></small></span>{{/if}}
|
<span class="wall-item-name {{$item.sparkle}}">{{$item.name}}</span>
|
||||||
|
</a>
|
||||||
|
{{if $item.owner_url}}
|
||||||
|
{{$item.via}}
|
||||||
|
<a href="{{$item.owner_url}}" target="redir" title="{{$item.olinktitle}}" class="wall-item-name-link userinfo hover-card">
|
||||||
|
<span class="wall-item-name {{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span>
|
||||||
|
</a>
|
||||||
|
{{/if}}
|
||||||
|
{{if $item.lock}}
|
||||||
|
<span class="navicon lock fakelink" onClick="lockview(event, {{$item.id}});" title="{{$item.lock}}">
|
||||||
|
<small><i class="fa fa-lock" aria-hidden="true"></i></small>
|
||||||
|
</span>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
<div class="additional-info text-muted">
|
<div class="additional-info text-muted">
|
||||||
<div id="wall-item-ago-{{$item.id}}" class="wall-item-ago">
|
<div id="wall-item-ago-{{$item.id}}" class="wall-item-ago">
|
||||||
|
@ -114,7 +126,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"><span>{{$item.name}}</span></a>
|
<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo hover-card"><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}} — ({{$item.location nofilter}}){{/if}}</small>
|
<span class="wall-item-ago">{{$item.ago}}</span> {{if $item.location}} — ({{$item.location nofilter}}){{/if}}</small>
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -159,14 +159,14 @@ as the value of $top_child_total (this is done at the end of this file)
|
||||||
<div class="dropdown pull-left"><!-- Dropdown -->
|
<div class="dropdown pull-left"><!-- Dropdown -->
|
||||||
{{if $item.thread_level==1}}
|
{{if $item.thread_level==1}}
|
||||||
<div class="hidden-sm hidden-xs contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}} p-author h-card">
|
<div class="hidden-sm hidden-xs contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}} p-author h-card">
|
||||||
<a class="userinfo u-url" id="wall-item-photo-menu-{{$item.id}}" href="{{$item.profile_url}}">
|
<a class="userinfo click-card u-url" id="wall-item-photo-menu-{{$item.id}}" href="{{$item.profile_url}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<div class="contact-photo-image-wrapper">
|
||||||
<img src="{{$item.thumb}}" class="contact-photo media-object {{$item.sparkle}} p-name u-photo" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
<img src="{{$item.thumb}}" class="contact-photo media-object {{$item.sparkle}} p-name u-photo" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden-lg hidden-md contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
<div class="hidden-lg hidden-md contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
||||||
<a class="userinfo u-url" id="wall-item-photo-menu-xs-{{$item.id}}" href="{{$item.profile_url}}">
|
<a class="userinfo click-card u-url" id="wall-item-photo-menu-xs-{{$item.id}}" href="{{$item.profile_url}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<div class="contact-photo-image-wrapper">
|
||||||
<img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-xs-{{$item.id}}" alt="{{$item.name}}" />
|
<img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-xs-{{$item.id}}" alt="{{$item.name}}" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -187,7 +187,7 @@ as the value of $top_child_total (this is done at the end of this file)
|
||||||
{{* The avatar picture for comments *}}
|
{{* The avatar picture for comments *}}
|
||||||
{{if $item.thread_level!=1}}
|
{{if $item.thread_level!=1}}
|
||||||
<div class="contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}} p-author h-card">
|
<div class="contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}} p-author h-card">
|
||||||
<a class="userinfo u-url" id="wall-item-photo-menu-{{$item.id}}" href="{{$item.profile_url}}">
|
<a class="userinfo click-card u-url" id="wall-item-photo-menu-{{$item.id}}" href="{{$item.profile_url}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<div class="contact-photo-image-wrapper">
|
||||||
<img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}} p-name u-photo" id="wall-item-photo-comment-{{$item.id}}" alt="{{$item.name}}" />
|
<img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}} p-name u-photo" id="wall-item-photo-comment-{{$item.id}}" alt="{{$item.name}}" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -201,9 +201,21 @@ as the value of $top_child_total (this is done at the end of this file)
|
||||||
{{* contact info header*}}
|
{{* contact info header*}}
|
||||||
{{if $item.thread_level==1}}
|
{{if $item.thread_level==1}}
|
||||||
<div role="heading " aria-level="{{$item.thread_level}}" class="contact-info hidden-sm hidden-xs media-body"><!-- <= For computer -->
|
<div role="heading " aria-level="{{$item.thread_level}}" class="contact-info hidden-sm hidden-xs media-body"><!-- <= For computer -->
|
||||||
<h4 class="media-heading"><a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo"><span class="wall-item-name {{$item.sparkle}}">{{$item.name}}</span></a>
|
<h4 class="media-heading">
|
||||||
{{if $item.owner_url}}{{$item.via}} <a href="{{$item.owner_url}}" target="redir" title="{{$item.olinktitle}}" class="wall-item-name-link userinfo"><span class="wall-item-name {{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a>{{/if}}
|
<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo hover-card">
|
||||||
{{if $item.lock}}<span class="navicon lock fakelink" onClick="lockview(event,{{$item.id}});" title="{{$item.lock}}" data-toggle="tooltip"> <small><i class="fa fa-lock" aria-hidden="true"></i></small></span>{{/if}}
|
<span class="wall-item-name {{$item.sparkle}}">{{$item.name}}</span>
|
||||||
|
</a>
|
||||||
|
{{if $item.owner_url}}
|
||||||
|
{{$item.via}}
|
||||||
|
<a href="{{$item.owner_url}}" target="redir" title="{{$item.olinktitle}}" class="wall-item-name-link userinfo hover-card">
|
||||||
|
<span class="wall-item-name {{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span>
|
||||||
|
</a>
|
||||||
|
{{/if}}
|
||||||
|
{{if $item.lock}}
|
||||||
|
<span class="navicon lock fakelink" onClick="lockview(event,{{$item.id}});" title="{{$item.lock}}" data-toggle="tooltip">
|
||||||
|
<small><i class="fa fa-lock" aria-hidden="true"></i></small>
|
||||||
|
</span>
|
||||||
|
{{/if}}
|
||||||
</h4>
|
</h4>
|
||||||
|
|
||||||
<div class="additional-info text-muted">
|
<div class="additional-info text-muted">
|
||||||
|
@ -232,7 +244,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"><span>{{$item.name}}</span></a>
|
<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo hover-card"><span>{{$item.name}}</span></a>
|
||||||
<p class="text-muted">
|
<p class="text-muted">
|
||||||
<small>
|
<small>
|
||||||
<a class="time" href="{{$item.plink.orig}}"><span class="wall-item-ago">{{$item.ago}}</span></a>
|
<a class="time" href="{{$item.plink.orig}}"><span class="wall-item-ago">{{$item.ago}}</span></a>
|
||||||
|
@ -251,7 +263,7 @@ as the value of $top_child_total (this is done at the end of this file)
|
||||||
<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-comment">
|
<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"><span class="fakelink">{{$item.name}}</span></a>
|
<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo hover-card"><span class="fakelink">{{$item.name}}</span></a>
|
||||||
<span class="text-muted">
|
<span class="text-muted">
|
||||||
<small>
|
<small>
|
||||||
<a class="time" href="{{$item.plink.orig}}" title="{{$item.localtime}}" data-toggle="tooltip">{{$item.ago}}</a>
|
<a class="time" href="{{$item.plink.orig}}" title="{{$item.localtime}}" data-toggle="tooltip">{{$item.ago}}</a>
|
||||||
|
|
Loading…
Reference in a new issue