Use class and data-role selectors, and get rid of unnecessary dom ids.

Also, move some in-line styles to appropriate class definitions

diff --git a/kronolith/js/kronolithmobile.js b/kronolith/js/kronolithmobile.js
index 7263ec0..5537fed 100644 (file)
--- a/kronolith/js/kronolithmobile.js
+++ b/kronolith/js/kronolithmobile.js
@@ -18,8 +18,8 @@
     listEventsCallback: function(data)
     {
         data = data.response;
-        $("#daycontent ul").detach();
-        $("#todayheader").html(KronolithMobile.currentDate.toString(Kronolith.conf.date_format));
+        $("#dayview [data-role=content] ul").detach();
+        $(".kronolithDayDate").html(KronolithMobile.currentDate.toString(Kronolith.conf.date_format));
 
         var list = $('<ul>').attr({'data-role': 'listview'});
         var type = data.cal.split('|')[0], cal = data.cal.split('|')[1];
@@ -45,7 +45,7 @@
             list.append($('<li>').append(Kronolith.text.noevents));
         }
         list.listview();
-        $("#daycontent").append(list);
+        $("#dayview [data-role=content]").append(list);
     },
 
     loadEvent: function(cal, id, d)
@@ -58,7 +58,7 @@
 
     loadEventCallback: function(data)
     {
-         $('#eventcontent ul').detach();
+         $('#eventview [data-role=content] ul').detach();
          var event = data.response.event;
          var list = $('<ul>').attr({'data-role': 'listview', 'data-inset': true});
 
@@ -84,7 +84,7 @@
          text = event.d;
          list.append($('<li>').append(text));
          list.listview();
-         $('#eventcontent').append(list);
+         $('#eventview [data-role=content]').append(list);
     },
 
     showNextDay: function()

diff --git a/kronolith/mobile.php b/kronolith/mobile.php
index f7e3666..1b70093 100644 (file)
--- a/kronolith/mobile.php
+++ b/kronolith/mobile.php
@@ -40,10 +40,9 @@ $today = new Horde_Date($_SERVER['REQUEST_TIME']);
    <h1>My Calendar:Day</h1>
    <a class="ui-btn-left" href="<?php echo Horde::getServiceLink('portal', 'horde')?>"><?php echo _("Home")?></a>
    <a rel="external" class="ui-btn-right" href="<?php echo Horde::getServiceLink('logout', 'horde')?>"><?php echo _("Logout")?></a>
-   <div class="ui-bar-b" style="width:100%;text-align:center;"><a href="#" style="vertical-align: middle;" data-icon="arrow-l" data-iconpos="notext" id="prevDay"><?php echo _("Previous")?></a><span id="todayheader"></span><a href="#" style="vertical-align: middle;" data-icon="arrow-r" data-iconpos="notext" id="nextDay"><?php echo _("Next")?></a></div>
-  </div>
-  <div data-role="content" id="daycontent">
+   <div class="ui-bar-b kronolithDayHeader"><a href="#" class="kronolithPrevDay" data-icon="arrow-l" data-iconpos="notext"><?php echo _("Previous")?></a><span class="kronolithDayDate"></span><a href="#" data-icon="arrow-r" data-iconpos="notext" id="nextDay"><?php echo _("Next")?></a></div>
   </div>
+  <div data-role="content"></div>
   <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
     <ul>
@@ -58,7 +57,7 @@ $today = new Horde_Date($_SERVER['REQUEST_TIME']);
 <!-- Single Event -->
 <div data-role="page" id="eventview">
   <div data-role="header" data-theme="b"><h1>Event</h1></div>
-  <div data-role="content" class="ui-body" id="eventcontent"></div>
+  <div data-role="content" class="ui-body"></div>
   <div data-role="footer"></div>
 </div>
 

diff --git a/kronolith/themes/mobile.css b/kronolith/themes/mobile.css
index a87955d..dc8fd62 100644 (file)
--- a/kronolith/themes/mobile.css
+++ b/kronolith/themes/mobile.css
@@ -15,6 +15,20 @@
     padding: .5em;
 }
 
+/* Header container for day view */
+.kronolithDayHeader {
+    width: 100%;
+    text-align: center;
+}
+.kronolithDayHeader a {
+    vertical-align: middle;
+}
+.kronolithDayDate {
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+
 /* Mini calendar */
 .kronolithMinical {
     position: relative;