diff --git a/core/code/chat.js b/core/code/chat.js index 044ca6de3..036a229fe 100644 --- 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 index 5c89e7b01..cd3b3b8bd 100644 --- a/core/code/smartphone.js +++ b/core/code/smartphone.js @@ -68,21 +68,27 @@ window.runOnSmartphonesBeforeBoot = function () { }; window.smartphone.mapButton = $('map').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 = $('info').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'); @@ -196,8 +202,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 index f480fef89..3092b9ea4 100644 --- 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; +} \ No newline at end of file