From 13747c62fd9575ac1ed764c3dc33d34459321840 Mon Sep 17 00:00:00 2001 From: Jan-Philipp Litza Date: Thu, 27 Dec 2012 22:46:41 +0100 Subject: more CSS an JS voodoo for bugblues table view --- includes/pages/user_shifts.php | 31 ++++++++++++++++++------------- public/css/base.css | 29 +++++++++++++++++++++++++---- public/css/scrolltable.js | 26 ++++++++++++++++++++++++++ templates/layout.html | 1 + templates/user_shifts.html | 3 ++- 5 files changed, 72 insertions(+), 18 deletions(-) create mode 100644 public/css/scrolltable.js diff --git a/includes/pages/user_shifts.php b/includes/pages/user_shifts.php index 7eaf8140..9ed566f8 100644 --- a/includes/pages/user_shifts.php +++ b/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=""; + $shifts_table="
-
"; foreach($myrooms as $room) { $rid=$room["id"]; $colspan=1; @@ -390,7 +394,7 @@ function view_user_shifts() { $todo[$rid][$i]=$colspan; $shifts_table.="\n"; } - $shifts_table.=""; + $shifts_table.=""; 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 .= 'Weitere Helfer eintragen »'; } } - $color=""; - if($is_free) { - $color="style=\"background: #F6CECE\";"; - } else { - $color="style=\"background: #BCF5A9\";"; - } - $shifts_table.="'; + $shifts_table.=''; $todo[$rid][$i]--; } } $shifts_table.="\n"; } - $shifts_table.="
-".$room['name']."
"; + if ($is_free && in_array(0, $_SESSION['user_shifts']['filled'])) + $style='background-color: #F6CECE'; + elseif (!$is_free && in_array(1, $_SESSION['user_shifts']['filled'])) + $style='background-color: #BCF5A9'; + else + $style='border: 0'; + $shifts_table.=""; 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.='
"; + $shifts_table.=''; // 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")) . '1'), 'filled_select' => make_select($filled, $_SESSION['user_shifts']['filled'], "filled", ucfirst(Get_Text("occupancy"))), 'task_notice' => '1' . Get_Text("pub_schichtplan_tasks_notice"), + 'new_style_checkbox' => '', '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")), diff --git a/public/css/base.css b/public/css/base.css index 3e2d8520..b6e75ac1 100644 --- a/public/css/base.css +++ b/public/css/base.css @@ -4,10 +4,8 @@ } body { - font-family: Arial; - sans-serif; - font-size: - 14px; + font-family: Arial, sans-serif; + 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 { diff --git a/public/css/scrolltable.js b/public/css/scrolltable.js new file mode 100644 index 00000000..1184207f --- /dev/null +++ b/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'; + } +} diff --git a/templates/layout.html b/templates/layout.html index f6d19c6f..f47d3693 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -12,6 +12,7 @@ + %atom_link% diff --git a/templates/user_shifts.html b/templates/user_shifts.html index e25c5862..927f3cca 100644 --- a/templates/user_shifts.html +++ b/templates/user_shifts.html @@ -1,4 +1,4 @@ -
+
Filter %room_select% @@ -6,6 +6,7 @@ %day_select% %filled_select%
%task_notice%
+
%new_style_checkbox%
-- cgit v1.2.3-54-g00ecf