change shift table to html5

11 files changed, 431 insertions, 244 deletions

diff --git a/includes/engelsystem_provider.php b/includes/engelsystem_provider.php
index dbf7c54f..0f8aa425 100644
--- a/includes/engelsystem_provider.php
+++ b/includes/engelsystem_provider.php
@@ -29,6 +29,7 @@ require_once realpath(__DIR__ . '/../includes/view/AngelTypes_view.php');
 require_once realpath(__DIR__ . '/../includes/view/EventConfig_view.php');
 require_once realpath(__DIR__ . '/../includes/view/Questions_view.php');
 require_once realpath(__DIR__ . '/../includes/view/Rooms_view.php');
+require_once realpath(__DIR__ . '/../includes/view/ShiftCalendarLane.php');
 require_once realpath(__DIR__ . '/../includes/view/ShiftCalendarRenderer.php');
 require_once realpath(__DIR__ . '/../includes/view/ShiftsFilterRenderer.php');
 require_once realpath(__DIR__ . '/../includes/view/Shifts_view.php');
diff --git a/includes/model/NeededAngelTypes_model.php b/includes/model/NeededAngelTypes_model.php
index 47c9626f..48f8ed20 100644
--- a/includes/model/NeededAngelTypes_model.php
+++ b/includes/model/NeededAngelTypes_model.php
@@ -57,7 +57,7 @@ function NeededAngelTypes_delete_by_room($room_id) {
  */
 function NeededAngelTypes_by_shift($shiftId) {
   $needed_angeltypes_source = sql_select("
-        SELECT `NeededAngelTypes`.*, `AngelTypes`.`name`, `AngelTypes`.`restricted`
+        SELECT `NeededAngelTypes`.*, `AngelTypes`.`id`, `AngelTypes`.`name`, `AngelTypes`.`restricted`
         FROM `NeededAngelTypes`
         JOIN `AngelTypes` ON `AngelTypes`.`id` = `NeededAngelTypes`.`angel_type_id`
         WHERE `shift_id`='" . sql_escape($shiftId) . "'
diff --git a/includes/sys_template.php b/includes/sys_template.php
index 9bede1ee..6c1727a4 100644
--- a/includes/sys_template.php
+++ b/includes/sys_template.php
@@ -42,8 +42,11 @@ function glyph_bool($boolean) {
 }
 
 function div($class, $content = [], $dom_id = "") {
+  if (is_array($content)) {
+    $content = join("\n", $content);
+  }
   $dom_id = $dom_id != '' ? ' id="' . $dom_id . '"' : '';
-  return '<div' . $dom_id . ' class="' . $class . '">' . join("\n", $content) . '</div>';
+  return '<div' . $dom_id . ' class="' . $class . '">' . $content . '</div>';
 }
 
 function heading($content, $number = 1) {
diff --git a/includes/view/ShiftCalendarLane.php b/includes/view/ShiftCalendarLane.php
new file mode 100644
index 00000000..33fccec3
--- /dev/null
+++ b/includes/view/ShiftCalendarLane.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace Engelsystem;
+
+/**
+ * Represents a single lane in a shifts calendar.
+ */
+class ShiftCalendarLane {
+
+  private $firstBlockStartTime;
+
+  private $blockCount;
+
+  private $header;
+
+  private $shifts = [];
+
+  public function __construct($header, $firstBlockStartTime, $blockCount) {
+    $this->header = $header;
+    $this->firstBlockStartTime = $firstBlockStartTime;
+    $this->blockCount = $blockCount;
+  }
+
+  /**
+   * Adds a shift to the lane, but only if it fits.
+   * Returns true on success.
+   *
+   * @param Shift $shift
+   *          The shift to add
+   * @return boolean true on success
+   */
+  public function addShift($shift) {
+    if ($this->shiftFits($shift)) {
+      $this->shifts[] = $shift;
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Returns true if given shift fits into this lane.
+   *
+   * @param Shift $shift
+   *          The shift to fit into this lane
+   */
+  public function shiftFits($newShift) {
+    foreach ($this->shifts as $laneShift) {
+      if (! ($newShift['start'] >= $laneShift['end'] || $newShift['end'] <= $laneShift['start'])) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  public function getHeader() {
+    return $this->header;
+  }
+
+  public function getShifts() {
+    return $this->shifts;
+  }
+}
+?>
\ No newline at end of file
diff --git a/includes/view/ShiftCalendarRenderer.php b/includes/view/ShiftCalendarRenderer.php
index 2ba9b9e6..85aedfa0 100644
--- a/includes/view/ShiftCalendarRenderer.php
+++ b/includes/view/ShiftCalendarRenderer.php
@@ -7,72 +7,186 @@ class ShiftCalendarRenderer {
   /**
    * 15m * 60s/m = 900s
    */
-  const MINUTES_PER_ROW = 900;
+  const SECONDS_PER_ROW = 900;
 
-  const EMPTY_CELL = '<td class="empty"></td>';
+  /**
+   * Height of a block in pixel.
+   * Do not change - corresponds with theme/css
+   */
+  const BLOCK_HEIGHT = 30;
+
+  /**
+   * Distance between two shifts in pixels
+   */
+  const MARGIN = 5;
 
-  private $shifts;
+  private $lanes;
 
   private $shiftsFilter;
 
+  private $firstBlockStartTime = null;
+
+  private $blocksPerSlot = null;
+
   public function __construct($shifts, ShiftsFilter $shiftsFilter) {
-    $this->shifts = $shifts;
     $this->shiftsFilter = $shiftsFilter;
+    $this->firstBlockStartTime = $this->calcFirstBlockStartTime($shifts);
+    $this->lanes = $this->assignShiftsToLanes($shifts);
   }
 
-  public function render() {
-    $rooms = $this->rooms();
-    
-    $first_block_start_time = $this->calcFirstBlockStartTime();
-    $blocks_per_slot = $this->calcBlocksPerSlot($first_block_start_time);
+  /**
+   * Assigns the shifts to different lanes per room if they collide
+   *
+   * @param Shift[] $shifts
+   *          The shifts to assign
+   *          
+   * @return Returns an array that assigns a room_id to an array of ShiftCalendarLane containing the shifts
+   */
+  private function assignShiftsToLanes($shifts) {
+    // array that assigns a room id to a list of lanes (per room)
+    $lanes = [];
     
-    $slotSizes = $this->calcSlotSizes($rooms, $first_block_start_time, $blocks_per_slot);
+    foreach ($shifts as $shift) {
+      $room_id = $shift['RID'];
+      if (! isset($lanes[$room_id])) {
+        // initialize room with one lane
+        $header = Room_name_render([
+            'RID' => $room_id,
+            'Name' => $shift['room_name'] 
+        ]);
+        $lanes[$room_id] = [
+            new ShiftCalendarLane($header, $this->getFirstBlockStartTime(), $this->getBlocksPerSlot()) 
+        ];
+      }
+      // Try to add the shift to the existing lanes for this room
+      $shift_added = false;
+      foreach ($lanes[$room_id] as $lane) {
+        $shift_added = $lane->addShift($shift);
+        if ($shift_added == true) {
+          break;
+        }
+      }
+      // If all lanes for this room are busy, create a new lane and add shift to it
+      if ($shift_added == false) {
+        $newLane = new ShiftCalendarLane("", $this->getFirstBlockStartTime(), $this->getBlocksPerSlot());
+        if (! $newLane->addShift($shift)) {
+          engelsystem_error("Unable to add shift to new lane.");
+        }
+        $lanes[$room_id][] = $newLane;
+      }
+    }
     
-    return $this->renderTable($rooms, $slotSizes, $first_block_start_time, $blocks_per_slot);
+    return $lanes;
+  }
+
+  public function getFirstBlockStartTime() {
+    return $this->firstBlockStartTime;
   }
 
-  private function renderTableHead($rooms, $slotSizes) {
-    $shifts_table = '<thead><tr><th>' . _("Time") . '</th>';
-    foreach ($rooms as $room_id => $room_name) {
-      $colspan = $slotSizes[$room_id];
-      $shifts_table .= "<th" . (($colspan > 1) ? ' colspan="' . $colspan . '"' : '') . ">" . Room_name_render([
-          'RID' => $room_id,
-          'Name' => $room_name 
-      ]) . "</th>\n";
+  public function getBlocksPerSlot() {
+    if ($this->blocksPerSlot == null) {
+      $this->blocksPerSlot = $this->calcBlocksPerSlot();
     }
-    $shifts_table .= "</tr></thead>";
-    return $shifts_table;
+    return $this->blocksPerSlot;
   }
 
-  private function initTableBody($slotSizes, $first_block_start_time, $blocks_per_slot) {
-    // Slot sizes plus 1 for the time
-    $columns_needed = array_sum($slotSizes) + 1;
-    $table_line = array_fill(0, $columns_needed, ShiftCalendarRenderer::EMPTY_CELL);
-    $table = array_fill(0, $blocks_per_slot, $table_line);
-    
-    for ($block = 0; $block < $blocks_per_slot; $block ++) {
-      $thistime = $first_block_start_time + ($block * ShiftCalendarRenderer::MINUTES_PER_ROW);
-      if ($thistime % (24 * 60 * 60) == 23 * 60 * 60 && $this->shiftsFilter->getEndTime() - $this->shiftsFilter->getStartTime() > 24 * 60 * 60) {
-        $table[$block][0] = '<th class="row-day">' . date('Y-m-d<b\r />H:i', $thistime) . '</th>';
-      } elseif ($thistime % (60 * 60) == 0) {
-        $table[$block][0] = '<th class="row-hour">' . date('H:i', $thistime) . '</th>';
-      } else {
-        $table[$block][0] = '<th class="empty"></th>';
+  /**
+   * Renders the whole calendar
+   *
+   * @return the generated html
+   */
+  public function render() {
+    return div('shift-calendar', [
+        $this->renderTimeLane(),
+        $this->renderShiftLanes() 
+    ]);
+  }
+
+  /**
+   * Renders the lanes containing the shifts
+   */
+  private function renderShiftLanes() {
+    $html = "";
+    foreach ($this->lanes as $room_id => $room_lanes) {
+      foreach ($room_lanes as $lane) {
+        $html .= $this->renderLane($lane);
       }
     }
-    
-    return $table;
+    return $html;
   }
 
-  private function calcRoomSlots($rooms, $slotSizes) {
-    $result = [];
-    $slot = 1; // 1 for the time
-    foreach (array_keys($rooms) as $room_id) {
-      $result[$room_id] = $slot;
-      $slot += $slotSizes[$room_id];
+  /**
+   * Renders a single lane
+   *
+   * @param ShiftCalendarLane $lane
+   *          The lane to render
+   */
+  private function renderLane(ShiftCalendarLane $lane) {
+    $html = "";
+    $rendered_until = $this->getFirstBlockStartTime();
+    foreach ($lane->getShifts() as $shift) {
+      while ($rendered_until + ShiftCalendarRenderer::SECONDS_PER_ROW <= $shift['start']) {
+        $html .= $this->renderTick($rendered_until);
+        $rendered_until += ShiftCalendarRenderer::SECONDS_PER_ROW;
+      }
+      
+      list($shift_height, $shift_html) = $this->renderShift($shift);
+      $html .= $shift_html;
+      $rendered_until += $shift_height * ShiftCalendarRenderer::SECONDS_PER_ROW;
+    }
+    while ($rendered_until <= $this->shiftsFilter->getEndTime()) {
+      $html .= $this->renderTick($rendered_until);
+      $rendered_until += ShiftCalendarRenderer::SECONDS_PER_ROW;
     }
     
-    return $result;
+    return div('lane', [
+        div('header', $lane->getHeader()),
+        $html 
+    ]);
+  }
+
+  /**
+   * Renders a tick/block for given time
+   *
+   * @param int $time
+   *          unix timestamp
+   * @param boolean $label
+   *          Should time labels be generated?
+   * @return rendered tick html
+   */
+  private function renderTick($time, $label = false) {
+    if ($time % (24 * 60 * 60) == 23 * 60 * 60) {
+      if (! $label) {
+        return div('tick day');
+      }
+      return div('tick day', [
+          date('Y-m-d<b\r />H:i', $time) 
+      ]);
+    } elseif ($time % (60 * 60) == 0) {
+      if (! $label) {
+        return div('tick hour');
+      }
+      return div('tick hour', [
+          date('H:i', $time) 
+      ]);
+    }
+    return div('tick');
+  }
+
+  /**
+   * Renders the left time lane including hour/day ticks
+   */
+  private function renderTimeLane() {
+    $time_slot = [
+        div('header', [
+            _("Time") 
+        ]) 
+    ];
+    for ($block = 0; $block < $this->getBlocksPerSlot(); $block ++) {
+      $thistime = $this->getFirstBlockStartTime() + ($block * ShiftCalendarRenderer::SECONDS_PER_ROW);
+      $time_slot[] = $this->renderTick($thistime, true);
+    }
+    return div('lane time', $time_slot);
   }
 
   private function collides() {
@@ -172,15 +286,14 @@ class ShiftCalendarRenderer {
       $class = 'success';
     }
     
-    $blocks = ceil(($shift["end"] - $shift["start"]) / ShiftCalendarRenderer::MINUTES_PER_ROW);
+    $blocks = ceil(($shift["end"] - $shift["start"]) / ShiftCalendarRenderer::SECONDS_PER_ROW);
     if ($blocks < 1) {
       $blocks = 1;
     }
-    $shift_length = ($shift["end"] - $shift["start"]) / (60 * 60);
     $shift_heading = date('H:i', $shift['start']) . ' &dash; ' . date('H:i', $shift['end']) . ' &mdash; ' . ShiftType($shift['shifttype_id'])['name'];
     return [
         $blocks,
-        '<td class="shift" rowspan="' . $blocks . '">' . div('panel panel-' . $class . '" style="min-height: ' . ($shift_length * 100) . 'px"', [
+        '<td class="shift" rowspan="' . $blocks . '">' . div('shift panel panel-' . $class . '" style="height: ' . ($blocks * ShiftCalendarRenderer::BLOCK_HEIGHT - ShiftCalendarRenderer::MARGIN) . 'px"', [
             div('panel-heading', [
                 '<a href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
                 $header_buttons 
@@ -198,87 +311,18 @@ class ShiftCalendarRenderer {
     ];
   }
 
-  private function renderTableBody($rooms, $slotSizes, $first_block_start_time, $blocks_per_slot) {
-    $table = $this->initTableBody($slotSizes, $first_block_start_time, $blocks_per_slot);
-    
-    $room_slots = $this->calcRoomSlots($rooms, $slotSizes);
-    
-    foreach ($this->shifts as $shift) {
-      list($blocks, $shift_content) = $this->renderShift($shift);
-      $start_block = floor(($shift['start'] - $first_block_start_time) / ShiftCalendarRenderer::MINUTES_PER_ROW);
-      $slot = $room_slots[$shift['RID']];
-      while ($table[$start_block][$slot] != ShiftCalendarRenderer::EMPTY_CELL) {
-        $slot ++;
-      }
-      $table[$start_block][$slot] = $shift_content;
-      for ($block = 1; $block < $blocks; $block ++) {
-        $table[$start_block + $block][$slot] = '';
-      }
-    }
-    
-    $result = '<tbody>';
-    foreach ($table as $table_line) {
-      $result .= '<tr>' . join('', $table_line) . '</tr>';
-    }
-    $result .= '</tbody>';
-    return $result;
-  }
-
-  private function renderTable($rooms, $slotSizes, $first_block_start_time, $blocks_per_slot) {
-    return div('shifts-table', [
-        '<table id="shifts" class="table scrollable">',
-        $this->renderTableHead($rooms, $slotSizes),
-        $this->renderTableBody($rooms, $slotSizes, $first_block_start_time, $blocks_per_slot),
-        '</table>' 
-    ]);
-  }
-
-  /**
-   * Calculates the slots for each room that appears in the shifts
-   */
-  private function rooms() {
-    $rooms = [];
-    foreach ($this->shifts as $shift) {
-      if (! isset($rooms[$shift['RID']])) {
-        $rooms[$shift['RID']] = $shift['room_name'];
-      }
-    }
-    return $rooms;
-  }
-
-  private function calcFirstBlockStartTime() {
+  private function calcFirstBlockStartTime($shifts) {
     $start_time = $this->shiftsFilter->getEndTime();
-    foreach ($this->shifts as $shift) {
+    foreach ($shifts as $shift) {
       if ($shift['start'] < $start_time) {
         $start_time = $shift['start'];
       }
     }
-    return ShiftCalendarRenderer::MINUTES_PER_ROW * floor(($start_time - 60 * 60) / ShiftCalendarRenderer::MINUTES_PER_ROW);
-  }
-
-  private function calcBlocksPerSlot($first_block_start_time) {
-    return ceil(($this->shiftsFilter->getEndTime() - $first_block_start_time) / ShiftCalendarRenderer::MINUTES_PER_ROW);
+    return ShiftCalendarRenderer::SECONDS_PER_ROW * floor(($start_time - 60 * 60) / ShiftCalendarRenderer::SECONDS_PER_ROW);
   }
 
-  private function calcSlotSizes($rooms, $first_block_start_time, $blocks_per_slot) {
-    $parallel_blocks = [];
-    
-    // initialize $block array
-    foreach (array_keys($rooms) as $room_id) {
-      $parallel_blocks[$room_id] = array_fill(0, $blocks_per_slot, 0);
-    }
-    
-    // calculate number of parallel shifts in each timeslot for each room
-    foreach ($this->shifts as $shift) {
-      $room_id = $shift["RID"];
-      $shift_blocks = ($shift["end"] - $shift["start"]) / ShiftCalendarRenderer::MINUTES_PER_ROW;
-      $firstblock = floor(($shift["start"] - $first_block_start_time) / ShiftCalendarRenderer::MINUTES_PER_ROW);
-      for ($block = $firstblock; $block < $shift_blocks + $firstblock && $block < $blocks_per_slot; $block ++) {
-        $parallel_blocks[$room_id][$block] ++;
-      }
-    }
-    
-    return array_map('max', $parallel_blocks);
+  private function calcBlocksPerSlot() {
+    return ceil(($this->shiftsFilter->getEndTime() - $this->getFirstBlockStartTime()) / ShiftCalendarRenderer::SECONDS_PER_ROW);
   }
 }
 
diff --git a/public/css/theme0.css b/public/css/theme0.css
index 0784042a..daba1eba 100644
--- a/public/css/theme0.css
+++ b/public/css/theme0.css
@@ -6730,25 +6730,46 @@ body {
 .footer a {
   color: #777777;
 }
-#shifts.table td,
-#shifts.table th {
-  background-color: #f0f0f0;
+.shift-calendar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-itmes: stretch;
+  width: 100%;
 }
-#shifts.table .row-hour {
-  border-top-color: #777777;
+.shift-calendar .lane {
+  background: #f9f9f9;
+  min-width: 300px;
+  width: 300px;
+  flex-grow: 1;
 }
-#shifts.table td.shift {
-  height: 1px;
-  padding: 0;
+.shift-calendar .lane .header {
+  background: #fff;
+  height: 30px;
+  padding: 5px;
+}
+.shift-calendar .lane .tick {
+  height: 30px;
+  border-top: 1px solid #f4f4f4;
+}
+.shift-calendar .lane .tick.hour {
+  border-top: 2px solid #dddddd;
+  font-size: 0.9em;
+  padding-left: 5px;
 }
-#shifts.table td.shift .panel {
-  margin: 0px 0px 0px 5px;
+.shift-calendar .lane .tick.day {
+  border-top: 2px solid #337ab7;
+  font-size: 0.9em;
+  padding-left: 5px;
 }
-.row-day {
-  border-top: 2px solid #777777;
+.shift-calendar .lane.time {
+  min-width: 100px;
+  width: 100px;
+  flex-grow: 0;
 }
-.row-header {
-  min-width: 90px;
+.shift-calendar .shift {
+  margin: 0 5px 5px 0;
+  overflow: hidden;
 }
 .space-top {
   margin-top: 15px;
diff --git a/public/css/theme1.css b/public/css/theme1.css
index 795439df..e9b6b4cd 100644
--- a/public/css/theme1.css
+++ b/public/css/theme1.css
@@ -6753,25 +6753,46 @@ body {
 .footer a {
   color: #888888;
 }
-#shifts.table td,
-#shifts.table th {
-  background-color: #f0f0f0;
+.shift-calendar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-itmes: stretch;
+  width: 100%;
 }
-#shifts.table .row-hour {
-  border-top-color: #888888;
+.shift-calendar .lane {
+  background: #080808;
+  min-width: 300px;
+  width: 300px;
+  flex-grow: 1;
 }
-#shifts.table td.shift {
-  height: 1px;
-  padding: 0;
+.shift-calendar .lane .header {
+  background: #fff;
+  height: 30px;
+  padding: 5px;
+}
+.shift-calendar .lane .tick {
+  height: 30px;
+  border-top: 1px solid #030303;
+}
+.shift-calendar .lane .tick.hour {
+  border-top: 2px solid #282828;
+  font-size: 0.9em;
+  padding-left: 5px;
 }
-#shifts.table td.shift .panel {
-  margin: 0px 0px 0px 5px;
+.shift-calendar .lane .tick.day {
+  border-top: 2px solid #428bca;
+  font-size: 0.9em;
+  padding-left: 5px;
 }
-.row-day {
-  border-top: 2px solid #888888;
+.shift-calendar .lane.time {
+  min-width: 100px;
+  width: 100px;
+  flex-grow: 0;
 }
-.row-header {
-  min-width: 90px;
+.shift-calendar .shift {
+  margin: 0 5px 5px 0;
+  overflow: hidden;
 }
 .space-top {
   margin-top: 15px;
diff --git a/public/css/theme2.css b/public/css/theme2.css
index 0112dc93..7646f08b 100644
--- a/public/css/theme2.css
+++ b/public/css/theme2.css
@@ -6730,25 +6730,46 @@ body {
 .footer a {
   color: #777777;
 }
-#shifts.table td,
-#shifts.table th {
-  background-color: #f0f0f0;
+.shift-calendar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-itmes: stretch;
+  width: 100%;
 }
-#shifts.table .row-hour {
-  border-top-color: #777777;
+.shift-calendar .lane {
+  background: #f9f9f9;
+  min-width: 300px;
+  width: 300px;
+  flex-grow: 1;
 }
-#shifts.table td.shift {
-  height: 1px;
-  padding: 0;
+.shift-calendar .lane .header {
+  background: #fff;
+  height: 30px;
+  padding: 5px;
+}
+.shift-calendar .lane .tick {
+  height: 30px;
+  border-top: 1px solid #f4f4f4;
+}
+.shift-calendar .lane .tick.hour {
+  border-top: 2px solid #dddddd;
+  font-size: 0.9em;
+  padding-left: 5px;
 }
-#shifts.table td.shift .panel {
-  margin: 0px 0px 0px 5px;
+.shift-calendar .lane .tick.day {
+  border-top: 2px solid #758499;
+  font-size: 0.9em;
+  padding-left: 5px;
 }
-.row-day {
-  border-top: 2px solid #777777;
+.shift-calendar .lane.time {
+  min-width: 100px;
+  width: 100px;
+  flex-grow: 0;
 }
-.row-header {
-  min-width: 90px;
+.shift-calendar .shift {
+  margin: 0 5px 5px 0;
+  overflow: hidden;
 }
 .space-top {
   margin-top: 15px;
diff --git a/public/css/theme3.css b/public/css/theme3.css
index 4be828ef..014fee12 100644
--- a/public/css/theme3.css
+++ b/public/css/theme3.css
@@ -6739,25 +6739,46 @@ body {
 .footer a {
   color: #777777;
 }
-#shifts.table td,
-#shifts.table th {
-  background-color: #f0f0f0;
+.shift-calendar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-itmes: stretch;
+  width: 100%;
 }
-#shifts.table .row-hour {
-  border-top-color: #777777;
+.shift-calendar .lane {
+  background: #f9f9f9;
+  min-width: 300px;
+  width: 300px;
+  flex-grow: 1;
 }
-#shifts.table td.shift {
-  height: 1px;
-  padding: 0;
+.shift-calendar .lane .header {
+  background: #fff;
+  height: 30px;
+  padding: 5px;
+}
+.shift-calendar .lane .tick {
+  height: 30px;
+  border-top: 1px solid #f4f4f4;
+}
+.shift-calendar .lane .tick.hour {
+  border-top: 2px solid #dddddd;
+  font-size: 0.9em;
+  padding-left: 5px;
 }
-#shifts.table td.shift .panel {
-  margin: 0px 0px 0px 5px;
+.shift-calendar .lane .tick.day {
+  border-top: 2px solid #f19224;
+  font-size: 0.9em;
+  padding-left: 5px;
 }
-.row-day {
-  border-top: 2px solid #777777;
+.shift-calendar .lane.time {
+  min-width: 100px;
+  width: 100px;
+  flex-grow: 0;
 }
-.row-header {
-  min-width: 90px;
+.shift-calendar .shift {
+  margin: 0 5px 5px 0;
+  overflow: hidden;
 }
 .space-top {
   margin-top: 15px;
diff --git a/shift_markup.html b/shift_markup.html
index 8d8fa63b..7ad5177a 100644
--- a/shift_markup.html
+++ b/shift_markup.html
@@ -4,52 +4,13 @@
 <meta charset="UTF-8" />
 <link rel="stylesheet" type="text/css" href="public/css/theme3.css" />
 <style>
-.shift-calendar {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	align-itmes: stretch;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	align-itmes: stretch;
-	width: 100%;
-}
-
-.shift-calendar .lane {
-	background: #f0f0f0;
-	flex-grow: 1;
-  min-width: 300px;
-	width: 300px;
-	flex-grow: 1;
-}
-
-.shift-calendar .lane.time {
-	flex-grow: 0;
-  min-width: 100px;
-	width: 100px;
-	flex-grow: 0;
-}
-
-.shift-calendar .lane .tick {
-	height: 20px;
-	border-top: 1px solid #ddd;
-}
-
-.shift-calendar .lane .tick.hour {
-	border-top: 1px solid #aaa;
-}
-
-.shift-calendar .shift {
-	margin-bottom: 0;
-	overflow: hidden;
-}
 </style>
 </head>
 <body>
   <div class="shift-calendar">
     <div class="lane time">
-      <div class="tick hour">10:00</div>
+      <div class="header">Time</div>
+      <div class="tick day">2016-12-27 00:00</div>
       <div class="tick"></div>
       <div class="tick"></div>
       <div class="tick"></div>
@@ -67,7 +28,10 @@
       <div class="tick"></div>
     </div>
     <div class="lane">
-      <div class="tick hour"></div>
+      <div class="header">
+        <span class="glyphicon glyphicon-map-marker"></span> Bottle Sorting (Hall H)
+      </div>
+      <div class="tick day"></div>
       <div class="tick"></div>
       <div class="tick"></div>
       <div class="tick"></div>
@@ -99,7 +63,8 @@
       <div class="tick"></div>
     </div>
     <div class="lane">
-      <div class="tick hour"></div>
+      <div class="header"></div>
+      <div class="tick day"></div>
       <div class="tick"></div>
       <div class="tick"></div>
       <div class="tick"></div>
diff --git a/themes/base.less b/themes/base.less
index c5ff50b2..98c12514 100644
--- a/themes/base.less
+++ b/themes/base.less
@@ -10,32 +10,59 @@ body {
   color: @text-muted;
 }
 
-#shifts.table {
-	td, th {
-	  background-color: #f0f0f0;
+.shift-calendar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-itmes: stretch;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-itmes: stretch;
+  width: 100%;
+  
+	.lane {
+	  background: @table-bg-accent;
+	  flex-grow: 1;
+	  min-width: 300px;
+	  width: 300px;
+	  flex-grow: 1;
+	  
+		.header {
+		  background: #fff;
+		  height: 30px;
+		  padding: 5px;
+		}
+  
+	  .tick {
+	    height: 30px;
+	    border-top: 1px solid darken(@table-bg-accent, 2%);
+	  }
+    
+    .tick.hour {
+      border-top: 2px solid @table-border-color;
+      font-size: 0.9em;
+      padding-left: 5px;
+    }
+    
+    .tick.day {
+      border-top: 2px solid @brand-primary;
+      font-size: 0.9em;
+      padding-left: 5px;
+    }
 	}
 	
-	.row-hour {
-	  border-top-color: @gray-light;
+	.lane.time {
+	  flex-grow: 0;
+	  min-width: 100px;
+	  width: 100px;
+	  flex-grow: 0;
 	}
 	
-	td.shift {
-	  height: 1px;
-		padding: 0;
-		
-		.panel {
-      margin: 0px 0px 0px 5px;
-      overflow: hidden;
-		}
-  }
-}
-
-.row-day {
-  border-top: 2px solid @gray-light;
-}
-
-.row-header {
-  min-width: 90px;
+	.shift {
+	  margin: 0 5px 5px 0;
+	  overflow: hidden;
+	}
 }
 
 .space-top {