NIHVIVO-1315: Refactoring generic individual pages

webapp/web/css/individual/individual.css

@@ -8,6 +8,7 @@
     font-size: .8em;
     background-color: #f2f9fb;
     padding-top: 0;
+    padding-right: 40px;
 }
 #admin h3{
     display: inline-block;
@@ -15,6 +16,7 @@
     padding: 3px 6px 3px 10px;
     color: #fff;
     margin-bottom: 5px;
+    font-size: 14px;
 }
 #admin .uri-link {
     color: #888c8c;
@@ -30,8 +32,6 @@
 }
 /* <------ INDIVIDUAL INTRO FOR ANY CLASS*/
 #individual-intro{
-    float: left;
-    width: 75%;
     margin-top: 35px;
     margin-bottom: 45px;
     position: relative;
@@ -46,7 +46,6 @@
 #individual-intro #individual-info h3{
     padding-bottom: 5px;
     margin-top: 5px;
-    clear: both;
 }
 #individual-intro #share-contact h3{
     padding-bottom: .3em;
@@ -57,15 +56,23 @@
     font-size: 1.125em;
 }
 #individual-intro .individual-overview{
-    margin-bottom: 10px;
+    margin-bottom: 30px;
 }
 /* <------ INDIVIDUAL INTRO FOR PERSON*/
 #individual-intro-person{
     float: left;
-    width: 75%;
     margin-top: 0.5em;
     margin-bottom: 30px;
     position: relative;
+    width: 100%;
+}
+#individual-intro-person #admin{
+    margin-top: 37px;
+    width: 70%;
+}
+#individual-intro-person #individual-info{
+    float: left;
+    width: 78%;
 }
 /* <------ INDIVIDUAL INTRO - LEFT SIDE CONTENT */
 #share-contact{
@@ -139,13 +146,11 @@ ul#individual-phone li:first-child{
 }
 #individual-intro ul.individual-urls{
     list-style-type: circle;
-    color: red;
     margin-left: 20px;
 }
 #individual-intro ul.individual-urls li{
     font-size: .875em;
     line-height: 1.7em;
-    clear: left;
 }
 ul.individual-urls-people{
     clear: both;
@@ -157,10 +162,10 @@ ul.individual-urls-people li{
     line-height: 1.3em;
 }
 /* <------ INDIVIDUAL INTRO - RIGHT SIDE CONTENT */
-#individual-info{
+#individual-intro #individual-info{
+    padding: 0;
     float: left;
-    padding: 0 0 0 10px;
+    width: 79%;
-    width: 69%;
 }
 #individual-info h1.fn{
     /*padding-bottom: 12px;*/
@@ -205,9 +210,12 @@ ul#individual-areas li:first-child{
 }
 /* <------ SPARKLINES  */
 #sparklines-publications{
-    width: 220px;
+    padding: 0 10px 45px 20px;
-    padding: 0 20px 45px 20px;
     margin-top: 30px;
+    padding-top: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
 }
 #sparklines-publications h3{
     padding-top: 10px;
@@ -219,8 +227,11 @@ ul#individual-areas li:first-child{
 }
 /* <------ TEMPORAL GRAPH  */
 #temporal-graph{
-    width: 220px;
+    position: absolute;
-    padding: 0 20px 45px 20px;
+    padding: 0 3px 20px 10px;
+    background-color: #fff;
+    top: 0;
+    right: 0;
 }
 #temporal-graph h3 img{
     padding-right: 10px;

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

@@ -3,13 +3,12 @@
 <#-- Default individual profile page template -->
 
 <section id="individual-intro" class="vcard" role="region">
-    
     <#-- Image -->
     <@p.imageLinks individual propertyGroups namespaces editable />
-
+    
     <section id="individual-info" role="region">
         <#if individual.showAdminPanel>
-            <#include "individual-adminPanel.ftl">
+               <#include "individual-adminPanel.ftl">
         </#if>
         
         <header>

webapp/web/templates/freemarker/body/partials/individual/lib-properties.ftl

@@ -125,7 +125,7 @@ name will be used as the label. -->
          If there's a mainImage statement but no thumbnail image, treat it as if there is no image. --> 
     <#if (mainImage.statements)?has_content && thumbUrl?has_content>    
         <a href="${individual.imageUrl}"><img class="individual-photo" src="${thumbUrl}" title="click to view larger image" alt="${individual.name}" width="160" /></a>            
-        <@p.editingLinks "${mainImage.localName}" mainImage.statements[0] editable /> 
+        <div class="thumb-links"><@p.editingLinks "${mainImage.localName}" mainImage.statements[0] editable /></div>
     <#else>
         <@p.addLinkWithLabel mainImage editable "Photo" /> 
         <#if placeholderImage?has_content>