From 4912c11509534dcc9b9aa01ecfe06f08b6e950b6 Mon Sep 17 00:00:00 2001 From: Felix Gliesche Date: Wed, 3 May 2017 11:30:12 +0200 Subject: [PATCH] Optimize gantt charts for mobile screens --- app/views/gantts/show.html.erb | 4 ++-- public/stylesheets/responsive.css | 27 +++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/app/views/gantts/show.html.erb b/app/views/gantts/show.html.erb index 09a17b1..314c2f2 100644 --- a/app/views/gantts/show.html.erb +++ b/app/views/gantts/show.html.erb @@ -121,14 +121,14 @@ -
+ <% style = "" style += "position:relative;" style += "height: #{t_height + 24}px;" style += "width: #{subject_width + 1}px;" %> - <%= content_tag(:div, :style => style) do %> + <%= content_tag(:div, :style => style, :class => "gantt_subjects_container") do %> <% style = "" style += "right:-2px;" diff --git a/public/stylesheets/responsive.css b/public/stylesheets/responsive.css index 4ce2774..c3ceb9e 100644 --- a/public/stylesheets/responsive.css +++ b/public/stylesheets/responsive.css @@ -689,6 +689,33 @@ padding-top: 1em; } + /* Gantt charts */ + /* + * [1] override inline styles with important + * [2] keep border between subjects and gantt area + * [3] remove whitespace between subjects and gantt area + * [4] maintain width due to [3] + */ + .gantt_subjects_column { + width: 60% !important; /* [1] */ + } + + .gantt_subjects_container { + width: 100% !important; + overflow: hidden; + } + + .gantt_subjects_column .gantt_hdr { + width: 100% !important; + border-right: 1px solid #c0c0c0; /* [2] */ + right: 0 !important; /* [2] */ + } + + #gantt_area { + left: -2px; /* [3] */ + margin-right: -2px; /* [4] */ + } + /*----------------------------------------*\ G) FORMS \*----------------------------------------*/ -- 2.7.4 (Apple Git-66)