NIHVIVO-1315: Done a lot of clean up work on styles for properly render individual display pages.

webapp/web/css/individual/individual.css

@@ -65,10 +65,10 @@ div.bottom{
 }
 /* <------ INDIVIDUAL INTRO FOR ANY CLASS*/
 #individual-intro{
-    width: 920px;
+    float: left;
-    margin: 0 auto;
+    width: 75%;
     margin-top: 35px;
-    margin-bottom: 30px;
+    margin-bottom: 45px;
 }
 #individual-intro h1{
     padding-bottom: 24px;  
@@ -94,6 +94,7 @@ div.bottom{
 #left-side img.individual-photo2{
     width: 160px;
     height: 160px;
+    float: left;
 }
 ul#individual-tools-people{
     margin-top: 5px;
@@ -138,7 +139,7 @@ ul#individual-tools li{
 .icon-rdf{
     position: absolute;
     font-size: 1.125em;
-    top: 16px;
+    top: 13px;
 }
 .picto-email{
     font-size: 1.375em;
@@ -186,10 +187,10 @@ ul#individual-urls-people li{
 #individual-info{
     width: 65%;
     float: left;
-    padding: 60px 0 0 10px;
+    padding: 10px 0 0 10px;
 }
 #individual-info h1.fn{
-    padding-bottom: 24px;
+    padding-bottom: 12px;
 }
 h1.fn .preferred-title {
     padding-left: 10px;
@@ -229,9 +230,6 @@ ul#individual-areas li{
     padding-right: 10px;
     padding-left: 10px;
 }
-ul#individual-areas li a{
-    color: #2485ae;
-}
 /* <------ INDIVIDUAL VISUALIZATION */
 #publications-visualization{
     margin-top: 35px;

webapp/web/templates/freemarker/body/individual/individual.ftl

@@ -16,32 +16,14 @@
 
 <#assign propertyGroups = individual.propertyList>
 
-<section id="individual-intro-person" class="vcard" role="region">
+<section id="individual-intro" class="vcard" role="region">
     <section id="left-side" role="region"> 
         <#-- Thumbnail -->
         <#if individual.thumbUrl??>
             <a href="${individual.imageUrl}"><img class="individual-photo2" src="${individual.thumbUrl}" title="click to view larger image" alt="${individual.name}" width="115" /></a>
-        <#elseif individual.person>
+        <#--<#elseif individual.person>
-            <img class="individual-photo2" src="${urls.images}/placeholders/person.thumbnail.jpg" title = "no image" alt="placeholder image" width="115" />                                                        
+            <img class="individual-photo2" src="${urls.images}/placeholders/person.thumbnail.jpg" title = "no image" alt="placeholder image" width="115" />-->                                                       
         </#if>
-        
-        <nav role="navigation">
-            <ul id ="individual-tools-people" role="list">
-                <li role="listitem"><a class="picto-font picto-uri" href="#">j</a></li>
-                <li role="listitem"><a class="picto-font picto-pdf" href="#">F</a></li>
-                <li role="listitem"><a class="picto-font picto-share" href="#">R</a></li>
-                <li role="listitem"><a class="icon-rdf" href="#">RDF</a></li>
-            </ul>
-        </nav>
-                
-        <#-- Links -->
-        <nav role="navigation">
-            <ul id ="individual-urls-people" role="list">
-                <#list individual.links as link>                               
-                    <li role="listitem"><a href="${link.url}">${link.anchor}</a></li>                                 
-                </#list>         
-            </ul>
-        </nav>
     </section>
 
     <section id="individual-info" role="region">
@@ -60,6 +42,7 @@
                     </#if>
                 </h1>
             </#if>
+        </header>
          
         <#-- Overview -->
         <#assign overview = propertyGroups.getPropertyAndRemoveFromList("${core}overview")!> 
@@ -69,6 +52,23 @@
             </#list>
         </#if>
         
+        <nav role="navigation">
+            <ul id ="individual-tools" role="list">
+                <li role="listitem"><a class="picto-font picto-uri" href="#">j</a></li>
+                <li role="listitem"><a class="picto-font picto-pdf" href="#">F</a></li>
+                <#--<li role="listitem"><a class="picto-font picto-share" href="#">R</a></li>-->
+                <li role="listitem"><a class="icon-rdf" href="#">RDF</a></li>
+            </ul>
+        </nav>
+                
+        <#-- Links -->
+        <nav role="navigation">
+            <ul id ="individual-urls" role="list">
+                <#list individual.links as link>                               
+                    <li role="listitem"><a href="${link.url}">${link.anchor}</a></li>                                 
+                </#list>         
+            </ul>
+        </nav>
     </section>
 </section>
 
@@ -79,12 +79,12 @@
          <#-- RY Will we have an individual--foaf-organization.ftl template? If so, move this there and remove from here.
          Also remove the method IndividualTemplateModel.isOrganization(). -->
          <#if individual.organization >
-	     	<div style="width: 100%;">
+            <div style="width: 100%;">
-				<div style="width: 30%;float:left;margin-top: 5%;margin-right: 10px;"><img src="${urls.images}/visualization/temporal_vis_icon.jpg"/></div>
+                <div style="width: 30%;float:left;margin-top: 5%;margin-right: 10px;"><img src="${urls.images}/visualization/temporal_vis_icon.jpg"/></div>
-				<div><h3>Temporal Graph <br/><a class="view-all-style" href="${urls.base}/visualization?vis=entity_comparison&vis_mode=${individual.moniker}&render_mode=standalone&uri=${individual.uri}">View <span class= "pictos-arrow-10">4</span></a></h3></div>
+                <div><h3>Temporal Graph <br/><a class="view-all-style" href="${urls.base}/visualization?vis=entity_comparison&vis_mode=${individual.moniker}&render_mode=standalone&uri=${individual.uri}">View <span class= "pictos-arrow-10">4</span></a></h3></div>
-			</div>		
+            </div>      
-			<#--<div>VISMODE: ${individual.moniker}</div>-->
+            <#--<div>VISMODE: ${individual.moniker}</div>-->
-		</#if>
+        </#if>
     </section>
 </section>