more CSS an JS voodoo for bugblues table view

includes/pages/user_shifts.php

@@ -324,6 +324,11 @@ function view_user_shifts() {
       $_SESSION['user_shifts'][$key] = array_map('get_ids_from_array', $$key);
   }
 
+  if (!isset($_REQUEST['new_style']))
+    $_SESSION['user_shifts']['new_style'] = false;
+  else
+    $_SESSION['user_shifts']['new_style'] = true;
+
   if (isset ($_REQUEST['days'])) {
     $filtered = array_filter($_REQUEST['days'], create_function('$a', 'return preg_match("/^\d\d\d\d-\d\d-\d\d\\$/", $a);'));
     if (!empty ($filtered))
@@ -343,7 +348,6 @@ function view_user_shifts() {
       ORDER BY `start`");
 
   $shifts_table = "";
-  $row_count = 0;
   //qqqq
   /*
   [0] => Array
@@ -358,7 +362,7 @@ function view_user_shifts() {
       [room_name] => test1
   )
   */
-  if(count($_SESSION['user_shifts']['days'])==1) {
+  if(count($_SESSION['user_shifts']['days'])==1 && $_SESSION['user_shifts']['new_style']) {
     $myrooms=$rooms;
     foreach($myrooms as $k => $v) {
       if(array_search($v["id"],$_SESSION['user_shifts']['rooms'])===FALSE)
@@ -380,7 +384,7 @@ function view_user_shifts() {
         }
       }
     }
-    $shifts_table="<table><tr><th>-</th>";
+    $shifts_table="<table id=\"shifts\" style=\"background-color: #fff\"><colgroup><col><col span=\"100\"></colgroup><thead><tr><th>-</th>";
     foreach($myrooms as $room) {
       $rid=$room["id"];
       $colspan=1;
@@ -390,7 +394,7 @@ function view_user_shifts() {
         $todo[$rid][$i]=$colspan;
       $shifts_table.="<th colspan=\"$colspan\">".$room['name']."</th>\n";
     }
-    $shifts_table.="</tr>";
+    $shifts_table.="</tr></thead><tbody>";
     for($i=0;$i<24*4;$i++) {
       $thistime=$first+($i*15*60);
       if($thistime%(60*60)==0) {
@@ -486,13 +490,13 @@ function view_user_shifts() {
                   $shifts_row .= '<a href="' . page_link_to('user_shifts') . '&shift_id=' . $shift['SID'] . '&type_id=' . $angeltype['id'] . '">Weitere Helfer eintragen &raquo;</a>';
                 }
               }
-              $color="";
+              if ($is_free && in_array(0, $_SESSION['user_shifts']['filled']))
-              if($is_free) {
+                $style='background-color: #F6CECE';
-                $color="style=\"background: #F6CECE\";";
+              elseif (!$is_free && in_array(1, $_SESSION['user_shifts']['filled']))
-              } else {
+                $style='background-color: #BCF5A9';
-                $color="style=\"background: #BCF5A9\";";
+              else
-              }
+                $style='border: 0';
-              $shifts_table.="<td rowspan=$blocks $color>";
+              $shifts_table.="<td rowspan=$blocks style=\"$style\">";
               if (($is_free && in_array(0, $_SESSION['user_shifts']['filled'])) || (!$is_free && in_array(1, $_SESSION['user_shifts']['filled']))) {
                 $shifts_table.=$shifts_row;
               }
@@ -504,13 +508,13 @@ function view_user_shifts() {
           }
         }
         while($todo[$rid][$i]) {
-          $shifts_table.='<td style="border: 1px"></td>';
+          $shifts_table.='<td style="border: 0"></td>';
           $todo[$rid][$i]--;
         }
       }
       $shifts_table.="</tr>\n";
     }
-    $shifts_table.="</table>";
+    $shifts_table.='</tbody></table><script type="text/javascript">scrolltable(document.getElementById("shifts"))</script>';
     // qqq
   } else {
     $shifts_table = array();
@@ -623,6 +627,7 @@ function view_user_shifts() {
     'type_select' => make_select($types, $_SESSION['user_shifts']['types'], "types", ucfirst(Get_Text("tasks")) . '<sup>1</sup>'),
     'filled_select' => make_select($filled, $_SESSION['user_shifts']['filled'], "filled", ucfirst(Get_Text("occupancy"))),
     'task_notice' => '<sup>1</sup>' . Get_Text("pub_schichtplan_tasks_notice"),
+    'new_style_checkbox' => '<label><input type="checkbox" name="new_style" value="1" ' . ($_SESSION['user_shifts']['new_style']? ' checked' : '') . '> Use new style if possible</label>',
     'shifts_table' => $shifts_table,
     'ical_text' => sprintf(Get_Text('inc_schicht_ical_text'), make_user_shifts_ical_link($user['ical_key']), page_link_to('user_myshifts') . '&reset'),
     'filter' => ucfirst(Get_Text("to_filter")),

public/css/base.css

@@ -4,10 +4,8 @@
 }
 
 body {
-    font-family: Arial;
+    font-family: Arial, sans-serif;
-    sans-serif;
+    font-size: 14px;
-    font-size:
-    14px;
 }
 
 header {
@@ -107,6 +105,29 @@ a.sprache img {
 table {
     border-collapse: collapse;
 	margin-top: 5px;
+	display: block;
+}
+
+table.scrollable {
+	max-width: 100%;
+	overflow-x: scroll;
+	overflow-y: hidden;
+}
+
+table.scrollable thead tr {
+	display: block;
+	position: relative;
+}
+
+table.scrollable tbody {
+	display: block;
+	position: relative;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+table.scrollable tbody * {
+	width: auto;
 }
 
 fieldset hr {

public/css/scrolltable.js

@@ -0,0 +1,26 @@
+function scrolltable(elem) {
+	var widths = new Array();
+	var thead = elem.getElementsByTagName('thead')[0];
+	var tbody = elem.getElementsByTagName('tbody')[0];
+	var ths = Array.prototype.slice.call(thead.getElementsByTagName('th'),0);
+	ths = ths.concat(Array.prototype.slice.call(tbody.getElementsByTagName('tr')[0].getElementsByTagName('td'), 0));
+	ths.push(tbody.getElementsByTagName('th')[0]);
+	console.debug(ths);
+	for(var i = 0; i < ths.length; i++)
+		widths.push(ths[i].offsetWidth);
+	widths.push(tbody.offsetWidth);
+	elem.className = elem.className + ' scrollable';
+	var tbodywidth = widths.pop();
+	tbody.style.width = (tbodywidth + 16) + 'px';
+	tbody.style.height = (window.innerHeight - 50) + 'px';
+	for(var i = 0; i < ths.length; i++) {
+		var paddingLeft = parseInt(window.getComputedStyle(ths[i], null).getPropertyValue('padding-left'));
+		var paddingRight = parseInt(window.getComputedStyle(ths[i], null).getPropertyValue('padding-right'));
+		var borderLeft = parseInt(window.getComputedStyle(ths[i], null).getPropertyValue('border-left-width'));
+		var borderRight = parseInt(window.getComputedStyle(ths[i], null).getPropertyValue('border-right-width'));
+		var targetwidth = widths.shift();
+		ths[i].style.maxWidth = ths[i].style.minWidth = (targetwidth - paddingLeft - paddingRight - borderRight) + 'px';
+		if (ths[i].offsetWidth > targetwidth)
+			ths[i].style.maxWidth = ths[i].style.minWidth = (parseInt(ths[i].style.minWidth) - 1) + 'px';
+	}
+}

templates/layout.html

@@ -12,6 +12,7 @@
         <meta name="revisit-after" content="1 days" />
         <script type="text/javascript" src="css/grossbild.js"></script>
         <script type="text/javascript" src="css/forms.js"></script>
+        <script type="text/javascript" src="css/scrolltable.js"></script>
         <link rel="stylesheet" type="text/css" href="css/base.css" />
         <link rel="stylesheet" type="text/css" href="css/style%theme%.css" />
         %atom_link%

templates/user_shifts.html

@@ -1,4 +1,4 @@
-<form action="" type="get">
+<form action="#shifts" type="get">
 <fieldset class="form" id="filter"><legend>Filter</legend>
 <input type="hidden" name="p" value="user_shifts">
 %room_select%
@@ -6,6 +6,7 @@
 %day_select%
 %filled_select%
 <div>%task_notice%</div>
+<div>%new_style_checkbox%</div>
 <input class="button" type="submit" style="width: 100%;" value="%filter%">
 </fieldset>
 </form>