The iPad, like the iPhone, has a fairly standard layout that app developers use as the base for their creation. The iPad has lovely screen real estate with its 1024x768 resolution and allows for a superb touch screen interaction in various formats. We're putting as many of these practices to use as possible in AdminPad.
5 Fun, Usable Themes
AdminPad will come with 5 themes. A standard iPad app theme, Notepad theme, Book theme, Chalkboard theme, and Dark theme. Here's some current screenshots of those:
Using CSS3 & Webkit To The Fullest
Since this template is optimized specifically for the iPad we have the freedom to use the best tools such as CSS3. All the gradients, rounded corners, drop shadows and text effects are pure CSS3 power, but that's not all. With each new template that we create using CSS3 techniques, we learn a few tricks. AdminPad will be the first Joomla! admin template to style certain hardcoded, inline elements in the Joomla! 1.5 admin.
Here's a couple of cool examples using CSS3 Selectors:
Replacing Email text links with an email icon. We wanted to save some width on the users page, so we yanked out the long email addresses and replaced with an email icon. Code sample:
a[href ^="mailto:"] {
font-size:9px;
text-indent:-9999px;
display:block;
background:url(../images/icons/email.png) no-repeat 50% 50%;
}
Similarly, on the Articles, Modules, Menus and Plugin pages we wanted to replace the typical Joomla! icons for publish, frontpage, etc, with larger icons that are easier to hit with your finger on the iPad. There's not ID or Class on these images so we couldn't do this before, but with CSS3 Selectors, we can find an image with a specific filename and use CSS to hide it and display a background image:
img[src $="filesave.png"] {
font-size:9px;
text-indent:-9999px;
display:block;
height:0px;
width:16px;
overflow:hidden;
padding-top:16px;
background:url(../images/icons/disk.png) no-repeat 0 0;
}
Which results in an article display like this:
Vertical VS Horizontal Display
iPad apps also change layout depending on if you're viewing them in Landscape or Portrait mode. Thanks to this tutorial we're able to load different stylesheets for each mode and change the appearance. Here's what the article page looks like in Portrait mode, in which we hide the sidebar:
Emulating iPad Popovers
On of the more useful iPad interface elements is the popover. In mobile Safari, select boxes take on the same appearance, so we're putting that to use in strategic positions such as:
History
Quick Add
Site Cofigurations
Login Background
Another cool trend in iPad apps is displaying the login over a faded site. We've implemented this in such as way that the active template theme will display in the background:
Login for theme1
Login for theme2
you get the idea :)
What's Left?
We're working on 3 more ideas that will make AdminPad even more usable.
1. Browser Template Select - a plugin that will allow you to choose which browser sees which template
2. BBcode editor - since the iPad and iPhone can't use Joomla's text editor(s) we're working on a simple editor that will work on these devices
3. Quick Article - an admin module that will allow you to quickly add an article from the Cpanel (and put the BBcode editor to use)
When's AdminPad Going To Be Available?
We'll have a release within the next three weeks, possible around the time of a certain expo for CMS's...
