change shift table to html5

1 files changed, 49 insertions, 22 deletions

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 {