Improve positions layout

webapp/src/main/webapp/themes/tenderfoot/css/page-individual.css

@@ -94,6 +94,10 @@ article.property li h3 {
     margin-left: 10px;
 }
 
+ul#individual-hasResearchArea {
+    margin-left: 10px;
+}
+
 ul#individual-hasResearchArea li,
 ul#individual-facultyMemberships li {
     float: left;
@@ -108,4 +112,17 @@ ul#individual-facultyMemberships li {
 #admin h3 {
     background-color: #398AAC;
     color: #fff;
+}
+
+ul#individual-personInPosition {
+    list-style: none;
+    padding-left: 10px;
+}
+
+ul#individual-personInPosition li {
+    line-height: 1.3em;
+}
+
+ul#individual-personInPosition li:last-child {
+    padding-bottom: 5px;
 }

webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css

@@ -245,7 +245,7 @@ h1.vivo-logo a {
     position: absolute;
 }
 h2 {
-    padding: 5px 0 6px 0;
+    padding: 5px 0 3px 0;
     margin: 0;
     font-size: 1.375em;
     color: #064d68;

webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-positions.ftl

@@ -18,10 +18,6 @@
             <#local rangeUri = "" />
         </#if>
         <#if statement.dateTimeEnd??>
-            <li role="listitem" class="pastPosition">
-                <#include "${template}">
-                <@p.editingLinks "${property.localName}" "${property.name}" statement editable rangeUri/>
-            </li>
         <#else>
             <li role="listitem" class="currentPosition">
                 <#include "${template}">
@@ -29,4 +25,42 @@
             </li>
         </#if>
     </#list>
+    <#list statements as statement>
+        <#if property.rangeUri?? >
+            <#local rangeUri = property.rangeUri />
+        <#else>
+            <#local rangeUri = "" />
+        </#if>
+        <#if statement.dateTimeEnd??>
+            <li role="listitem" class="pastPosition">
+                <#include "${template}">
+                <@p.editingLinks "${property.localName}" "${property.name}" statement editable rangeUri/>
+            </li>
+        </#if>
+    </#list>
 </#macro>
+
+<script language="JavaScript">
+    $('ul#individual-personInPosition').each(function(){
+
+        var LiN = $(this).find('li').length;
+
+        if( LiN > 1) {
+            $('li', this).eq(0).nextAll().hide().addClass('toggleable');
+            $(this).append('<li class="more">More...</li>');
+        }
+
+    });
+
+
+    $('ul#individual-personInPosition').on('click','.more', function(){
+        if( $(this).hasClass('less') ){
+            $(this).text('More...').removeClass('less');
+        }else{
+            $(this).text('Less...').addClass('less');
+        }
+
+        $(this).siblings('li.toggleable').slideToggle();
+
+    });
+</script>