NIHVIVO-1315, NIHVIVO1316: Re-factored the markup and styles for individual pages. Also I have introduced an image placeholder for non person individuals.

productMods/css/individual/individual-vivo.css

@@ -0,0 +1,38 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+
+@charset "UTF-8";
+/* CSS Document */
+
+/* <------ INDIVIDUAL CORE:OVERVIEW */
+#overview{
+    clear: left;
+}
+.overview-value{
+    display: inline;
+}
+div.overview-value :last-child{
+    margin-bottom: .2em;
+}
+.individual-overview{
+    font-size: 1em;
+    padding-bottom: 0;
+    line-height: 1.3em;
+    padding-right: 10px;
+    padding-top: 10px;
+    width: 100%;
+}
+/* <------ INDIVIDUAL TEMPORAL GRAPH */
+#temporal-graph{
+    float: right;
+    padding: 0 3px 20px 0;
+    background-color: #fff;
+    margin-top: -20px;
+}
+#temporal-graph h3{
+    margin: 0;
+    padding: 0;
+}
+#temporal-graph h3 img{
+    padding-right: 10px;
+    vertical-align: text-top;
+}

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

@@ -4,16 +4,25 @@
 
 <#include "individual-setup.ftl">
     
-<section id="individual-intro-person" class="vcard" role="region">
+<section id="individual-intro" class="vcard person" role="region">
 
     <section id="share-contact" role="region"> 
         <#-- Image -->           
+       <#assign individualImage>
            <@p.imageLinks individual=individual 
                           propertyGroups=propertyGroups 
                           namespaces=namespaces 
                           editable=editable 
                           showPlaceholder="always" 
                           placeholder="${urls.images}/placeholders/person.thumbnail.jpg" />
+       </#assign>
+
+       <#-- <#if ( individualImage?matches('<img class="individual-photo"')?size > 0 )> -->
+       <#if ( individualImage?contains('<img class="individual-photo"') )>
+           <#assign infoClass = 'class="withThumb"'/>
+       </#if>
+
+       <div id="photo-wrapper">${individualImage}</div>
     
         <nav role="navigation">
             <ul id ="individual-tools-people" role="list">
@@ -62,7 +71,7 @@
         <@p.vitroLinks propertyGroups namespaces editable "individual-urls-people" />
     </section>
 
-    <section id="individual-info" role="region">
+    <section id="individual-info" ${infoClass!} role="region">
         <#include "individual-sparklineVisualization.ftl">    
         <#-- Disable for now until controller sends data -->
         <#--
@@ -134,6 +143,7 @@
 
 
 ${stylesheets.add("/css/individual/individual.css")}
+${stylesheets.add("/css/individual/individual-vivo.css")}
                            
 <#-- RY Figure out which of these scripts really need to go into the head, and which are needed at all (e.g., tinyMCE??) -->
 ${headScripts.add("/js/jquery_plugins/getURLParam.js",                  

productMods/templates/freemarker/body/individual/individual.ftl

@@ -5,15 +5,18 @@
 <#include "individual-setup.ftl">
 
 <#assign individualProductExtension>
-    <#include "individual-overview.ftl">
+    <#-- Remove invlude below when individual--foaf-organization.ftl is created -->
-
     <#include "individual-visualization.ftl">
+    
+    <#include "individual-overview.ftl">
         </section> <!-- #individual-info -->
     </section> <!-- #individual-intro -->
 </#assign>
 
 <#include "individual-vitro.ftl">
 
+${stylesheets.add("/css/individual/individual-vivo.css")}
+
 ${headScripts.add("/js/jquery_plugins/jquery.truncator.js")}
 
 ${scripts.add("/js/individual/individualUtils.js")}

themes/wilma/css/wilma.css

@@ -1,6 +1,8 @@
 /* $This file is distributed under the terms of the license in /doc/license.txt$ */
+
 @charset "UTF-8";
 /* CSS Document */
+
 /* Tell the browser to render HTML 5 elements as block */
 header,
 hgroup,
@@ -965,15 +967,23 @@ nav.pagination.menupage li a:hover{
 /* ------------------------------------------------->  */
 
 /* ADMIN PANEL ------>  */
-.admin h3{
+#admin{
-  color: #fff;
+    background-color: #f2f9fb;
-  background: #2485AE;
 }
-/* INDIVIDUAL INTRO FOR PERSON ------>  */
+#admin h3{
+    background: #2485AE;
+    color: #fff;
+}
+#admin .uri-link {
+    color: #888c8c;
+}
+#admin a{
+    color: #2a98bc;
+}
+/* INDIVIDUAL INTRO FOR ANY CLASS ------>  */
 .preferred{
     padding-top: .2em;
 }
-/* INDIVIDUAL INTRO FOR ANY CLASS ------>  */
 #individual-intro h1{
     font-size: 1.375em; 
     color: #2485ae; 
@@ -989,9 +999,8 @@ ul#individual-tools{
 #individual-intro ul.individual-urls li a{
     color: #2485ae;
 }
-/* INDIVIDUAL INTRO FOR PERSON ------>  */
+h2#mainImage, #share-contact h2{
-#individual-intro-person{
+    color: #5E6363;
-    /*border-right: 1px solid #edf0ed;*/
 }
 /* INDIVIDUAL INTRO - LEFT SIDE CONTENT ------>  */
 img.individual-photo{
@@ -1050,6 +1059,7 @@ ul.individual-urls-people li a{
 #individual-info h1.fn{
     font-size: 1.375em;
     color: #2485ae;
+    line-height: 1.3em;
 }
 h1.fn .preferred-title {
     font-size: 0.825em;
@@ -1057,8 +1067,9 @@ h1.fn .preferred-title {
     border-left: 1px solid #a6b1b0;
 }
 #individual-info h2{
-    font-size: 1.125em;
+    color: #5E6363;
-    font-weight: normal;
+    font-size: 1em;
+    font-weight: bold;
 }
 #individual-info h3{
     font-size: 1.125em;
@@ -1192,6 +1203,10 @@ article.property ul.property-list li a{
 a {
     text-decoration: underline
 }
-.middle {
+.middle{
     vertical-align: middle;
 }
+/* EDITING DISPLAY------>  */
+.edit-individual{
+    border-left: 1px dotted #B2D15A;
+}