From 4cd806bf8cc60784a2c2c5a945c161a9ff4f0452 Mon Sep 17 00:00:00 2001 From: "Michael J. Rubinsky" Date: Sun, 14 Nov 2010 14:02:56 -0500 Subject: [PATCH] Add mobile specific css, which still needs to be updated. Also, add event changes that were missing from commit ad4432df85306a715da38a69f22f98b3c4917618. --- kronolith/js/kronolithmobile.js | 25 ++++++++++-- kronolith/mobile.php | 13 ++++-- kronolith/themes/mobile.css | 87 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 117 insertions(+), 8 deletions(-) create mode 100644 kronolith/themes/mobile.css diff --git a/kronolith/js/kronolithmobile.js b/kronolith/js/kronolithmobile.js index 2dc59cb6d..7263ec089 100644 --- a/kronolith/js/kronolithmobile.js +++ b/kronolith/js/kronolithmobile.js @@ -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 diff --git a/kronolith/mobile.php b/kronolith/mobile.php index de82e403f..f7e366649 100644 --- a/kronolith/mobile.php +++ b/kronolith/mobile.php @@ -30,7 +30,7 @@ $today = new Horde_Date($_SERVER['REQUEST_TIME']); - + @@ -40,9 +40,10 @@ $today = new Horde_Date($_SERVER['REQUEST_TIME']);

My Calendar:Day

-

+

+ +

-

-

Month

+

+

Month

+ + +

diff --git a/kronolith/themes/mobile.css b/kronolith/themes/mobile.css new file mode 100644 index 000000000..a87955d93 --- /dev/null +++ b/kronolith/themes/mobile.css @@ -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; +} -- 2.11.0