view trac on mobile devices (iphone, android, etc)
Our team uses Trac heavily for project management, and I need to view the Trac site from ti开发者_如何学编程me 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!
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.
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.
加载中,请稍侯......
精彩评论