Added status bar for mobile version.

code/portal_detail_display.js

@@ -129,5 +129,6 @@ window.unselectOldPortal = function() {
   if(oldPortal) portalResetColor(oldPortal);
   selectedPortal = null;
   $('#portaldetails').html('');
+  if(isSmartphone()) $('.fullimg').remove();
   clearPortalIndicators();
 }

code/request_handling.js

@@ -39,7 +39,7 @@ window.requests.abort = function() {
 // to website. Updates info in layer chooser.
 window.renderUpdateStatus = function() {
 
-  var t = '<div><span class="help portallevel" title="Indicates portal levels displayed.  Zoom in to display lower level portals."><b>portals</b>: ';
+  var t = '<span class="help portallevel" title="Indicates portal levels displayed.  Zoom in to display lower level portals."><b>portals</b>: ';
   var minlvl = getMinPortalLevel();
   if(minlvl === 0)
     t += 'all';
@@ -66,8 +66,6 @@ window.renderUpdateStatus = function() {
   if(window.failedRequestCount > 0)
     t += ' <span style="color:#f66">' + window.failedRequestCount + ' failed</span>'
 
-  t += '</div>';
-
   var portalSelection = $('.leaflet-control-layers-overlays label');
   //it's an array - 0=unclaimed, 1=lvl 1, 2=lvl 2, ..., 8=lvl 8 - 9 relevant entries
   //mark all levels below (but not at) minlvl as disabled
@@ -76,7 +74,7 @@ window.renderUpdateStatus = function() {
   portalSelection.slice(minlvl, 8+1).removeClass('disabled').attr('title', '');
 
 
-  $('#updatestatus').html(t);
+  $('#innerstatus').html(t);
   //$('#updatestatus').click(function() { startRefreshTimeout(10); });
   //. <a style="cursor: pointer" onclick="startRefreshTimeout(10)" title="Refresh">⟳</a>';
 }

code/smartphone.js

@@ -68,12 +68,30 @@ window.runOnSmartphonesBeforeBoot = function() {
   });
 }
 
+window.smartphoneInfo = function(data) {
+  var d = data.portalDetails;
+  var t = 'L' + Math.floor(getPortalLevel(d));
+  var percentage = '0%';
+  var totalEnergy = getTotalPortalEnergy(d);
+  if(getTotalPortalEnergy(d) > 0) {
+    percentage = Math.floor((getCurrentPortalEnergy(d) / getTotalPortalEnergy(d) * 100)) + '%';
+  }
+  t += ' ' + percentage + ' ';
+  t += d.portalV2.descriptiveText.TITLE;
+
+  $('#mobileinfo').html(t);
+}
+
 window.runOnSmartphonesAfterBoot = function() {
   if(!isSmartphone()) return;
   console.warn('running smartphone post boot stuff');
 
   smartphone.mapButton.click();
 
+  // add a div/hook for updating mobile info
+  $('#updatestatus').prepend('<div id="mobileinfo"></div>');
+  window.addHook('portalDetailsUpdated', window.smartphoneInfo);
+
   // disable img full view
   $('#portaldetails').off('click', '**');
 

main.js

@@ -100,7 +100,7 @@ document.getElementsByTagName('body')[0].innerHTML = ''
   + '    </div>'
   + '  </div>'
   + '</div>'
-  + '<div id="updatestatus"></div>';
+  + '<div id="updatestatus"><div id="innerstatus"></div></div>';
 
 // putting everything in a wrapper function that in turn is placed in a
 // script tag on the website allows us to execute in the site’s context

mobile/smartphone.css

@@ -3,8 +3,32 @@ body {
   color: #fff;
 }
 
-#sidebar, #updatestatus, #chatcontrols, #chat, #chatinput {
+#updatestatus {
-  background: #0B3351 !important
+  background: #262c32;
+  width: 100%;
+  color: #d4d5d6;
+  border: 0;
+}
+
+#innerstatus {
+  float: right;
+  max-width: 50%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#mobileinfo {
+  float: left;
+  margin-right: 1em;
+  max-width: 50%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#sidebar, #chatcontrols, #chat, #chatinput {
+  background: #0B3351 !important;
 }
 
 .leaflet-top .leaflet-control {