CanHasTagsNow

The phone app has reached a point where it has the minimum required functionality. A user can now take measurements, add custom defined tags to them, and upload everything to the server for storage.

It also has an entirely new look and feel. If you compare the following screenshot with the version from last week you should notice some differences:

The app now has three pages, which can be navigated by swiping left and right. The first page allows you to take a measurement: simply drag the slider to the desired level, then hit the log button. The second page lets you select tags and define new ones. And the final page is used for uploading everything to the server.

As you know I'm building this with Phonegap, which means all of the above is nothing more than HTML, CSS and Javascript. You might expect —at least I did— that setting up such a layout would require quite a bit of scripting, but actually it is mostly based on CSS3's multi-column layouts.

Here's the trick: set the column-count to 'auto' and define the height of your element to be 100%. This will create columns which take up the height of the viewport. Then use a small bit of Javascript to set the column width to the width of the viewport (ideally you'd use viewport relative lengths instead, but this does not work on the phone) and now you have split up your content into screen-sized pages. With a little help of Hammer (the Javascript library, not the artist) you can then capture swipe actions and offset the element to show the right page.

(Figuring out the offset was a bit tricky. Given that visually you're getting a horizontal layout of elements you might think that you can just query the width of each element, divide that by the width of the viewport, and you'd end up with the correct number of pages. You'd be wrong. What I found was that the width actually stays constant and it's the height of the elements which changes. So you have to divide the element's height by the height of the viewport to deduce the right page count. Weird.)

The bigger struggle was the taglist. As the number of tags can grow over time so can the length of this section. My initial thought was to just let it grow in length. The pagination trick would just split up the content accordingly and I could still swipe through pages of tags. I gave this a try, and it worked as advertised, but it didn't look right and it didn't feel right. The reason it didn't look right is that browsers still are very bad at dealing with breaks in content. The reason it didn't feel right is that the distance to the upload functionality was now variable, which makes for a bad user experience. So instead I opted to limit the tag list to one visible page with its own vertically scrolling element inside.

And that was about it. The rest was figuring out the more detailed CSS stylings and getting the interactions in place. I'm still going to be playing around with the overall style, as I'm not sold on it yet. And I need to clean up and sanitize the scripting. But all in all it's in a usable state, and I'm pretty happy with what I've got.