From 87a73c9d313a488dcea7549283ac05564d8c0c2b Mon Sep 17 00:00:00 2001
From: Daniel Ritz <daniel.ritz@gmx.ch>
Date: Sat, 23 Jan 2016 21:42:34 +0100
Subject: [PATCH] Make sidebar collapsible

* Adds the relative URL root as a meta property in the head tag
* Adds a simple <a> to the sidebar as collapse/expand button
* Makes the .content a BFC taking the remaining width
* Few lines of javascript to toggle CSS and set a cookie
* Sidebar is hidden by setting its margin-right
* Nice hiding animation using CSS for browsers that support it
* The state of the sidebar is read from the cookie and applied on page load
---
 app/views/layouts/base.html.erb                    |  6 +++-
 public/javascripts/application.js                  |  8 +++++
 public/stylesheets/application.css                 | 38 ++++++++++++++++++++--
 .../themes/alternate/stylesheets/application.css   |  2 ++
 public/themes/classic/stylesheets/application.css  |  2 ++
 5 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index 68b6bd8..5785ca1 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -7,6 +7,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="description" content="<%= Redmine::Info.app_name %>" />
 <meta name="keywords" content="issue,bug,tracker" />
+<meta property="rails-url-root" content="<%= Redmine::Utils.relative_url_root.presence || "/" %>" />
 <%= csrf_meta_tag %>
 <%= favicon %>
 <%= stylesheet_link_tag 'jquery/jquery-ui-1.11.0', 'application', 'responsive', :media => 'all' %>
@@ -99,9 +100,12 @@
 </div>
 
 <div id="main" class="<%= sidebar_content? ? '' : 'nosidebar' %>">
-    <div id="sidebar">
+    <div id="sidebar" class="<%= cookies['sidebar_collapse'] == 'true' ? 'hidden' : '' %>">
+      <a id="sidebar-toggle" href="#"></a>
+      <div class="sidebar-wrapper">
         <%= yield :sidebar %>
         <%= view_layouts_base_sidebar_hook_response %>
+      </div>
     </div>
 
     <div id="content">
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index b247907..c817c2d 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -685,3 +685,11 @@ $(document).ready(hideOnLoad);
 $(document).ready(addFormObserversForDoubleSubmit);
 $(document).ready(defaultFocus);
 $(document).ready(setupTabs);
+$(document).ready(function () {
+  $('#sidebar-toggle').click(function () {
+    $('#sidebar').toggleClass('hidden');
+    document.cookie = 'sidebar_collapse=' + $('#sidebar').hasClass('hidden') +
+      '; path=' + $('meta[property="rails-url-root"]').attr('content');
+    return false;
+  });
+});
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 0c8903c..539b65f 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -77,7 +77,19 @@ pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
 
 #main {background-color:#EEEEEE;}
 
-#sidebar{ float: right; width: 22%; position: relative; z-index: 9; padding: 0; margin: 0;}
+#sidebar{
+  position: relative;
+  float: right;
+  width: 22%;
+  z-index: 9;
+  padding: 0 0 0 16px;
+  transition-duration: 0.5s;
+  margin: 0;
+}
+#sidebar .sidebar-wrapper {
+  padding-left: 10px;
+  transition-duration: 0;
+}
 * html #sidebar{ width: 22%; }
 #sidebar h3{ font-size: 14px; margin-top:14px; color: #666;  }
 #sidebar hr{ width: 100%; margin: 0 auto; height: 1px; background: #ccc; border: 0; }
@@ -85,8 +97,30 @@ pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
 #sidebar .contextual { margin-right: 1em; }
 #sidebar ul, ul.flat {margin: 0;  padding: 0;}
 #sidebar ul li, ul.flat li {list-style-type:none;margin: 0px 2px 0px 0px; padding: 0px 0px 0px 0px;}
+#sidebar.hidden { margin-right: -22%; }
+#sidebar a#sidebar-toggle {
+  position: absolute;
+  top: 0;
+  left: -6px;
+  width: 20px;
+  height: 30px;
+  font-size: 1em;
+  font-weight: bold;
+  border: 1px solid #ccc;
+  border-radius: 0 0 3px 3px;
+  background: #eee url(../images/bullet_arrow_right.png) no-repeat 50% 50%;
+}
+#sidebar a#sidebar-toggle:focus {
+  outline: 0;
+}
+#sidebar.hidden a#sidebar-toggle {
+  background: #eee url(../images/bullet_arrow_left.png) no-repeat 50% 50%;
+}
+#sidebar a#sidebar-toggle:hover {
+  background-color: #f5f5f5;
+}
 
-#content { width: 75%; background-color: #fff; margin: 0px; border-right: 1px solid #ddd; padding: 6px 10px 10px 10px; z-index: 10; }
+#content { overflow: hidden; background-color: #fff; margin: 0px; border-right: 1px solid #ddd; padding: 6px 10px 10px 10px; z-index: 10; }
 * html #content{ width: 75%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;}
 html>body #content { min-height: 600px; }
 * html body #content { height: 600px; } /* IE */
diff --git a/public/themes/alternate/stylesheets/application.css b/public/themes/alternate/stylesheets/application.css
index efa1129..ac2821d 100644
--- a/public/themes/alternate/stylesheets/application.css
+++ b/public/themes/alternate/stylesheets/application.css
@@ -6,6 +6,8 @@ body, #wrapper { background-color:#EEEEEE; }
 #content, #main.nosidebar #content { background: #fff; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; border-left: 1px solid #d7d7d7; border-top: 1px solid #d7d7d7; }
 #footer { background-color:#EEEEEE; border: 0px; }
 
+#sidebar.hidden .sidebar-wrapper { padding-left: 15px; }
+
 /* Headers */
 h2, h3, h4, .wiki h1, .wiki h2, .wiki h3 {border-bottom: 0px;}
 
diff --git a/public/themes/classic/stylesheets/application.css b/public/themes/classic/stylesheets/application.css
index 3f855fe..4f8d4aa 100644
--- a/public/themes/classic/stylesheets/application.css
+++ b/public/themes/classic/stylesheets/application.css
@@ -22,6 +22,8 @@ body{ color:#303030; background:#e8eaec; }
 #content { background: #fff; }
 #content .tabs ul { bottom:-1px; }
 
+#sidebar.hidden .sidebar-wrapper { padding-left: 15px; }
+
 h2, h3, h4, .wiki h1, .wiki h2, .wiki h3 { border-bottom: 0px; color:#606060; font-family: Trebuchet MS,Georgia,"Times New Roman",serif; }
 h2, .wiki h1 { letter-spacing:-1px; }
 h4 { border-bottom: dotted 1px #c0c0c0; }
-- 
2.6.3

