Merge pull request #765 from modos189/feature/mobile-view

Added controls to use the mobile version of IITC without an app
IITC-CE · Nov 4, 2024 · 6462fbe · 6462fbe
2 parents fb5b2b8 + 78e470d
commit 6462fbe
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 11 deletions.
diff --git a/core/code/chat.js b/core/code/chat.js
@@ -364,7 +364,12 @@ chat.show = function (name) {
 chat.chooser = function (event) {
   var t = $(event.target);
   var tab = t.data('channel');
-  chat.chooseTab(tab);
+
+  if (window.isSmartphone() && !window.useAppPanes()) {
+    window.show(tab);
+  } else {
+    chat.chooseTab(tab);
+  }
 };
 
 /**

diff --git a/core/code/smartphone.js b/core/code/smartphone.js
@@ -68,21 +68,27 @@ window.runOnSmartphonesBeforeBoot = function () {
   };
 
   window.smartphone.mapButton = $('<a>map</a>').click(function () {
+    window.show('map');
     $('#map').css({ visibility: 'visible', opacity: '1' });
     $('#updatestatus').show();
-    $('#chatcontrols a .active').removeClass('active');
+    $('#chatcontrols a.active').removeClass('active');
     $("#chatcontrols a:contains('map')").addClass('active');
   });
 
   window.smartphone.sideButton = $('<a>info</a>').click(function () {
+    window.show('info');
     $('#scrollwrapper').show();
     window.resetScrollOnNewPortal();
-    $('.active').removeClass('active');
+    $('#chatcontrols a.active').removeClass('active');
     $("#chatcontrols a:contains('info')").addClass('active');
   });
 
   $('#chatcontrols').append(window.smartphone.mapButton).append(window.smartphone.sideButton);
 
+  if (!window.useAppPanes()) {
+    document.body.classList.add('show_controls');
+  }
+
   window.addHook('portalDetailsUpdated', function () {
     var x = $('.imgpreview img').removeClass('hide');
 
@@ -197,8 +203,4 @@ window.runOnSmartphonesAfterBoot = function () {
         $('#sidebar').animate({ scrollTop: newTop }, 200);
       }
     });
-
-  // make buttons in action bar flexible
-  var l = $('#chatcontrols a:visible');
-  l.css('width', 100 / l.length + '%');
 };
diff --git a/core/smartphone.css b/core/smartphone.css
@@ -125,10 +125,6 @@ body {
   margin-left: 4px;
 }
 
-#sidebar, #chatcontrols, #chat, #chatinput {
-  background: transparent !important;
-}
-
 .leaflet-top .leaflet-control {
   margin-top: 5px !important;
   margin-left: 5px !important;
@@ -257,3 +253,34 @@ body {
    https://github.com/IITC-CE/ingress-intel-total-conversion/issues/89
 */
 .leaflet-bottom { bottom: 5px; }
+
+/* Controls for mobile view without an app */
+:root {
+  --top-controls-height: 38px;
+}
+
+body.show_controls #chatcontrols {
+  display: flex !important;
+  top: 0;
+  overflow-x: auto;
+  width: calc(100% - 1px);
+}
+
+body.show_controls #chatcontrols a {
+  flex: 1;
+  min-width: fit-content;
+  padding: 0 5px;
+}
+
+body.show_controls #map {
+  height: calc(100vh - var(--top-controls-height) - 25px);
+  margin-top: var(--top-controls-height);
+}
+
+body.show_controls #scrollwrapper {
+  margin-top: var(--top-controls-height)
+}
+
+body.show_controls #chat {
+  top: var(--top-controls-height) !important;
+}