在移动设备（iPhone、Android 等）上查看 trac

发布于 2024-12-01 12:28:45 字数 241 浏览 3 评论 0原文

我们的团队大量使用 Trac 进行项目管理，我需要时常查看 Trac 站点。然而，从移动设备（我的手机是 iPhone）查看 Trac 网站确实很不方便。

我想知道是否有任何现有的 hack / 插件 / 模板 / css 套件可以帮助在移动设备上更好地显示 Trac？我认为一些标签和 css 定位应该可以解决问题，但我无法从中搜索出太多内容。

任何帮助表示赞赏。

非常感谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蒲公英的约定 2024-12-08 12:28:45

首先考虑阅读 Trac wiki 中的 TracInterfaceCustomization，更具体地说关于使用 style.css 因为我同意你肯定需要更改站点范围的样式。

可以在 trac-hacks.org 上找到现成的主题。也许您会发现一些适合您需要的东西，至少比 Trac 默认的更好一点，以便更快地启动。

最后， ThemeEnginePlugin 似乎是一个很好的工具，可以快速将您的想法变成现实，尽管我已经到目前为止我自己还没有测试过这个。祝你好运。

回复收藏 0 原文

ㄟ。诗瑗 2024-12-08 12:28:45

好吧，我花了一段时间才解决这个问题。这并不完美，也不好，但至少对我来说看起来好一点。

这是我所做的：

在 [trac root]/templates/ 文件夹中，添加或编辑 site.html，其中包含以下内容：

<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>

上面将添加每个 Trac 页面的新 CSS 链接 /htdocs-trac/css/trac-mobile.css ，然后您可以将仅限移动设备的样式放入 css 文件中，就我而言， css 文件包含：

.nav li {
    white-space: normal;
}

#mainnav *:link, #mainnav *:visited {
    padding: 0 10px;
}

#mainnav *:link, #mainnav *:visited {
  padding: 0 0px;
}

#header h1 {
margin: 0;

}

老实说，它只是使标题栏看起来更好，并且按钮不发生碰撞。但是很多地方使用基于表格的布局，并且（似乎）无法通过CSS轻松解决。

希望它对其他人有帮助。

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.

回复收藏 0 原文

~没有更多了~