Page 1 of 1

make tt-rss responsive to use on mobile browsers

Posted: 26 Aug 2013, 03:31
by AMA3
I tried a few of the TT-RSS native apps for my Android phone but decided that what I really wanted was to use the "desktop" version in the mobile browser, with a few adjustments to make it easier to use.

If you add the following just before the </body> tag in /index.php, it detects when the browser window is 800px wide or less, then makes the articles pane take up the full width of the screen, with a "Show Feeds" button at the top. When you click the button, the feeds pane is made full-width, with a "Show Items" button to revert. It also makes the font size in the articles pane a little bigger, so it's easier for an old fogey like me to see it on the tiny mobile screen.

Code: Select all

<script>
(function(){

document.getElementsByTagName('head').item(0).innerHTML +=
  '<meta name="viewport" content="width=device-width,initial-scale=1.0"/>';

if ( window.innerWidth <= 800 ) {

    var feedsHolder = document.getElementById('feeds-holder');
    var headerWrap = document.getElementById('header-wrap');
    headerWrap.style.fontSize = '14pt';

    feedsHolder.innerHTML =
      '<input type="button" id="ama3_items" value="Show Items"/>' +
      feedsHolder.innerHTML;

    document.getElementById('main_toolbar_form').innerHTML +=
      '<input type="button" id="ama3_feeds" value="Show Feeds"/>';

    document.getElementById('ama3_feeds').onclick =
      function() {
        feedsHolder.style.width = '100%';
        headerWrap.style.width = '0%';
        }

    var showItems =
      document.getElementById('ama3_items').onclick =
        function() {
          feedsHolder.style.width = '0%';
          headerWrap.style.width = '100%';
          };
    showItems();
  }

}());
</script>

Re: make tt-rss responsive to use on mobile browsers

Posted: 26 Aug 2013, 08:51
by fox
This is the kinda thing better done through the plugin system btw.

Re: make tt-rss responsive to use on mobile browsers

Posted: 26 Aug 2013, 16:21
by AMA3
I will have to learn the plugin system... some day! :P

Re: make tt-rss responsive to use on mobile browsers

Posted: 28 Aug 2013, 06:15
by JustAMacUser
There's also the Digest plugin which detects mobile devices and changes the UI. It's not as feature-rich as the standard UI but it does work well.

It's available from the contrib repository and I believe you can only enable it by adding it to the config.php file as it's a system plugin.

https://github.com/gothfox/Tiny-Tiny-RSS-Contrib