Add a iphone.css file to drupal.org
cssdrupaliPhoneplanetdrupalthemesDevelopment
The drupal.org web site, nice as it is after the redesign, is not a pleasure to access on a mobile device like the iPhone. In issue #951114: Mobile phone support (iPhone / Android) there are some discussions and suggestions how to improve this. My contribution is a iphone.css file for drupal.org, see below or in the issue.
I have two simple goals for mobile devices:
- Avoid the need to zoom in and scroll sideways, making the text readable directly.
- Make the navigation and the search function touch friendly with larger buttons/fields and more spacing.
In the screenshots you can see the result of this first ruff draft for an iphone.css file for d.o. With a few lines of CSS we have made drupal.org a lot nicer to use with an iPhone.
If you are interested in helping out please go to the issue, try out and help improve the iphone.css file. There is a lot more that can be done!
P.S. Notice the apparent low quality look of the Drupal logo in the screenshot? A high quality version for high pixel density displays like the one on iPhone 4 would be neat.
Code in page.tpl.php to add the iphone.css file and set the viewport:
<!-- Start iPhone stuff --><br><link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="http://drupal.org/sites/all/themes/bluecheese/iphone.css" /><br><meta name="viewport" content="width=device-width" /><br><!-- End iPhone stuff -->
The iphone.css file:
#page-inner,<br>#footer {<br> margin: 0 10px;<br>}<br>#header {<br> background-position: 0 0;<br>}<br>#header,<br>body.drupalorg-front #header,<br>#footer,<br>#page {<br> min-width: 0;<br> height: auto;<br>}<br>#header-right-inner {<br> margin-top: 5px;<br>}<br>#header-content,<br>body.drupalorg-front #header-content,<br>#nav-masthead,<br>#site-name {<br> padding-left: 5px;<br> height: auto;<br>}<br>#userinfo {<br> margin: 0 0 10px 0;;<br>}<br>#footer {<br> padding: 10px;<br>}<br><br>#edit-search-theme-form-1,<br>#search-theme-form,<br>#search-theme-form-advanced,<br>#nav-header,<br>#nav-header ul,<br>#nav-header ul li,<br>#nav-masthead ul li,<br>#nav-masthead ul li a,<br>#userinfo {<br> float: none;<br> font-size: 1em;<br>}<br>#nav-header ul {<br> padding: 5px;<br>}<br>#nav-masthead ul {<br> padding: 15px 0;<br>}<br>#nav-header ul li,<br>#nav-masthead ul li,<br>#nav-masthead ul li a {<br> display: inline;<br>}<br>#nav-masthead ul li {<br> background: transparent;<br> padding: 0;<br>}<br>#nav-masthead ul li a,<br>#userinfo a {<br> background: #006caf;<br> padding: 5px;<br>}<br><br>#nav-masthead,<br>#homebox.column-count-3 .homebox-column-wrapper,<br>.container-12,<br>.grid-1,<br>.grid-2,<br>.grid-3,<br>.grid-4,<br>.grid-5,<br>.grid-6,<br>.grid-7,<br>.grid-8,<br>.grid-9,<br>.grid-10,<br>.grid-11,<br>.grid-12,<br>.grid-footer {<br> position: static;<br> display: block;<br> float: none;<br> margin: 0;<br> width: auto;<br>}<br><br>.content {<br> word-wrap: break-word;<br>}<br><br>div.codeblock,<br>.node pre,<br>.node code {<br> overflow: auto;<br>}<br><br>/* Search page */<br>.page-search #page-inner {<br> position: relative;<br>}<br>.page-search #column-left #content-top-region {<br> height: 11em;<br>}<br>#block-drupalorg_search-meta_type {<br> position: absolute;<br> top: 7em;<br> left: 0;<br>}<br><br>#header-left-inner h2,<br>#header-left-inner .standfirst,<br>#search-theme-form-submit,<br>html.js #search-theme-form-advanced,<br>#search-theme-form-advanced,<br>#front-top-middle,<br>#front-middle,<br>#front-bottom-left {<br> display: none;<br>}