From cf8cc5f592d4935e857fb5434aaf00168bdcb4c5 Mon Sep 17 00:00:00 2001 From: msquare Date: Sat, 5 Nov 2016 10:06:06 +0100 Subject: change shift table to html5 --- themes/base.less | 71 ++++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 49 insertions(+), 22 deletions(-) (limited to 'themes') 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 { -- cgit v1.2.3-54-g00ecf