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!
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.
Related
For purposes of embedding very long Gists from Github in a Wordpress blog, what code will permit me to set the height so that vertical scroll-bars are generated? Something around 500px would be perfect.
EDIT: The issue is now resolved, but I spent so much time on this issue, I believe it would be helpful to have a thread dedicated to that issue. I've posted an answer below that is working.
<style type="text/css">
.gist {width:500px !important;}
.gist-file
.gist-data {max-height: 500px;max-width: 500px;}
</style>
<script src="https://gist.github.com/user-name/123456789.js"></script>
Example: Boilerplate webpage borrowed from : http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html [The answer works as advertised as of February 24, 2016 with Firefox 44.0.2 on OSX Snow Leopard 10.6.8.]
<html>
<!-- Text between angle brackets is an HTML tag and is not displayed.
Most tags, such as the HTML and /HTML tags that surround the contents of
a page, come in pairs; some tags, like HR, for a horizontal rule, stand
alone. Comments, such as the text you're reading, are not displayed when
the Web page is shown. The information between the HEAD and /HEAD tags is
not displayed. The information between the BODY and /BODY tags is displayed.-->
<head>
<title>Enter a title, displayed at the top of the window.</title>
</head>
<!-- The information between the BODY and /BODY tags is displayed.-->
<style type="text/css">
.gist {width:300px !important;}
.gist-file
.gist-data {max-height: 300px;max-width: 300px;}
</style>
<body>
<h1>Enter the main heading, usually the same as the title.</h1>
<p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
<ul>
<li>The first item in your list</li>
<li>The second item; <i>italicize</i> key words</li>
</ul>
<p>Improve your image by including an image. </p>
<p><img src="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p>
<p>Add a link to your favorite Web site.
Break up your page with a horizontal rule or two. </p>
<hr>
<p>Finally, link to another page in your own Web site.</p>
<!-- And add a copyright notice.-->
<p>© Wiley Publishing, 2011</p>
<script src="https://gist.github.com/lawlist/12345678.js"></script>
</body>
</html>
None of the above answers work anymore. Here is the updated CSS that displays the gist correctly with visible scrollbars where needed.
.gist {
max-width:350px;
overflow:auto;
}
.gist .blob-wrapper.data {
max-height:200px;
overflow:auto;
}
See this blog post for example:
How to set custom height and width of embedded Github Gist.
They seem to have changed something, so now you need to do this:
<style type="text/css"> .gist {width:500px; overflow:auto} .gist .file-data {max-height: 500px;max-width: 500px;} </style>
If your gist is inside an iFrame, which is generated and you can't access since it's and embedded HTML, you might want to take a look at this.
EDIT: This was a total rookie error on my part. I was editing a different fileset to the one I was testing. Sincere apologies to all who answered to help me out. I've upvoted all answers as I at least learned a little more on media queries from you all, but none provided the answer. Advice pls on what now to do with this ticket?
This is a busy topic on the site, but I haven't seen the solution for this problem.
The viewport tag is present. I'm using:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
When I resize the browser window in Chrome, it works fine, and I can see it snapping to new breakpoints as they are reached, however iPhone Safari displays the top left of the site only, with no sign of picking up any queries.
The CSS Media query I'm using for iPhone portrait is:
#media (max-width: 321px) { }
I'm using Bootstrap and LESS, so my media queries are at the end of the styles.
Sorry I'm not in a position to share code on this. It's an odd one — I'm hoping someone can see if there's something I may be missing.
EDIT
Here's a very basic example which is working on my iPhone. I can rotate from portrait to landscape and the bg color will change - so there's nothing wrong with the media query I'm using:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">
body
{
background: blue;
}
#media (max-width: 321px)
{
body
{
background: red;
}
}
</style>
</head>
<body>
Here is my content...
</body>
Edit
What solved this for me is a double ("or"-operated) media query, for either max-device-width or max-width. It's like David Rönnqvist's first suggestion, but it was only putting max-width, max-device-width BOTH in the media query that worked for me.
#media screen and (max-device-width:640px), screen and (max-width:640px) {
/* styles here */
}
BBTony, I hope this works for you.
I'm keeping the below because it is a fuller description of the problem than i've found anywhere else. I disliked my first solution (below the line) so much that I re-researched for the thousandth time - thanks to this post which gave me the above solution without the ridiculous !importants.
Edit: this also worked, but it's extremely inelegant: Putting "!important" on every line of the media query conditional CSS.
I was reluctant to propose that as an answer, but after going bonkers researching this for 3 days, it was the first thing that worked for me.
Full description of the problem: I had similar symptoms as BBTony. I had the viewport tag (and I had it above the stylesheets as recommended).
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
My media query, intended to catch any smallish device, was being ignored by an iPhone 3gs running iOS 5.1, but the same media query was being properly picked up by an iPhone 4s running iOS 6.
#media only screen and (max-device-width:640px) {
/* many styles here */
}
Very oddly, while most declarations within the media query were being ignored by the older iPhone, some of them were being respected. The newer iPhone 4s however respected all the CSS within the media query, as expected. On Safari desktop, the media queries all worked perfectly, snapping at both the breakpoints (there are 2).
I linted my CSS through several different linters, after reading here that CSS errors can cause mobile browsers to ignore media queries. After making certain that my CSS was compliant, and just for the hell of it, I put !important declarations after each and every line of CSS within the media query - like 80-100 !importants.
Presto.
I can't tell you how mad it made me that this even worked, and I'm curious why the old iphone would only respect the conditional with !important in this case.
I've previously used this for my site and it worked as iPhone specific media queries for me
#media only screen
and (max-device-width: 480px)
and (orientation:landscape) {
/* iPhone landscape */
}
#media only screen
and (max-device-width: 480px)
and (orientation:portrait) {
/* iPhone portrait */
}
Answers to other questions like this seem to suggest that 480px for the max-device-width is what you should go for in your media query.
I've been working on my first responsive design, and I'm having some trouble when viewing it on my iPhone. When I open a page on the iPhone, it's a little zoomed in to the left – just enough to miss text on the far right.
You can find the website here. The viewport-meta tag looks like this:
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
It looks fine on my computer and on my iPad. Any and all help is appreciated.
Try this viewport, it works great on my website:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Found it. I had put width:100%; and padding:0 10px; on the .wrapper element under #media only screen and (max-width: 600px). Changed it to width:96% and padding: 0 2%;, and it worked like a charm.
Thanks for the help!
See if you are using 100vh in your CSS anywhere. If you are using 100vh it counts the menu bar and bottom toolbar as part of the 100vh. See https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html
Try to add width:100%; overflow:hidden; to both body and html elements. If your page load differently, its definitely a css issue.
I read a lot of articles about how build a web site for iphone, all people have more and less the same technique for optimization a website for iphone.
I follow the suggestions, I use the difference css file (iphone.css - i just need the optimization for iphone not all phone) and I tried with a IE conditional and without. I tried also a inline css, inside a common style.css. And finally i also add a meta tag with scalation...but nothing! The iPhone doesn't want read my rules.
I don't have a iPhone i use iPhoney program (I also tried something else but they aren't very good) and sometimes I check form friends iPhone.
My problem is that my main menu that is long like all the page break and going down over the content. Just this. I just need to tell that the screen is more little (min-width-divide) but it doesn't work! And the css doesn't work (i tried to put #menu: display:none and the menu was still there). But the directory is right because if i see the site form my laptop i can see the css and can go inside!
The web site is built in wp, i don't know if it's important but it's so simple web site.
Make sure you target the iPhone with something like this:
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)"
href="mobile.css">
<!--<![endif]-->
Old trick with window.scrollTo(0,1); doesn't work. And even worse, the address bar moves only a bit and gets stuck halfway out sometimes.
It is a combination of many things as I have found when researching this issue for myself.
Here's the code that properly works on iOS5:
(I know I'm a little late, but an answer is an answer, hopefully it can help people in the future)
<!DOCTYPE html>
<html>
<head>
<title>Hide Address Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
</script>
<style>
body { min-height: 480px; }
</style>
</head>
<body>
<h1>Content</h1>
</body>
</html>
Source: http://24ways.org/2011/raising-the-bar-on-mobile
Example: http://jsbin.com/isenax/
i guess the code should still work..
anyways here is the correct way to tell mobile safari that you want the full screen:
click me
e.g. use
<meta name="apple-mobile-web-app-capable" content="yes" />
EDIT
Apple uses a new mobile-ui property to display a minimal UI in safari:
A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
use it like this:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
source: https://www.perpetual-beta.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html
Since IOS7 the window.scrollTo trick doesn't work anymore. There is no work around for the moment except to invite the user to add your website to Home Screen.
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
Is it possible to hide the address bar in iOS 7 Safari?
Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
On iOS 7 you can use the minimal-ui meta tag. Unfortunately, that was removed in iOS 8.
For iOS 8 there's a project called brim that is supposed to bring back the minimal-ui type functionality. It can be found here: https://github.com/gajus/brim