Using Tiny Tiny RSS with Opera Mobile (updated)

Tiny Tiny RSS (aka „tt-rss„) is a very nice tool if you read many rss feads from various devices. It’s an alternative to Google Reader and runs on your own server. You only need a database (MySQL or Postgres) and PHP.

One of its features is a mobile view. This allows you to read news from you mobile phone. You just have to append /mobile to your url on your iWhatever (iPhone, iPad, iPod), or /mobile/classic on other mobile browsers.

A few hacks help to make the easier-to-read™ iPhone view available to other browsers. I tested it with Opera Mobile.

Note: I tested this with tt-rss 1.5.0, it still works. Ajust the line numbers a bit 😉

Step 1: the CSS

HTML 5 is nice. At least, if your browser supports it. Unfortunately, Opera Mobile doesn’t. Worse: it stops parsing the CSS file. The problem is hidden in lib/iui/iui.css. These two selectors cause Opera Mobile to stop reading the file:

.row > input:not(input[type|=radio]):not(input[type|=checkbox])
input:not(input[type|=radio]):not(input[type|=checkbox])

Well, the library is safary-specific, so we can’t blame anyone. But we can fix it so  that it work in our special case. Just replace the line 243

input:not(input[type|=radio]):not(input[type|=checkbox]) {

through this:

input[type|=text], input[type|=password] {

.row > input:not(input[type|=radio]):not(input[type|=checkbox]) {

through this:

.row > input[type|=text], .row > input[type|=password] {

Again: the replacement is not globally valid, but it works for tt-rss.

Part 2: the Javascript

The file lib/iui/iui.js is responsible for generating the HTML. One of its tasks is to calculate the „back button“ in the upper left corner of the page. If the page does not define one, it just uses the browser back function. Unfortunately, in some cases the word „(null)“ is used as the target, which causes the script to show only a few parts of the page.

Line 373 is responsible for this:

backButton.target = page.getAttribute("myBackTarget");

We can replace it with an additional null check:

target = page.getAttribute("myBackTarget");
if (target == null)
    backButton.target = '';
else
    backButton.target = target;

If you now visit http://your-server/tt-rss/mobile, you should be able to read and navigate through the news.

Update: Part 3: the Script

The next file to edit is feeds/mobile/functions.php. Around line 463 change

print "<input enabled='false' name='updated' disabled value='$updated_fmt'/>";

to

print "<input type='text' enabled='false' name='updated' disabled   value='$updated_fmt'/>";

This will make the date-field (more) readable, because our new CSS selector wants a „type=text“ attribute.

Part 4: the Zoom

For a multi user setup, you should stop here. Opera Mobile does not allow a webpage to change the zoom level. If you use a zoom level other than 100%, you will only see parts of the page. You can prevent this by setting the same zoom level in mobile/index.php. But as all users share this setting, all users will  always have the same zoom level. Well, we cannot have everything we want 🙂

I changed line 29 to this:

<meta name="viewport" content="width=device-width; initial-scale=1.4; maximum-scale=1.0; user-scalable=0;"/>

Note the initial-scale of 1.4. This is my zoom level (140 %). Now, the whole page fits in my personal screen.

That’s it

That’s it, we’re done. I hope, someone finds this article useful. At the moment, i’m reading the news with tt-rss everythime I sit in a train. And thats happens 2 to 4 times a day…