OMG..lots of changes for sake of mobile login / user menu etc.

Feeling a bit sloppy right about now...oh well good enough

tailbone/static/css/login.css

@@ -19,13 +19,13 @@ div.field-wrapper {
 }
 
 div.field-wrapper label {
-    margin: 0px;
-    padding-top: 3px;
     text-align: right;
-    width: 100px;
+    width: auto;
 }
 
-div.field-wrapper input {
+div.field-wrapper div.field input[type="text"],
+div.field-wrapper div.field input[type="password"] {
+    margin-left: 1em;
     width: 150px;
 }
 

tailbone/static/css/mobile.css

@@ -0,0 +1,14 @@
+
+/****************************************
+ * Global styles for mobile templates
+ ****************************************/
+
+.replacement-header {
+    display: none;
+}
+
+/* used by login page */
+.error {
+    color: red;
+    margin-bottom: 1em;
+}

tailbone/static/js/tailbone.mobile.js

@@ -0,0 +1,39 @@
+
+/************************************************************
+ *
+ * tailbone.mobile.js
+ *
+ * Global logic for mobile app
+ *
+ ************************************************************/
+
+
+$(function() {
+
+    // must init header/footer toolbars since ours are "external"
+    $('[data-role="header"], [data-role="footer"]').toolbar({theme: 'a'});
+});
+
+
+$(document).on('pagecontainerchange', function(event, ui) {
+
+    // in some cases (i.e. when no user is logged in) we may want the (external)
+    // header toolbar button to change between pages.  here's how we do that.
+    // note however that we do this *always* even when not technically needed
+    var link = $('[data-role="header"] a');
+    var newlink = ui.toPage.find('.replacement-header a');
+    link.text(newlink.text());
+    link.attr('href', newlink.attr('href'));
+    link.removeClass('ui-icon-home ui-icon-user');
+    link.addClass(newlink.attr('class'));
+});
+
+
+$(document).on('pageshow', function() {
+
+    // on login page, auto-focus username
+    el = $('#username');
+    if (el.is(':visible')) {
+        el.focus();
+    }
+});