litvinovg/vivo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NIHVIVO-2783 NIHVIVO-2784 Tweaked JavaScript and CSS for URI (qTip) and QR code popups.

Browse source
This commit is contained in:
cappadona 2011-07-08 12:50:29 +00:00
parent 078c47ab82
commit bd02a3cfa3
3 changed files with 74 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

39
productMods/css/individual/individual-vivo.css
View file

@ -1,5 +1,44 @@
/* $This file is distributed under the terms of the license in /doc/license.txt$ */ /* $This file is distributed under the terms of the license in /doc/license.txt$ */
/* <------ INDIVIDUAL INTRO FOR PERSON*/
#individual-intro.person {
margin-bottom: 30px;
position: relative;
width: 100%;
}
#individual-intro.person #individual-info {
float: left;
width: 78%;
margin-bottom: 20px;
}
#individual-intro.person .individual-overview {
width: 100%;
float: none;
}
ul#individual-tools-people {
margin-top: 5px;
height: 20px;
padding-bottom: 20px;
list-style-type: none;
clear: both;
margin-bottom: 15px;
}
ul#individual-tools-people li {
position: relative;
display: block;
padding-right: 7px;
float: left;
margin-bottom: 20px;
}
ul.individual-urls-people {
clear: both;
list-style-type: circle;
padding-left: 24px;
}
ul.individual-urls-people li {
font-size: .875em;
line-height: 1.3em;
}
/* <------ INDIVIDUAL CORE:OVERVIEW */ /* <------ INDIVIDUAL CORE:OVERVIEW */
#overview { #overview {
clear: left; clear: left;

62
productMods/js/individual/individualUtils.js
View file

@ -11,34 +11,40 @@ $(document).ready(function(){
// This function creates and styles the "qTip" tooltip that displays the resource uri when the user clicks the uri icon. // This function creates and styles the "qTip" tooltip that displays the resource uri when the user clicks the uri icon.
$('#uriIcon').each(function() $('#uriIcon').each(function()
{ {
$(this).qtip( $(this).qtip(
{ {
content: { content: {
title: { prerender: true, // We need this for the .click() event listener on 'a.close'
text: 'URI', text: '<h5>share the URI for this profile</h5> <input id="uriLink" type="text" value="' + $('#uriIcon').attr('title') + '" /> <a class="close" href="#">close</a>'
}, },
text: '<br /><span id="uri-text">' + $("#uriIcon").attr("title") + '</span><br /><br />' position: {
}, corner: {
position: { target: 'bottomLeft',
corner: { tooltip: 'topLeft'
target: 'leftBottom', }
tooltip: 'bottomLeft' },
} show: {
}, when: {event: 'click'}
show: { },
when: {event: 'click'} hide: {
}, fixed: true, // Make it fixed so it can be hovered over and interacted with
hide: { when: {
fixed: true // Make it fixed so it can be hovered over target: $('a.close'),
}, event: 'click'
style: { }
title: {'backgroundColor': '#2485AE', 'color': 'white', 'fontFamily': '"Lucida Sans Unicode","Lucida Grande", Geneva, helvetica, sans-serif'}, },
padding: '6px 6px', // Give it some extra padding style: {
width: 380, padding: '6px',
textAlign: 'center', width: 380,
backgroundColor: '#f1f2ee' backgroundColor: '#f1f2ee'
} }
}); });
});
// Prevent close link for URI qTip from requesting bogus '#' href
$('a.close').click(function() {
$('#uriIcon').qtip("hide");
return false;
}); });
// Reveal vCard QR code when QR icon is clicked // Reveal vCard QR code when QR icon is clicked

2
productMods/templates/freemarker/body/individual/individual--foaf-person.ftl
View file

@ -28,7 +28,7 @@
<nav role="navigation"> <nav role="navigation">
<ul id ="individual-tools-people" role="list"> <ul id ="individual-tools-people" role="list">
<li role="listitem"><img id="uriIcon" title="${individual.uri}" onmouseover="javascript:this.style.cursor='pointer'" class="middle" src="${urls.images}/individual/uriIcon.gif" alt="uri icon"/></li> <li role="listitem"><img id="uriIcon" title="${individual.uri}" class="middle" src="${urls.images}/individual/uriIcon.gif" alt="uri icon"/></li>
<#assign rdfUrl = individual.rdfUrl> <#assign rdfUrl = individual.rdfUrl>
<#if rdfUrl??> <#if rdfUrl??>