4 files changed, 200 insertions, 96 deletions
diff --git a/public/css/theme0.css b/public/css/theme0.css
index 49f928e9..02bdeb7f 100644
--- a/public/css/theme0.css
+++ b/public/css/theme0.css
@@ -6730,38 +6730,64 @@ body {
 .footer a {
   color: #777777;
 }
-#shifts td.free {
-  border: 1px solid #d9534f;
-  background-color: #f2dede;
+.panel-primary .panel-heading a {
+  color: #ffffff;
 }
-a#shifts td.free:hover,
-a#shifts td.free:focus {
-  background-color: #e4b9b9;
+.panel-default .panel-heading a {
+  color: #333333;
 }
-#shifts td.occupied {
-  border: 1px solid #5cb85c;
-  background-color: #dff0d8;
+.panel-info .panel-heading a {
+  color: #31708f;
 }
-a#shifts td.occupied:hover,
-a#shifts td.occupied:focus {
-  background-color: #c1e2b3;
+.panel-success .panel-heading a {
+  color: #3c763d;
 }
-#shifts td.collides {
-  border: 1px solid #f0ad4e;
-  background-color: #fcf8e3;
+.panel-warning .panel-heading a {
+  color: #8a6d3b;
 }
-a#shifts td.collides:hover,
-a#shifts td.collides:focus {
-  background-color: #f7ecb5;
+.panel-danger .panel-heading a {
+  color: #a94442;
 }
-#shifts td.own {
-  border: 1px solid #777777;
+.shift-calendar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-itmes: stretch;
+  width: 100%;
 }
-.row-day {
-  border-top: 2px solid #777777;
+.shift-calendar .lane {
+  background: #f9f9f9;
+  min-width: 300px;
+  width: 300px;
+  flex-grow: 1;
 }
-.row-header {
-  min-width: 90px;
+.shift-calendar .lane .header {
+  background: #ffffff;
+  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;
+}
+.shift-calendar .lane .tick.day {
+  border-top: 2px solid #337ab7;
+  font-size: 0.9em;
+  padding-left: 5px;
+}
+.shift-calendar .lane.time {
+  min-width: 100px;
+  width: 100px;
+  flex-grow: 0;
+}
+.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 379f53e4..d9cf7b73 100644
--- a/public/css/theme1.css
+++ b/public/css/theme1.css
@@ -6753,38 +6753,64 @@ body {
 .footer a {
   color: #888888;
 }
-#shifts td.free {
-  border: 1px solid #d9534f;
-  background-color: #d9534f;
+.panel-primary .panel-heading a {
+  color: #ffffff;
 }
-a#shifts td.free:hover,
-a#shifts td.free:focus {
-  background-color: #c9302c;
+.panel-default .panel-heading a {
+  color: #888888;
 }
-#shifts td.occupied {
-  border: 1px solid #5cb85c;
-  background-color: #5cb85c;
+.panel-info .panel-heading a {
+  color: #ffffff;
 }
-a#shifts td.occupied:hover,
-a#shifts td.occupied:focus {
-  background-color: #449d44;
+.panel-success .panel-heading a {
+  color: #ffffff;
 }
-#shifts td.collides {
-  border: 1px solid #f0ad4e;
-  background-color: #f0ad4e;
+.panel-warning .panel-heading a {
+  color: #ffffff;
 }
-a#shifts td.collides:hover,
-a#shifts td.collides:focus {
-  background-color: #ec971f;
+.panel-danger .panel-heading a {
+  color: #ffffff;
 }
-#shifts td.own {
-  border: 1px solid #888888;
+.shift-calendar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-itmes: stretch;
+  width: 100%;
 }
-.row-day {
-  border-top: 2px solid #888888;
+.shift-calendar .lane {
+  background: #080808;
+  min-width: 300px;
+  width: 300px;
+  flex-grow: 1;
 }
-.row-header {
-  min-width: 90px;
+.shift-calendar .lane .header {
+  background: #222222;
+  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;
+}
+.shift-calendar .lane .tick.day {
+  border-top: 2px solid #428bca;
+  font-size: 0.9em;
+  padding-left: 5px;
+}
+.shift-calendar .lane.time {
+  min-width: 100px;
+  width: 100px;
+  flex-grow: 0;
+}
+.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 e73daad3..4b6b1d67 100644
--- a/public/css/theme2.css
+++ b/public/css/theme2.css
@@ -6730,38 +6730,64 @@ body {
 .footer a {
   color: #777777;
 }
-#shifts td.free {
-  border: 1px solid #7f528b;
-  background-color: #f1eaf2;
+.panel-primary .panel-heading a {
+  color: #ffffff;
 }
-a#shifts td.free:hover,
-a#shifts td.free:focus {
-  background-color: #dbcadf;
+.panel-default .panel-heading a {
+  color: #333333;
 }
-#shifts td.occupied {
-  border: 1px solid #7b9c41;
-  background-color: #f0f5e7;
+.panel-info .panel-heading a {
+  color: #826045;
 }
-a#shifts td.occupied:hover,
-a#shifts td.occupied:focus {
-  background-color: #d9e6c3;
+.panel-success .panel-heading a {
+  color: #638232;
 }
-#shifts td.collides {
-  border: 1px solid #e3a14d;
-  background-color: #ffffff;
+.panel-warning .panel-heading a {
+  color: #bc8640;
 }
-a#shifts td.collides:hover,
-a#shifts td.collides:focus {
-  background-color: #e6e6e6;
+.panel-danger .panel-heading a {
+  color: #694374;
 }
-#shifts td.own {
-  border: 1px solid #777777;
+.shift-calendar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-itmes: stretch;
+  width: 100%;
 }
-.row-day {
-  border-top: 2px solid #777777;
+.shift-calendar .lane {
+  background: #f9f9f9;
+  min-width: 300px;
+  width: 300px;
+  flex-grow: 1;
 }
-.row-header {
-  min-width: 90px;
+.shift-calendar .lane .header {
+  background: #ffffff;
+  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;
+}
+.shift-calendar .lane .tick.day {
+  border-top: 2px solid #758499;
+  font-size: 0.9em;
+  padding-left: 5px;
+}
+.shift-calendar .lane.time {
+  min-width: 100px;
+  width: 100px;
+  flex-grow: 0;
+}
+.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 82228db5..dd65c030 100644
--- a/public/css/theme3.css
+++ b/public/css/theme3.css
@@ -6739,38 +6739,64 @@ body {
 .footer a {
   color: #777777;
 }
-#shifts td.free {
-  border: 1px solid #da1639;
-  background-color: #f9c3cd;
+.panel-primary .panel-heading a {
+  color: #ffffff;
 }
-a#shifts td.free:hover,
-a#shifts td.free:focus {
-  background-color: #f495a6;
+.panel-default .panel-heading a {
+  color: #333333;
 }
-#shifts td.occupied {
-  border: 1px solid #39ab50;
-  background-color: #c4eccc;
+.panel-info .panel-heading a {
+  color: #6618f9;
 }
-a#shifts td.occupied:hover,
-a#shifts td.occupied:focus {
-  background-color: #9edfab;
+.panel-success .panel-heading a {
+  color: #39ab50;
 }
-#shifts td.collides {
-  border: 1px solid #dad216;
-  background-color: #f9f7c3;
+.panel-warning .panel-heading a {
+  color: #dad216;
 }
-a#shifts td.collides:hover,
-a#shifts td.collides:focus {
-  background-color: #f4f095;
+.panel-danger .panel-heading a {
+  color: #da1639;
 }
-#shifts td.own {
-  border: 1px solid #777777;
+.shift-calendar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-itmes: stretch;
+  width: 100%;
 }
-.row-day {
-  border-top: 2px solid #777777;
+.shift-calendar .lane {
+  background: #f9f9f9;
+  min-width: 300px;
+  width: 300px;
+  flex-grow: 1;
 }
-.row-header {
-  min-width: 90px;
+.shift-calendar .lane .header {
+  background: #ffffff;
+  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;
+}
+.shift-calendar .lane .tick.day {
+  border-top: 2px solid #f19224;
+  font-size: 0.9em;
+  padding-left: 5px;
+}
+.shift-calendar .lane.time {
+  min-width: 100px;
+  width: 100px;
+  flex-grow: 0;
+}
+.shift-calendar .shift {
+  margin: 0 5px 5px 0;
+  overflow: hidden;
 }
 .space-top {
   margin-top: 15px;