summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJan-Philipp Litza <janphilipp@litza.de>2012-12-27 22:46:41 +0100
committerJan-Philipp Litza <janphilipp@litza.de>2012-12-27 22:46:41 +0100
commit13747c62fd9575ac1ed764c3dc33d34459321840 (patch)
tree73bccb46a2f4946d5a3fc3ac23acf5ecc197b45a
parenta0ec26126e6c1872239d5c1621272b5b6a3ba0df (diff)
more CSS an JS voodoo for bugblues table view
-rw-r--r--includes/pages/user_shifts.php31
-rw-r--r--public/css/base.css29
-rw-r--r--public/css/scrolltable.js26
-rw-r--r--templates/layout.html1
-rw-r--r--templates/user_shifts.html3
5 files changed, 72 insertions, 18 deletions
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="<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) {
- $color="style=\"background: #F6CECE\";";
- } else {
- $color="style=\"background: #BCF5A9\";";
- }
- $shifts_table.="<td rowspan=$blocks $color>";
+ 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.="<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")),
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 @@
<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%
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 @@
-<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>