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 --- public/css/theme0.css | 49 +++++++++++++++++++++++++++++++++++-------------- public/css/theme1.css | 49 +++++++++++++++++++++++++++++++++++-------------- public/css/theme2.css | 49 +++++++++++++++++++++++++++++++++++-------------- public/css/theme3.css | 49 +++++++++++++++++++++++++++++++++++-------------- 4 files changed, 140 insertions(+), 56 deletions(-) (limited to 'public') 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; -- cgit v1.2.3-70-g09d2