more work for #179.

Due to changed display of the portal image it now doesn’t flicker anymore,
which simplifies code a lot.

code/boot.js

@@ -274,7 +274,7 @@ function boot() {
   // sidebar is now at final height. Adjust scrollwrapper so scrolling
   // is possible for small screens and it doesn’t block the area below
   // it.
-  $('#scrollwrapper').css('max-height', $('#sidebar').get(0).scrollHeight + 'px');
+  $('#scrollwrapper').css('max-height', ($('#sidebar').get(0).scrollHeight+3) + 'px');
 
   // workaround for #129. Not sure why this is required.
   setTimeout('window.map.invalidateSize(false);', 500);

code/portal_detail_display.js

@@ -33,24 +33,14 @@ window.renderPortalDetails = function(guid) {
   var linkedFields = ['fields', d.portalV2.linkedFields.length];
 
   // collect and html-ify random data
-  var randDetails = [playerText, sinceText, getRangeText(d), getEnergyText(d), linksText, getAvgResoDistText(d), linkedFields, getDestroyAP(d)];
+  var randDetails = [
-  randDetails = randDetails.map(function(detail) {
+    playerText, sinceText, getRangeText(d), getEnergyText(d),
-    if(!detail) return '';
+    linksText, getAvgResoDistText(d), linkedFields, getDestroyAP(d)
-    detail = '<aside>'+detail[0]+'<span>'+detail[1]+'</span></aside>';
+  ];
-    return detail;
+  randDetails = '<table id="randdetails">' + genFourColumnTable(randDetails) + '</table>';
-  }).join('\n');
+
+  var resoDetails = '<table id="resodetails">' + getResonatorDetails(d) + '</table>';
 
-  // replacing causes flicker, so if the selected portal does not
-  // change, only update the data points that are likely to change.
-  if(update) {
-    console.log('Updating portal details');
-    $('#level').text(Math.floor(getPortalLevel(d)));
-    $('.mods').html(getModDetails(d));
-    $('#randdetails').html(randDetails);
-    $('#resodetails').html(getResonatorDetails(d));
-    $('#portaldetails').attr('class', TEAM_TO_CSS[getTeam(d)]);
-  } else {
-    console.log('exchanging portal details');
   setPortalIndicators(d);
   var img = d.imageByUrl && d.imageByUrl.imageUrl ? d.imageByUrl.imageUrl : DEFAULT_PORTAL_IMG;
 
@@ -69,14 +59,13 @@ window.renderPortalDetails = function(guid) {
       + '<span id="level">'+Math.floor(getPortalLevel(d))+'</span>'
       + '</div>'
       + '<div class="mods">'+getModDetails(d)+'</div>'
-        + '<div id="randdetails">'+randDetails+'</div>'
+      + randDetails
-        + '<div id="resodetails">'+getResonatorDetails(d)+'</div>'
+      + resoDetails
       + '<div class="linkdetails">'
       + '<aside><a href="'+perma+'">portal link</a></aside>'
       + '<aside><a onclick="window.reportPortalIssue()">report issue</a></aside>'
       + '</div>'
     );
-  }
 
   // try to resolve names that were required for above functions, but
   // weren’t available yet.

code/portal_detail_display_tools.js

@@ -77,18 +77,18 @@ window.getAvgResoDistText = function(d) {
 }
 
 window.getResonatorDetails = function(d) {
-  var resoDetails = '';
+  var resoDetails = [];
   // octant=slot: 0=E, 1=NE, 2=N, 3=NW, 4=W, 5=SW, 6=S, SE=7
   // resos in the display should be ordered like this:
   //   N    NE         Since the view is displayed in columns, they
   //  NW    E          need to be ordered like this: N, NW, W, SW, NE,
   //   W    SE         E, SE, S, i.e. 2 3 4 5 1 0 7 6
   //  SW    S
-  $.each([2, 3, 4, 5, 1, 0, 7, 6], function(ind, slot) {
+
-    var isLeft = slot >= 2 && slot <= 5;
+  $.each([2, 1, 3, 0, 4, 7, 5, 6], function(ind, slot) {
     var reso = d.resonatorArray.resonators[slot];
     if(!reso) {
-      resoDetails += renderResonatorDetails(slot, 0, 0, null, null, isLeft);
+      resoDetails.push(renderResonatorDetails(slot, 0, 0, null, null));
       return true;
     }
 
@@ -100,16 +100,16 @@ window.getResonatorDetails = function(d) {
     // naming will still be correct.
     slot = parseInt(reso.slot);
 
-    resoDetails += renderResonatorDetails(slot, l, v, dist, nick, isLeft);
+    resoDetails.push(renderResonatorDetails(slot, l, v, dist, nick));
   });
-  return resoDetails;
+  return genFourColumnTable(resoDetails);
 }
 
 // helper function that renders the HTML for a given resonator. Does
 // not work with raw details-hash. Needs digested infos instead:
 // slot: which slot this resonator occupies. Starts with 0 (east) and
 // rotates clockwise. So, last one is 7 (southeast).
-window.renderResonatorDetails = function(slot, level, nrg, dist, nick, isLeft) {
+window.renderResonatorDetails = function(slot, level, nrg, dist, nick) {
   if(level === 0) {
     var meter = '<span class="meter" title="octant:\t' + OCTANTS[slot] + '"></span>';
   } else {
@@ -130,11 +130,9 @@ window.renderResonatorDetails = function(slot, level, nrg, dist, nick, isLeft) {
 
     var fill  = '<span style="'+style+'"></span>';
 
-    var meter = '<span class="meter meter-rel" title="'+inf+'">' + fill + lbar + '</span>';
+    var meter = '<span class="meter" title="'+inf+'">' + fill + lbar + '</span>';
   }
-  var cls = isLeft ? 'left' : 'right';
+  return [meter, nick || ''];
-  var text = '<span class="meter-text '+cls+'">'+(nick||'')+'</span>';
-  return (isLeft ? text+meter : meter+text) + '<br/>';
 }
 
 // calculate AP gain from destroying portal

code/utils_misc.js

@@ -216,3 +216,15 @@ window.uniqueArray = function(arr) {
     return $.inArray(v, arr) === i;
   });
 }
+
+window.genFourColumnTable = function(blocks) {
+  var t = $.map(blocks, function(detail, index) {
+    if(!detail) return '';
+    if(index % 2 === 0)
+      return '<tr><td>'+detail[1]+'</td><th>'+detail[0]+'</th>';
+    else
+      return '    <th>'+detail[0]+'</th><td>'+detail[1]+'</td></tr>';
+  }).join('');
+  if(t.length % 2 === 1) t + '<td></td><td></td></tr>';
+  return t;
+}

style.css

@@ -369,12 +369,13 @@ h2 sup, h2 sub {
 input {
   background-color: rgba(0, 0, 0, 0.3);
   color: #ffce00;
-  height: 21px;
+  height: 24px;
-  line-height: 22px;
+  padding:3px 4px 1px 4px;
-  padding: 0 4px;
   font-size: 14px;
   border:0;
   font-family:inherit;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -428,9 +429,11 @@ h3 {
 
 /* portal mods */
 .mods {
-  margin-bottom: 1px;
+  margin: 5px auto 1px auto;
-  margin-top: 5px;
+  padding: 0 2px;
+  width: 296px;
   height: 75px;
+  text-align: center;
 }
 
 .mods span {
@@ -440,12 +443,12 @@ h3 {
    * as that’s solved by setting height on .mods. */
   display: block;
   float:left;
-  height: 63.7px;
+  height: 64px;
-  margin-left: 4px;
+  margin: 0 2px;
   overflow: hidden;
   padding: 2px;
   text-align: center;
-  width: 63.7px;
+  width: 64px;
   cursor:help;
   border: 1px solid #666;
 }
@@ -461,84 +464,75 @@ h3 {
   border: 1px solid #017f01;
 }
 
-/* random details list */
+/* random details, resonator details */
-#randdetails {
+#randdetails, #resodetails {
-  margin: 0 4px;
+  width: 100%;
-  margin-top: 11px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 4px;
+  table-layout: fixed;
+  border-spacing: 0m;
+  border-collapse: collapse;
 }
 
-aside {
+#randdetails td, #resodetails td {
-  display: inline-block;
-  width: 140px;
-}
-
-aside span {
   overflow: hidden;
   text-overflow: "~";
+  vertical-align: top;
   white-space: nowrap;
-  width: 74px;
+  width: 50%;
+  width: calc(50% - 62px);
 }
 
-aside:nth-child(odd) {
+#randdetails th, #resodetails th {
-  margin-right: 4px;
+  font-weight: normal;
   text-align: right;
-}
+  width: 62px;
-
-aside:nth-child(even) {
-  margin-left: 4px;
-  text-align: left;
-}
-
-aside:nth-child(even) span {
-  float: right;
-  padding-left: 4px;
-  text-align: left;
-}
-
-aside:nth-child(odd) span {
-  float: left;
   padding-right:4px;
+  padding-left:4px;
+}
+
+#randdetails th + th, #resodetails th + th {
+  text-align: left;
+  padding-right: 4px;
+  padding-left: 4px;
+}
+
+#randdetails td:first-child, #resodetails td:first-child {
   text-align: right;
 }
 
+
+#randdetails {
+  margin-top: 9px;
+  margin-bottom: 9px;
+}
+
+
 #randdetails tt {
   font-family: inherit;
   cursor: help;
 }
 
-
 /* resonators */
 #resodetails {
-  white-space: nowrap;
+  margin-bottom: 9px;
-  margin: 16px 0;
-  -moz-column-gap: 10px;
-  -moz-column-width: 141px;
-  -webkit-column-gap: 10px;
-  -webkit-column-width: 141px;
 }
 
 .meter {
   background: #000;
   cursor: help;
-  display: inline-block;
-  height: 14px;
-  padding: 1px;
-  width: 58px;
-}
-
-.meter-text {
   display: inline-block;
   height: 18px;
-  margin: 0 4px;
+  padding: 1px;
-  overflow: hidden;
+  width: 100%;
-  text-overflow: "~";
+  -webkit-box-sizing: border-box;
-  vertical-align: top;
+  -moz-box-sizing: border-box;
-  white-space: nowrap;
+  box-sizing: border-box;
-  width: 75px;
+  position: relative;
-}
+  left: 0;
-
+  top: 0;
-.meter-text.left {
-  text-align: right;
 }
 
 .meter span {
@@ -546,36 +540,39 @@ aside:nth-child(odd) span {
   height: 14px;
 }
 
-.meter-rel {
-  position: relative;
-  left: 0;
-  top: 0;
-}
-
 .meter-level {
   position: absolute;
   top: -2px;
-  left: 25px;
+  left: 50%;
+  margin-left: -6px;
   text-shadow: 0.0em 0.0em 0.3em #808080;
 }
 /* links below resos */
 
 .linkdetails {
-  text-align: center;
+  margin-bottom: 8px;
-  margin-bottom: 10px;
 }
-.linkdetails aside {
+
-  margin: 0 4px;
+aside {
-  width: 140px;
+  display: inline-block;
+  padding: 0 5px;
+  width: 50%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: right;
+}
+aside + aside {
+  text-align: left;
 }
 
 #toolbox {
-  padding: 4px;
+  padding: 4px 2px;
   font-size:90%;
 }
 
 #toolbox > a {
-  padding: 5px;
+  padding: 4px;
 }
 
 /* a common portal display takes this much space (prevents moving