Geek Answers Handbook

View trac on mobile devices (iphone, android, etc.)

Our team uses Trac to manage projects, and I need to browse the Trac website from time to time. However, it’s really inconvenient to browse the Trac website from a mobile device (this is an iphone in my case).

I wonder if there is any existing hack / plugin / template / css package that could better display Trac on mobile devices? I thought that some <meta> tags and css positioning should do the trick, but I couldn’t do much of this.

any help is appreciated.

thanks a lot!

+4
source share
2 answers

Consider reading TracInterfaceCustomization in the Trac wiki for starters, more specifically about using style.css , since I agree that you will definitely need to change the styles of the site.

Ready-made topics are available at trac-hacks.org . You may find something suitable for your need, at least slightly better than the default Trac for faster startup.

And finally, ThemeEnginePlugin seems like a great tool for quickly translating your ideas, although I have never tested it on my own so far. Good luck.

+2
source

Well, it took me a while to figure this out. It's not perfect nor good, but at least it looks a little better for me.

here is what i did:

in the [trac root]/templates/ folder, add or edit site.html , which contains the following:

 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://genshi.edgewall.org/" py:strip=""> <head py:match="head" py:attrs="select('@*')"> <meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> ${select('*|comment()|text()')} <link media="handheld, screen and (max-device-width: 480px)" href="/htdocs-trac/css/trac-mobile.css" type="text/css" rel="stylesheet" /> </head> <!--! Custom match templates go here --> </html>

the above will add a new CSS link /htdocs-trac/css/trac-mobile.css for each Trac page, and then you can put mobile-only styles in the css file, in my case the css file contains:

 .nav li { white-space: normal; } #mainnav *:link, #mainnav *:visited { padding: 0 10px; } #mainnav *:link, #mainnav *:visited { padding: 0 0px; } #header h1 { margin: 0; }

honestly, it ONLY makes the title bar better, and the button did not collide. But many places use table-based layouts and (it seems) cannot be easily resolved by css.

Hope this helps others.

+1
source

More articles:


All Articles