make tt-rss responsive to use on mobile browsers

Development-related discussion, including bundled plugins
AMA3
Bear Rating Trainee
Bear Rating Trainee
Posts: 5
Joined: 11 Apr 2013, 17:49

make tt-rss responsive to use on mobile browsers

Postby AMA3 » 26 Aug 2013, 03:31

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>

User avatar
fox
^ me reading your posts ^
Posts: 6318
Joined: 27 Aug 2005, 22:53
Location: Saint-Petersburg, Russia
Contact:

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

Postby fox » 26 Aug 2013, 08:51

This is the kinda thing better done through the plugin system btw.

AMA3
Bear Rating Trainee
Bear Rating Trainee
Posts: 5
Joined: 11 Apr 2013, 17:49

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

Postby AMA3 » 26 Aug 2013, 16:21

I will have to learn the plugin system... some day! :P

JustAMacUser
Bear Rating Overlord
Bear Rating Overlord
Posts: 373
Joined: 20 Aug 2013, 23:13

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

Postby JustAMacUser » 28 Aug 2013, 06:15

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


Return to “Development”

Who is online

Users browsing this forum: No registered users and 3 guests