various tweaks to the new portal details in the dialog

code/portal_detail_display.js

@@ -57,28 +57,30 @@ window.renderPortalDetails = function(guid) {
 
   if(portalDetailObj) {
     portalDetailedDescription = '<table description="Portal Photo Details" class="portal_details">';
+
+    // TODO (once the data supports it) - portals can have multiple photos. display all, with navigation between them
+    // (at this time the data isn't returned from the server - although a count of images IS returned!)
+
     if(portalDetailObj.submitter.name.length > 0) {
       if(portalDetailObj.submitter.team) {
         submitterSpan = '<span class="' + (portalDetailObj.submitter.team === 'RESISTANCE' ? 'res' : 'enl') + ' nickname">';
       } else {
         submitterSpan = '<span class="none">';
       }
-      portalDetailedDescription += '<tr style="padding-bottom: 1em;"><td><b>Photo submitted by:</b></td><td>' + submitterSpan
+      portalDetailedDescription += '<tr><th>Photo by:</th><td>' + submitterSpan
-                                + portalDetailObj.submitter.name + '</span> (' + portalDetailObj.submitter.voteCount + ' votes)</td></tr>';
+                                + escapeHtmlSpecialChars(portalDetailObj.submitter.name) + '</span> (' + portalDetailObj.submitter.voteCount + ' votes)</td></tr>';
     }
-
+    if(portalDetailObj.submitter.link.length > 0) {
-    if(d.portalV2.descriptiveText.ADDRESS) {
+      portalDetailedDescription += '<tr><th>Photo from:</th><td><a href="'
-      portalDetailedDescription += '<tr style="padding-bottom: 1em;"><td><b>Address:</b></td><td>' + d.portalV2.descriptiveText.ADDRESS + '</td></tr>';
+                                + escapeHtmlSpecialChars(portalDetailObj.submitter.link) + '">' + escapeHtmlSpecialChars(portalDetailObj.submitter.link) + '</a></td></tr>';
     }
 
     if(portalDetailObj.description) {
-      portalDetailedDescription += '<tr><td><b>Description:</b></td><td>' + portalDetailObj.description + '</td></tr>';
+      portalDetailedDescription += '<tr class="padding-top"><th>Description:</th><td>' + escapeHtmlSpecialChars(portalDetailObj.description) + '</td></tr>';
-    }
-
-    if(portalDetailObj.submitter.link.length > 0) {
-      portalDetailedDescription += '<tr><td><b>Link to original:</b></td><td><a href="'
-                                + portalDetailObj.submitter.link + '">' + portalDetailObj.submitter.link + '</a></td></tr>';
     }
+//    if(d.portalV2.descriptiveText.ADDRESS) {
+//      portalDetailedDescription += '<tr><th>Address:</th><td>' + escapeHtmlSpecialChars(d.portalV2.descriptiveText.ADDRESS) + '</td></tr>';
+//    }
 
     portalDetailedDescription += '</table>';
   }
@@ -91,9 +93,9 @@ window.renderPortalDetails = function(guid) {
       + '<span class="close" onclick="unselectOldPortal();" title="Close">X</span>'
       // help cursor via ".imgpreview img"
       + '<div class="imgpreview" '+imgTitle+' style="background-image: url('+img+')">'
+      + '<span id="level">'+Math.floor(getPortalLevel(d))+'</span>'
       + '<div class="portalDetails">'+ portalDetailedDescription + '</div>'
       + '<img class="hide" src="'+img+'"/></div>'
-      + '<span id="level">'+Math.floor(getPortalLevel(d))+'</span>'
       + '</div>'
       + '<div class="mods">'+getModDetails(d)+'</div>'
       + randDetails

style.css

@@ -943,14 +943,17 @@ td + td {
 }
 
 
-.portal_details tr {
-  padding-bottom: 1em;
-}
 
-
+.portal_details th, .portal_details td {
-.portal_details td:first-of-type {
-  min-width: 10em;
   vertical-align: top;
+  text-align: left;
 }
 
+.portal_details th {
+  white-space: nowrap;
+  padding-right: 1em;
+}
 
+.portal_details tr.padding-top th, .portal_details tr.padding-top td {
+  padding-top: 0.7em;
+}