shift page styling

includes/pages/user_shifts.php

@@ -467,7 +467,7 @@ function view_user_shifts() {
       $shifts[$k]['own'] = in_array($shift['SID'], array_keys($ownshifts));
     }
 
-    $shifts_table = '<table id="shifts" class="table scrollable"><thead><tr><th>-</th>';
+    $shifts_table = '<div class="shifts-table"><table id="shifts" class="table scrollable"><thead><tr><th>-</th>';
     foreach ($myrooms as $key => $room) {
       $rid = $room["id"];
       if (array_sum($block[$rid]) == 0) {
@@ -487,11 +487,16 @@ function view_user_shifts() {
     $shifts_table .= "</tr></thead><tbody>";
     for ($i = 0; $i < $maxshow; $i ++) {
       $thistime = $first + ($i * 15 * 60);
-      $shifts_table .= "<tr><th>";
-      if ($thistime % (24 * 60 * 60) == 23 * 60 * 60 && $endtime - $starttime > 24 * 60 * 60)
-        $shifts_table .= date('y-m-d<b\r>H:i', $thistime);
-      elseif ($thistime % (60 * 60) == 0)
+      if ($thistime % (24 * 60 * 60) == 23 * 60 * 60 && $endtime - $starttime > 24 * 60 * 60) {
+        $shifts_table .= "<tr class=\"row-day\"><th class=\"row-header\">";
+        $shifts_table .= date('y-m-d<b\r />H:i', $thistime);
+      }
+      elseif ($thistime % (60 * 60) == 0) {
+        $shifts_table .= "<tr class=\"row-hour\"><th>";
         $shifts_table .= date("H:i", $thistime);
+      } else {
+        $shifts_table .= "<tr><th>";
+      }
       $shifts_table .= "</th>";
       foreach ($myrooms as $room) {
         $rid = $room["id"];
@@ -628,7 +633,7 @@ function view_user_shifts() {
       }
       $shifts_table .= "</tr>\n";
     }
-    $shifts_table .= '</tbody></table><script type="text/javascript">document.getElementById("shifts").style.maxHeight = (window.innerHeight - 100) + "px";</script>';
+    $shifts_table .= '</tbody></table></div>';
     // qqq
   } else {
     $shifts_table = array();

public/css/theme0.css

@@ -6328,6 +6328,15 @@ a#shifts td.collides:hover {
 #shifts td.own {
   border: 1px solid #777777;
 }
+.shifts-table {
+  overflow-x: scroll;
+}
+.row-day {
+  border-top: 2px solid #777777;
+}
+.row-header {
+  min-width: 90px;
+}
 .space-top {
   margin-top: 15px;
 }

public/css/theme1.css

@@ -6351,6 +6351,15 @@ a#shifts td.collides:hover {
 #shifts td.own {
   border: 1px solid #888888;
 }
+.shifts-table {
+  overflow-x: scroll;
+}
+.row-day {
+  border-top: 2px solid #888888;
+}
+.row-header {
+  min-width: 90px;
+}
 .space-top {
   margin-top: 15px;
 }

public/css/theme2.css

@@ -6328,6 +6328,15 @@ a#shifts td.collides:hover {
 #shifts td.own {
   border: 1px solid #777777;
 }
+.shifts-table {
+  overflow-x: scroll;
+}
+.row-day {
+  border-top: 2px solid #777777;
+}
+.row-header {
+  min-width: 90px;
+}
 .space-top {
   margin-top: 15px;
 }

themes/base.less

@@ -30,6 +30,18 @@ body {
   }
 }
 
+.shifts-table {
+  overflow-x: scroll;
+}
+
+.row-day {
+  border-top: 2px solid @gray-light;
+}
+
+.row-header {
+  min-width: 90px;
+}
+
 .space-top {
   margin-top: 15px;
 }