view trac on mobile devices (iphone, android, etc)_问答_开发者

view trac on mobile devices (iphone, android, etc)

开发者 https://www.devze.com 2023-03-30 07:22 出处：网络

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\

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.