Adjust cursor for calendar items

[infodrom.org/service.infodrom.org] / src / Infodrom / calendar / index.wml

diff --git a/src/Infodrom/calendar/index.wml b/src/Infodrom/calendar/index.wml
index ceb4b41..e23f4d2 100644 (file)
--- a/src/Infodrom/calendar/index.wml
+++ b/src/Infodrom/calendar/index.wml
@@ -2,15 +2,28 @@
 
 <future>
 <page func="Infodrom Oldenburg" title="Termine">
+<script type="text/javascript" src="<root_prefix>jquery.editable.js"></script>
 
 <style type="text/css">
+@media only screen and (max-device-width: 400px) {
+    div.view {
+       margin-left: 100px;
+    }
+}
+
+@media only screen and (max-device-width: 980px) {
+     button {
+        width: 3em;
+    }
+}
+
 div.view {
     float:right;
     margin-top:-30px;
 }
 div.clear {
     clear: both;
-    margin-bottom: 10px;
+    margin-bottom: 3px;
 }
 table#calendar tr.row:hover {
     background: yellow;
@@ -28,32 +41,36 @@ div.bimonth div.monthcolumn {
     float: left;
     width: 50%;
 }
-div.bimonth div.head {
+div.onemonth div.monthcolumn {
+    float: left;
+    width: 100%;
+}
+div.head {
     font-weight: bold;
     border-bottom: 1px solid #ccc;
     text-align: center;
 }
-div.bimonth div.day {
+div.day {
     position: relative;
     border-bottom: 1px solid #ccc;
 }
-div.bimonth div.sunday {
+div.sunday {
     border-bottom: 1px solid black;
 }
-div.bimonth div.today {
+div.today {
     background: #90ee90;
 }
-div.bimonth div div.wday {
+div div.wday {
     width: 1.6em;
     margin-right: 2px;
     float: left;
 }
-div.bimonth div div.date {
+div div.date {
     width: 1.6em;
     margin-right: 2px;
     float: left;
 }
-div.bimonth div.kw {
+div.kw {
     position: absolute;
     top: 0px;
     right: 1px;
@@ -77,6 +94,7 @@ div.month table tbody td span {
 div#termine span {
     padding-left: 1px;
     padding-right: 1px;
+    cursor: default;
 }
 
 span.menu_title {
@@ -106,20 +124,35 @@ span.menu:hover {
 div.popup_body div#log div.caltitle {
     border-top: 0px !important;
 }
-div.popup_body div#log div {
+div.logl {
+    float: left;
+    width: 120px;
+}
+div.logr {
+    float: left;
+}
+div.popup_body div#log div.row0,
+div.popup_body div#log div.row1 {
     margin: 0;
     padding: 0;
     font-size: 90%;
     border-top: 1px solid #ccc;
 }
-div.popup_body div#log div:hover
+div.popup_body div#log div.row0
 {
     background: #eee;
 }
 </style>
 
+<?php
+  $textbrowser = strpos($_SERVER['HTTP_USER_AGENT'], 'Lynx/') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'w3m/') !== false;
+?>
+
 <input type="hidden" id="thismonth">
 <div id="termine">
+<?php
+  if ($textbrowser || (isset($_GET['month']) && $_GET['month'] == 'normal')) {
+?>
 <table id="calendar" width="100%" class="smallfont border" cellspacing="0" summary="">
 <tr class="head">
 <th width="5%">KW</th>
@@ -149,6 +182,8 @@ div.popup_body div#log div:hover
     $newmonth = $start->format('F Y');
     if ($month != $newmonth) {
       $month = $newmonth;
+      if ($textbrowser)
+         printf('<tr><td colspan="4">&nbsp;</td></tr>');
       printf('<tr class="month" month="%s"><td colspan="4">%s</td></tr>',
             $start->format('Y-m'), $month);
       $kw = '';
@@ -178,6 +213,9 @@ div.popup_body div#log div:hover
 ?>
 
 </table>
+<?php
+  } // $textbrowser || month == 'monat'
+?>
 </div>
 <div class="clear"></div>
 
@@ -226,9 +264,11 @@ function menu_close()
 function dom_enhance()
 {
     var html = ['<div class="view">',
-               '<button id="prev" style="display:none;">&lt;&lt;</button>',
+               '<button id="prev" style="display:none;"><img src="'+site_url('pix/left.png')+'" /></button>',
+               '&nbsp;&nbsp;',
+               '<button id="sync" style="display:none;"><img src="'+site_url('pix/sync.png')+'" /></button>',
                '&nbsp;&nbsp;',
-               '<button id="next" style="display:none;">&gt;&gt;</button>',
+               '<button id="next" style="display:none;"><img src="'+site_url('pix/right.png')+'" /></button>',
                '&nbsp;&nbsp;',
                '<select id="month" style="display:none;">',
                '<option value="">jetzt</option>',
@@ -237,6 +277,7 @@ function dom_enhance()
                '<select id="view">',
                '<option value="normal">Normal</option>',
                '<option value="bimonth">2 Monate</option>',
+               '<option value="onemonth">1 Monat</option>',
                '<option value="month">Monat</option>',
                '</select>',
                '</div>'];
@@ -251,13 +292,16 @@ function show_log()
     menu_close()
 
     if (!logwindow) {
-       logwindow = new Popup('Protocol', '500px', false, '<div id="log"></div>');
+       logwindow = new Popup('Protocol', '460px', false, '<div id="log"></div>');
        logwindow.centerPopup();
     } else {
        logwindow.openPopup();
     }
 
-    $.invoke('Calendar_Item/Log', {id: $('div#menu').attr('dav_id')});
+    $.invoke('Calendar_Item/Log', {id: $('div#menu').attr('dav_id')}, function(data){
+       if (!is_mobile())
+           make_editable('div#log div.editable');
+    });
 }
 
 var commentwindow = false;
@@ -326,6 +370,10 @@ function month_actions(data)
        $('div#menu').positionOn($(this), 'center').show();
        return false;
     });
+    $('#termine span').click(function(e){
+       $('div#menu').attr('dav_id', $(this).attr('dav_id'));
+       show_log();
+    });
 
     $('select#month').val($('#thismonth').val());
 }
@@ -339,6 +387,9 @@ $(function(){
        } else if ($('#view').val() == 'bimonth') {
            $('#month,div.view button').show();
            $.invoke('Calendar/BiMonth', {month: $('#thismonth').val()}, month_actions);
+       } else if ($('#view').val() == 'onemonth') {
+           $('#month,div.view button').show();
+           $.invoke('Calendar/OneMonth', {month: $('#thismonth').val()}, month_actions);
        } else if ($('#view').val() == 'month') {
            $('#month,div.view button').show();
            $.invoke('Calendar/Month', {month: $('#thismonth').val()}, month_actions);
@@ -353,19 +404,33 @@ $(function(){
 
     });
     $('div.view button').click(function(e){
+       var direction = null
+       if ($(this).attr('id') != 'sync')
+           direction = $(this).attr('id') == 'prev' ? 'prev' : 'next';
        if ($('#view').val() == 'bimonth') {
            $.invoke('Calendar/BiMonth',
                     {month: $('#thismonth').val(),
-                     direction: $(this).attr('id') == 'prev' ? 'prev' : 'next'}, month_actions);
+                     direction: direction}, month_actions);
+       } else if ($('#view').val() == 'onemonth') {
+           $.invoke('Calendar/OneMonth',
+                    {month: $('#thismonth').val(),
+                     direction: direction}, month_actions);
        } else if ($('#view').val() == 'month') {
            $.invoke('Calendar/Month',
                     {month: $('#thismonth').val(),
-                     direction: $(this).attr('id') == 'prev' ? 'prev' : 'next'}, month_actions);
+                     direction: direction}, month_actions);
        }
     });
     if (document.location.href.indexOf('month=normal') == -1) {
-       $('#view').val('bimonth');
-       $.invoke('Calendar/BiMonth', {month: '<?=date('Y-m')?>'}, month_actions);
+        if (is_mobile()) {
+           $('<meta name="viewport" content="width=device-width, initial-scale=0.75" />').insertAfter('title');
+           $('#view').val('onemonth');
+           $.invoke('Calendar/OneMonth', {month: '<?=date('Y-m')?>'}, month_actions);
+           $('select#view').hide();
+       } else {
+           $('#view').val('bimonth');
+           $.invoke('Calendar/BiMonth', {month: '<?=date('Y-m')?>'}, month_actions);
+       }
     }
     $('#month,div.view button').show();
 });