5

Our team uses Trac heavily for project management, and I need to view the Trac site from time to time. Yet, it's really inconvenient to view the Trac site from the mobile device (it's an iphone in my case).

I wonder if there is any existing hack / plugin / template / css suite that could help display Trac better on the mobile devices? I thought some <meta> tags and css positioning should make the trick, yet I could not google out much from this.

any help is appreciated.

thx a lot!

Walty Yeung
  • 3,396
  • 32
  • 33

2 Answers2

2

Consider reading TracInterfaceCustomization in Trac's wiki for a start, more specifically about using style.css as I agree that you'll certainly need to change site-wide styles.

Ready-made themes are available at trac-hacks.org. Maybe you'll find something suiting your need at least a bit better than Trac default for a quicker start.

And finally the ThemeEnginePlugin seems like a great tool to put your ideas into reality quickly, although I've never tested this on my own by now. Good luck.

hasienda
  • 2,390
  • 1
  • 13
  • 16
  • thx hasienda, I actually checked trac hacks > themes section before, but I could not find any theme that is related to the mobiles, did I overlook something? Just want to make sure I would not re-invent the wheels before I start to tune up the CSS. – Walty Yeung Aug 24 '11 at 05:52
  • Confirmed, I checked before answering here too, but there has been nothing specifically related to mobile clients. So your contribution would be very welcome to fill in this obvious gap. – hasienda Aug 24 '11 at 22:16
1

Ok, it took me a while to work out this. This is not perfect, neither good, but at least it looks a little better for me.

here is what I have done:

in the folder of [trac root]/templates/, add or edit the 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 would add a new CSS link of /htdocs-trac/css/trac-mobile.css for every Trac page, and then u could put the mobile-device-only styles inside 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 appeared better, and the button not collided. But a lot of places use table based layout, and (seems) could not be solved by css easily.

Hope it helps for others.

Walty Yeung
  • 3,396
  • 32
  • 33