add fixed shift calendar headers and timelane

5 files changed, 62 insertions, 16 deletions

diff --git a/public/css/theme0.css b/public/css/theme0.css
index 02bdeb7f..bc8e639f 100644
--- a/public/css/theme0.css
+++ b/public/css/theme0.css
@@ -6757,12 +6757,14 @@ body {
 }
 .shift-calendar .lane {
   background: #f9f9f9;
-  min-width: 300px;
-  width: 300px;
   flex-grow: 1;
+  min-width: 280px;
+  width: 280px;
+  flex-shrink: 1;
 }
 .shift-calendar .lane .header {
   background: #ffffff;
+  border-bottom: 1px solid #dddddd;
   height: 30px;
   padding: 5px;
 }
@@ -6781,9 +6783,11 @@ body {
   padding-left: 5px;
 }
 .shift-calendar .lane.time {
-  min-width: 100px;
-  width: 100px;
+  border-right: 1px solid #dddddd;
   flex-grow: 0;
+  min-width: 50px;
+  width: 50px;
+  flex-shrink: 0;
 }
 .shift-calendar .shift {
   margin: 0 5px 5px 0;
diff --git a/public/css/theme1.css b/public/css/theme1.css
index d9cf7b73..39f8e7a6 100644
--- a/public/css/theme1.css
+++ b/public/css/theme1.css
@@ -6780,12 +6780,14 @@ body {
 }
 .shift-calendar .lane {
   background: #080808;
-  min-width: 300px;
-  width: 300px;
   flex-grow: 1;
+  min-width: 280px;
+  width: 280px;
+  flex-shrink: 1;
 }
 .shift-calendar .lane .header {
   background: #222222;
+  border-bottom: 1px solid #282828;
   height: 30px;
   padding: 5px;
 }
@@ -6804,9 +6806,11 @@ body {
   padding-left: 5px;
 }
 .shift-calendar .lane.time {
-  min-width: 100px;
-  width: 100px;
+  border-right: 1px solid #282828;
   flex-grow: 0;
+  min-width: 50px;
+  width: 50px;
+  flex-shrink: 0;
 }
 .shift-calendar .shift {
   margin: 0 5px 5px 0;
diff --git a/public/css/theme2.css b/public/css/theme2.css
index 4b6b1d67..4e13c1bc 100644
--- a/public/css/theme2.css
+++ b/public/css/theme2.css
@@ -6757,12 +6757,14 @@ body {
 }
 .shift-calendar .lane {
   background: #f9f9f9;
-  min-width: 300px;
-  width: 300px;
   flex-grow: 1;
+  min-width: 280px;
+  width: 280px;
+  flex-shrink: 1;
 }
 .shift-calendar .lane .header {
   background: #ffffff;
+  border-bottom: 1px solid #dddddd;
   height: 30px;
   padding: 5px;
 }
@@ -6781,9 +6783,11 @@ body {
   padding-left: 5px;
 }
 .shift-calendar .lane.time {
-  min-width: 100px;
-  width: 100px;
+  border-right: 1px solid #dddddd;
   flex-grow: 0;
+  min-width: 50px;
+  width: 50px;
+  flex-shrink: 0;
 }
 .shift-calendar .shift {
   margin: 0 5px 5px 0;
diff --git a/public/css/theme3.css b/public/css/theme3.css
index dd65c030..c20c1059 100644
--- a/public/css/theme3.css
+++ b/public/css/theme3.css
@@ -6766,12 +6766,14 @@ body {
 }
 .shift-calendar .lane {
   background: #f9f9f9;
-  min-width: 300px;
-  width: 300px;
   flex-grow: 1;
+  min-width: 280px;
+  width: 280px;
+  flex-shrink: 1;
 }
 .shift-calendar .lane .header {
   background: #ffffff;
+  border-bottom: 1px solid #dddddd;
   height: 30px;
   padding: 5px;
 }
@@ -6790,9 +6792,11 @@ body {
   padding-left: 5px;
 }
 .shift-calendar .lane.time {
-  min-width: 100px;
-  width: 100px;
+  border-right: 1px solid #dddddd;
   flex-grow: 0;
+  min-width: 50px;
+  width: 50px;
+  flex-shrink: 0;
 }
 .shift-calendar .shift {
   margin: 0 5px 5px 0;
diff --git a/public/js/shift-calendar.js b/public/js/shift-calendar.js
new file mode 100644
index 00000000..357b69ff
--- /dev/null
+++ b/public/js/shift-calendar.js
@@ -0,0 +1,30 @@
+/**
+ * Enables the fixed headers and time lane for the shift-calendar.
+ */
+$(document).ready(
+    function() {
+      var time_lanes = $(".shift-calendar .time");
+      var headers = $(".shift-calendar .header");
+      var top_reference = $(".container-fluid .row");
+      var top = headers.offset().top;
+      var left = 15;
+      time_lanes.css({
+        "position" : "relative",
+        "z-index" : 1000
+      });
+      headers.css({
+        "position" : "relative",
+        "z-index" : 900
+      });
+      $(window).scroll(
+          function() {
+            time_lanes.css({
+              "left" : Math.max(0, $(window).scrollLeft() - left) + "px"
+            });
+            headers.css({
+              "top" : Math.max(0, $(window).scrollTop() - top
+                  + top_reference.offset().top)
+                  + "px"
+            });
+          });
+    });
\ No newline at end of file