From 2023e335674df2487fdaff777e9bbf81524b787a Mon Sep 17 00:00:00 2001 From: Stefan Breunig Date: Sat, 16 Feb 2013 10:02:18 +0100 Subject: [PATCH] more work for #179. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Due to changed display of the portal image it now doesn’t flicker anymore, which simplifies code a lot. --- code/boot.js | 2 +- code/portal_detail_display.js | 71 ++++++-------- code/portal_detail_display_tools.js | 20 ++-- code/utils_misc.js | 12 +++ style.css | 139 ++++++++++++++-------------- 5 files changed, 120 insertions(+), 124 deletions(-) diff --git a/code/boot.js b/code/boot.js index 61450938..9ef90ec7 100644 --- 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); diff --git a/code/portal_detail_display.js b/code/portal_detail_display.js index fee95de1..92e8054e 100644 --- a/code/portal_detail_display.js +++ b/code/portal_detail_display.js @@ -33,50 +33,39 @@ 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 = ''; - return detail; - }).join('\n'); + var randDetails = [ + playerText, sinceText, getRangeText(d), getEnergyText(d), + linksText, getAvgResoDistText(d), linkedFields, getDestroyAP(d) + ]; + randDetails = '' + genFourColumnTable(randDetails) + '
'; - // 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; + var resoDetails = '' + getResonatorDetails(d) + '
'; - var lat = d.locationE6.latE6; - var lng = d.locationE6.lngE6; - var perma = 'http://ingress.com/intel?latE6='+lat+'&lngE6='+lng+'&z=17&pguid='+guid; - var imgTitle = 'title="'+getPortalDescriptionFromDetails(d)+'\n\nClick to show full image."'; + setPortalIndicators(d); + var img = d.imageByUrl && d.imageByUrl.imageUrl ? d.imageByUrl.imageUrl : DEFAULT_PORTAL_IMG; - $('#portaldetails') - .attr('class', TEAM_TO_CSS[getTeam(d)]) - .html('' - + '

'+d.portalV2.descriptiveText.TITLE+'

' - // help cursor via “.imgpreview img” - + '
' - + '' - + ''+Math.floor(getPortalLevel(d))+'' - + '
' - + '
'+getModDetails(d)+'
' - + '
'+randDetails+'
' - + '
'+getResonatorDetails(d)+'
' - + '
' - + '' - + '' - + '
' - ); - } + var lat = d.locationE6.latE6; + var lng = d.locationE6.lngE6; + var perma = 'http://ingress.com/intel?latE6='+lat+'&lngE6='+lng+'&z=17&pguid='+guid; + var imgTitle = 'title="'+getPortalDescriptionFromDetails(d)+'\n\nClick to show full image."'; + + $('#portaldetails') + .attr('class', TEAM_TO_CSS[getTeam(d)]) + .html('' + + '

'+d.portalV2.descriptiveText.TITLE+'

' + // help cursor via “.imgpreview img” + + '
' + + '' + + ''+Math.floor(getPortalLevel(d))+'' + + '
' + + '
'+getModDetails(d)+'
' + + randDetails + + resoDetails + + '
' + + '' + + '' + + '
' + ); // try to resolve names that were required for above functions, but // weren’t available yet. diff --git a/code/portal_detail_display_tools.js b/code/portal_detail_display_tools.js index e4639cd4..556945c8 100644 --- 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 = ''; } else { @@ -130,11 +130,9 @@ window.renderResonatorDetails = function(slot, level, nrg, dist, nick, isLeft) { var fill = ''; - var meter = '' + fill + lbar + ''; + var meter = '' + fill + lbar + ''; } - var cls = isLeft ? 'left' : 'right'; - var text = ''+(nick||'')+''; - return (isLeft ? text+meter : meter+text) + '
'; + return [meter, nick || '']; } // calculate AP gain from destroying portal diff --git a/code/utils_misc.js b/code/utils_misc.js index 77b4ee62..90ddfed5 100644 --- 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 ''+detail[1]+''+detail[0]+''; + else + return ' '+detail[0]+''+detail[1]+''; + }).join(''); + if(t.length % 2 === 1) t + ''; + return t; +} diff --git a/style.css b/style.css index c840dd9c..3c9fbc8a 100644 --- 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; + width: 62px; + padding-right:4px; + padding-left:4px; } -aside:nth-child(even) { - margin-left: 4px; +#randdetails th + th, #resodetails th + th { 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 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