Updated QR code display based on requests from mbarbier. Default display is a small icon that reveals the full QR code, but the full code can be rendered by setting the display value to "full".

productMods/css/individual/individual-vivo.css

@@ -46,7 +46,6 @@ div.overview-value :last-child {
     vertical-align: text-top;
 }
 
-
 /* <------ POSITIONS */
 ul#individual-personInPosition {
     list-style-type: circle;
@@ -58,6 +57,7 @@ ul#individual-personInPosition li {
 ul#individual-personInPosition li:last-child {
     padding-bottom: 15px;
 }
+
 /* <------ RESEARCH AREA */
 ul#individual-hasResearchArea {
     padding-bottom: 24px;
@@ -71,3 +71,24 @@ ul#individual-hasResearchArea li {
 ul#individual-hasResearchArea li:first-child {
     padding-left: 0;
 }
+
+/* <------ QR Code */
+h5.qrCode {
+    margin-top: 1em;
+    padding: 0;
+}
+span#qrCodeImage {
+    position: absolute;
+    top: -9em;
+    left: 2em;
+    border: solid 1px #ccc;
+    background: white;
+}
+span#qrCodeImage img {
+    padding: 1.7em 1.7em 0 1.7em;
+}
+a.qrCloseLink {
+    float: right;
+    margin-right: .5em;
+    font-size: .8em;
+}

productMods/js/individual/individualUtils.js

@@ -41,4 +41,10 @@ $(document).ready(function(){
        });
     });
     
+    // Reveal vCard QR code when QR icon is clicked
+    $('#qrIcon, .qrCloseLink').click(function() {
+        $('#qrCodeImage').toggleClass('hide');
+        // event.preventDefault();
+        return false;
+    });
 });

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

@@ -3,6 +3,7 @@
 <#-- Individual profile page template for foaf:Person individuals -->
 
 <#include "individual-setup.ftl">
+<#include "individual-qrCodeFoafPerson.ftl">
 
 <section id="individual-intro" class="vcard person" role="region">
 
@@ -33,7 +34,7 @@
                     <li role="listitem"><a title="View this individual in RDF format" class="icon-rdf" href="${rdfUrl}">RDF</a></li>
                 </#if>
                 
-                <#include "individual-qrCodeFoafPerson.ftl">
+                <@qrCode />
             </ul>
         </nav>
             

productMods/templates/freemarker/body/partials/individual/individual-qrCodeFoafPerson.ftl

@@ -2,6 +2,26 @@
 
 <#include "individual-qrCodeGenerator.ftl">
 
-<#if hasValidVCard()>
-    <li role="listitem"><a title="Export QR codes" href="${individual.doQrData().exportQrCodeUrl}"><img class="middle" src="${urls.images}/individual/qr_icon.png" alt="qr icon" /></a></li>
-</#if>
+<#-- This macro will display a vCard QR code (includes email, phone number, URI, etc)
+     * default display is a small icon that reveals the full QR code when clicked
+     * setting the display to "full" will render a full-size QR code (<@qrCode display="full" />)
+     * the size can be set using the width parameter (default is 125px)
+ -->
+<#macro qrCode display="icon" width="125">
+    <#if hasValidVCard()>
+        <#assign qrCodeLinkedImage><a title="Export QR codes" href="${individual.doQrData().exportQrCodeUrl}"><@qrCodeVCard qrCodeWidth=width /></a></#assign>
+        
+        <#if (display == "full")>
+            <h5 class="qrCode">vCard QR</h5>
+            ${qrCodeLinkedImage}
+        <#elseif (display == "icon")>
+            <li role="listitem">
+                <a id="qrIcon" title="vCard QR Code" href="${individual.doQrData().exportQrCodeUrl}"><img class="middle" src="${urls.images}/individual/qr_icon.png" alt="qr icon" /></a>
+                <span id="qrCodeImage" class="hide">${qrCodeLinkedImage} <a class="qrCloseLink" href="#">Close</a></span>
+            </li>
+        <#else>
+            <p class="notice">You have passed an invalid value for the qrCode display parameter.</p>
+        </#if>
+        
+    </#if>
+</#macro>