Refactored editing links for individual photo in individual pages

webapp/web/css/individual/individual.css

@@ -32,7 +32,7 @@
 }
 /* <------ INDIVIDUAL INTRO FOR ANY CLASS*/
 #individual-intro{
-    margin-top: 35px;
+    margin-top: 0;
     margin-bottom: 45px;
     position: relative;
     overflow: hidden;
@@ -61,7 +61,6 @@
 }
 /* <------ INDIVIDUAL INTRO FOR PERSON*/
 #individual-intro-person{
-    float: left;
     margin-top: 0.5em;
     margin-bottom: 30px;
     position: relative;
@@ -92,6 +91,14 @@
 #share-contact img.individual-photo{
     width: 160px;
     height: 160px;
+    margin-left: 0;
+}
+img.individual-photo{
+    border: 7px solid #ebebeb;
+    float: left;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    margin-left: .5em;
 }
 #share-contact #mainImage{
     position: absolute;
@@ -172,7 +179,7 @@ ul.individual-urls-people li{
 #individual-intro #individual-info{
     padding: 0;
     float: left;
-    width: 79%;
+    width: 78%;
 }
 #individual-info h1.fn{
     /*padding-bottom: 12px;*/
@@ -185,7 +192,7 @@ h1.fn .preferred-title {
     padding-bottom: 10px;
 }
 ul#individual-positions{
-    padding-bottom: 24px;
+    padding-bottom: 10px;
     list-style-type: circle;
     padding-left: 20px;
 }
@@ -367,13 +374,24 @@ article.property ul.subclass-property-list li{
 .delete-individual{
     vertical-align: middle;
 }
-.thumb-links{
+.edit-mainImage{
     position: absolute;
-    margin-left: 108px;
-   /* background: rgba(255, 255, 255, 0.8);*/
     background: #fff;
-    margin-top: 143px;
     padding: 0 6px 0 0;
+    top: 143px;
+    left: 119px;
+}
+a.edit-mainImage img.edit-individual{
+    border: 0;
+    padding-left: 0px;
+    margin-left: 8px;
+}
+.delete-mainImage{
+    position: absolute;
+    top: 143px;
+    left: 149px;
+    background: #fff;
+    padding: 0 6px 0 8px;
 }
 .middle{
     vertical-align: middle;

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>            
-        <div class="thumb-links"><@p.editingLinks "${mainImage.localName}" mainImage.statements[0] editable /></div>
+        <@p.editingLinks "${mainImage.localName}" mainImage.statements[0] editable />
     <#else>
         <@p.addLinkWithLabel mainImage editable "Photo" /> 
         <#if placeholderImage?has_content>