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

productMods/css/individual/individual-vivo.css

@@ -1,5 +1,44 @@
 /* $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 */
 #overview {
     clear: left;

productMods/js/individual/individualUtils.js

@@ -14,33 +14,39 @@ $(document).ready(function(){
         $(this).qtip(
         {
             content: {
-              title: { 
-                  text: 'URI',
-              },
-              text: '<br /><span id="uri-text">' + $("#uriIcon").attr("title") + '</span><br /><br />'
+                prerender: true, // We need this for the .click() event listener on 'a.close'
+                text: '<h5>share the URI for this profile</h5> <input id="uriLink" type="text" value="' + $('#uriIcon').attr('title') + '" /> <a class="close" href="#">close</a>'
             },
             position: {
                 corner: {
-              target: 'leftBottom',
-              tooltip: 'bottomLeft'
+                    target: 'bottomLeft',
+                    tooltip: 'topLeft'
                 }
             },
             show: {
                 when: {event: 'click'}
             },
             hide: {
-             fixed: true // Make it fixed so it can be hovered over
+                fixed: true, // Make it fixed so it can be hovered over and interacted with
+                when: {
+                    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
+                padding: '6px',
                 width: 380,
-             textAlign: 'center',
                 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
     $('#qrIcon, .qrCloseLink').click(function() {
         $('#qrCodeImage').toggleClass('hidden');

productMods/templates/freemarker/body/individual/individual--foaf-person.ftl

@@ -28,7 +28,7 @@
         <nav role="navigation">
         
             <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>
                 <#if rdfUrl??>