Add mobile specific css, which still needs to be updated.
authorMichael J. Rubinsky <mrubinsk@horde.org>
Sun, 14 Nov 2010 19:02:56 +0000 (14:02 -0500)
committerMichael J. Rubinsky <mrubinsk@horde.org>
Sun, 14 Nov 2010 19:02:56 +0000 (14:02 -0500)
Also, add event changes that were missing from commit ad4432df85306a715da38a69f22f98b3c4917618.

kronolith/js/kronolithmobile.js
kronolith/mobile.php
kronolith/themes/mobile.css [new file with mode: 0644]

index 2dc59cb..7263ec0 100644 (file)
@@ -236,6 +236,14 @@ $(function() {
     KronolithMobile.currentDate = new Date();
     $('body').bind('swipeleft', KronolithMobile.showNextDay);
     $('body').bind('swiperight', KronolithMobile.showPrevDay);
+    $('#dayview').bind('pageshow', function(event, ui) {
+        $('body').bind('swipeleft', KronolithMobile.showNextDay);
+        $('body').bind('swiperight', KronolithMobile.showPrevDay);
+    });
+    $('#dayview').bind('pagebeforehide', function(event, ui) {
+        $('body').unbind('swipeleft', KronolithMobile.showNextDay);
+        $('body').unbind('swiperight', KronolithMobile.showPrevDay);
+    });
     $('#prevDay').bind('click', KronolithMobile.showPrevDay);
     $('#nextDay').bind('click', KronolithMobile.showNextDay);
 
@@ -245,14 +253,23 @@ $(function() {
                              KronolithMobile.listEventsCallback
     );
 
-    // Test the month building
+    // Set up the month view
+    // Build the first month, should due this on first page show, but the
+    // pagecreate event doesn't seem to fire for the internal page? Not sure how
+    // else to do it, so just build the first month outright.
     var date = KronolithMobile.currentDate;
     KronolithMobile.buildCal(date);
-
     $('#kronolithMinicalPrev').bind('click', KronolithMobile.showPrevMonth);
     $('#kronolithMinicalNext').bind('click', KronolithMobile.showNextMonth);
-    $('#monthcontent').bind('swipeleft', KronolithMobile.showNextMonth);
-    $('#monthcontent').bind('swiperight', KronolithMobile.showPrevMonth);
+
+    $('#monthview').bind('pageshow', function(event, ui) {
+        $('body').bind('swipeleft', KronolithMobile.showNextMonth);
+        $('body').bind('swiperight', KronolithMobile.showPrevMonth);
+    });
+    $('#monthview').bind('pagebeforehide', function(event, ui) {
+        $('body').unbind('swipeleft', KronolithMobile.showNextMonth);
+        $('body').unbind('swiperight', KronolithMobile.showPrevMonth);
+    });
 });
 
 // Some Date extensions from horde.js that can't be included because of it's
index de82e40..f7e3666 100644 (file)
@@ -30,7 +30,7 @@ $today = new Horde_Date($_SERVER['REQUEST_TIME']);
   <script type="text/javascript" src="<?php echo $registry->get('jsuri', 'horde') ?>/date/en-US.js"></script>
   <script type="text/javascript" src="<?php echo $registry->get('jsuri', 'horde') ?>/date/date.js"></script>
   <script type="text/javascript" src="<?php echo $registry->get('jsuri', 'kronolith') ?>/kronolithmobile.js"></script>
-  <link href="/horde/kronolith/themes/screen.css" rel="stylesheet" type="text/css" />
+  <link href="<?php echo $registry->get('themesuri');?>/mobile.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 
@@ -40,9 +40,10 @@ $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="#" data-icon="arrow-l" data-iconpos="notext" id="prevDay"><?php echo _("Previous")?></a><span id="todayheader"></span><a href="#" data-icon="arrow-r" data-iconpos="notext" id="nextDay"><?php echo _("Next")?></a></div>
+   <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>
-  <div data-role="content" class="ui-body" id="daycontent"></div>
   <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
     <ul>
@@ -78,7 +79,11 @@ $today = new Horde_Date($_SERVER['REQUEST_TIME']);
 
 <!-- Month View -->
 <div data-role="page" id="monthview" class="monthview">
- <div data-role="header"><h1>Month</h1></div>
+ <div data-role="header">
+   <h1>Month</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>
  <div data-role="content" class="ui-body" id="monthcontent">
   <div id="kronolithMinical" class="kronolithMinical">
     <table>
diff --git a/kronolith/themes/mobile.css b/kronolith/themes/mobile.css
new file mode 100644 (file)
index 0000000..a87955d
--- /dev/null
@@ -0,0 +1,87 @@
+
+.kronolithEventTentative {
+    font-style: italic;
+}
+.kronolithEventCancelled {
+    text-decoration: line-through;
+}
+.event-time, .event-location {
+    font-size: 85%;
+}
+.weekend {
+    background: #ffc;
+}
+.description {
+    padding: .5em;
+}
+
+/* Mini calendar */
+.kronolithMinical {
+    position: relative;
+}
+#kronolithMinical {
+/*    top: 15px;*/
+}
+.kronolithMinical table {
+    width: 100%;
+    border-spacing: 1px;
+}
+.kronolithMinical caption, #kronolithBody .kronolithMinical caption {
+    position: relative;
+    margin: 0 1px 1px 1px;
+    height: 20px;
+    line-height: 20px;
+    font-weight: bold;
+    font-size: 100%;
+    border-bottom: 1px #999 dotted;
+    text-align: left;
+}
+.kronolithMinical caption span {
+    overflow: hidden;
+    white-space: nowrap;
+    cursor: pointer;
+}
+#kronolithMinicalPrev, #kronolithMinicalNext {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 16px;
+    text-indent: -10000px;
+    cursor: pointer;
+    background: transparent url("graphics/right.png") no-repeat right center;
+}
+#kronolithMinicalPrev {
+    background-image: url("graphics/left.png");
+    right: 15px;
+}
+
+.kronolithMinical th, .kronolithMinical td {
+    font-size: 90%;
+}
+.kronolithMinical th, .kronolithMinical td.kronolithMinicalWeek {
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    text-align: center;
+    background-color: #d6d6d6;
+    color: #202020;
+    border: 1px #999 solid !important;
+}
+.kronolithMinical tbody td {
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    border: 1px #999 solid;
+    text-align: center;
+    color: #808080;
+    empty-cells: show;
+    cursor: pointer;
+}
+.kronolithMinical .kronolithMinicalEmpty {
+    background: none;
+    border-color: #e2e2e2;
+    color: silver;
+}
+.kronolithMinical .kronolithSelected {
+    background-color: #ffc;
+}