more work for #179.

Due to changed display of the portal image it now doesn’t flicker anymore, which simplifies code a lot.
2013-02-16 10:02:18 +01:00
parent 43d9251c57
commit 2023e33567
5 changed files with 120 additions and 124 deletions
--- a/code/boot.js
+++ b/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);
--- a/code/portal_detail_display.js
+++ b/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)];
-  randDetails = randDetails.map(function(detail) {
-    if(!detail) return '';
-    detail = '<aside>'+detail[0]+'<span>'+detail[1]+'</span></aside>';
-    return detail;
-  }).join('\n');
+  var randDetails = [
+    playerText, sinceText, getRangeText(d), getEnergyText(d),
+    linksText, getAvgResoDistText(d), linkedFields, getDestroyAP(d)
+  ];
+  randDetails = '<table id="randdetails">' + genFourColumnTable(randDetails) + '</table>';
+
+  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>'
-        + '<div id="resodetails">'+getResonatorDetails(d)+'</div>'
+      + randDetails
+      + 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.
--- a/code/portal_detail_display_tools.js
+++ b/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';
-  var text = '<span class="meter-text '+cls+'">'+(nick||'')+'</span>';
-  return (isLeft ? text+meter : meter+text) + '<br/>';
+  return [meter, nick || ''];
 }

 // calculate AP gain from destroying portal
--- a/code/utils_misc.js
+++ b/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;
+}
--- a/style.css
+++ b/style.css
@@ -369,12 +369,13 @@ h2 sup, h2 sub {
 input {
  background-color: rgba(0, 0, 0, 0.3);
  color: #ffce00;
-  height: 21px;
-  line-height: 22px;
-  padding: 0 4px;
+  height: 24px;
+  padding:3px 4px 1px 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-top: 5px;
+  margin: 5px auto 1px auto;
+  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;
-  margin-left: 4px;
+  height: 64px;
+  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 */
-#randdetails {
-  margin: 0 4px;
-  margin-top: 11px;
+/* random details, resonator details */
+#randdetails, #resodetails {
+  width: 100%;
+  -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 {
-  display: inline-block;
-  width: 140px;
-}
-
-aside span {
+#randdetails td, #resodetails td {
  overflow: hidden;
  text-overflow: "~";
+  vertical-align: top;
  white-space: nowrap;
-  width: 74px;
+  width: 50%;
+  width: calc(50% - 62px);
 }

-aside:nth-child(odd) {
-  margin-right: 4px;
+#randdetails th, #resodetails th {
+  font-weight: normal;
  text-align: right;
-}
-
-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;
+  width: 62px;
  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: 16px 0;
-  -moz-column-gap: 10px;
-  -moz-column-width: 141px;
-  -webkit-column-gap: 10px;
-  -webkit-column-width: 141px;
+  margin-bottom: 9px;
 }

 .meter {
  background: #000;
  cursor: help;
-  display: inline-block;
-  height: 14px;
-  padding: 1px;
-  width: 58px;
-}
-
-.meter-text {
  display: inline-block;
  height: 18px;
-  margin: 0 4px;
-  overflow: hidden;
-  text-overflow: "~";
-  vertical-align: top;
-  white-space: nowrap;
-  width: 75px;
-}
-
-.meter-text.left {
-  text-align: right;
+  padding: 1px;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+  left: 0;
+  top: 0;
 }

 .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: 10px;
+  margin-bottom: 8px;
 }
-.linkdetails aside {
-  margin: 0 4px;
-  width: 140px;
+
+aside {
+  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