Feature #21808 » 0001-Make-sidebar-collapsible.patch
app/views/layouts/base.html.erb | ||
---|---|---|
7 | 7 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
8 | 8 |
<meta name="description" content="<%= Redmine::Info.app_name %>" /> |
9 | 9 |
<meta name="keywords" content="issue,bug,tracker" /> |
10 |
<meta property="rails-url-root" content="<%= Redmine::Utils.relative_url_root.presence || "/" %>" /> |
|
10 | 11 |
<%= csrf_meta_tag %> |
11 | 12 |
<%= favicon %> |
12 | 13 |
<%= stylesheet_link_tag 'jquery/jquery-ui-1.11.0', 'application', 'responsive', :media => 'all' %> |
... | ... | |
99 | 100 |
</div> |
100 | 101 | |
101 | 102 |
<div id="main" class="<%= sidebar_content? ? '' : 'nosidebar' %>"> |
102 |
<div id="sidebar"> |
|
103 |
<div id="sidebar" class="<%= cookies['sidebar_collapse'] == 'true' ? 'hidden' : '' %>"> |
|
104 |
<a id="sidebar-toggle" href="#"></a> |
|
105 |
<div class="sidebar-wrapper"> |
|
103 | 106 |
<%= yield :sidebar %> |
104 | 107 |
<%= view_layouts_base_sidebar_hook_response %> |
108 |
</div> |
|
105 | 109 |
</div> |
106 | 110 | |
107 | 111 |
<div id="content"> |
public/javascripts/application.js | ||
---|---|---|
685 | 685 |
$(document).ready(addFormObserversForDoubleSubmit); |
686 | 686 |
$(document).ready(defaultFocus); |
687 | 687 |
$(document).ready(setupTabs); |
688 |
$(document).ready(function () { |
|
689 |
$('#sidebar-toggle').click(function () { |
|
690 |
$('#sidebar').toggleClass('hidden'); |
|
691 |
document.cookie = 'sidebar_collapse=' + $('#sidebar').hasClass('hidden') + |
|
692 |
'; path=' + $('meta[property="rails-url-root"]').attr('content'); |
|
693 |
return false; |
|
694 |
}); |
|
695 |
}); |
public/stylesheets/application.css | ||
---|---|---|
77 | 77 | |
78 | 78 |
#main {background-color:#EEEEEE;} |
79 | 79 | |
80 |
#sidebar{ float: right; width: 22%; position: relative; z-index: 9; padding: 0; margin: 0;} |
|
80 |
#sidebar{ |
|
81 |
position: relative; |
|
82 |
float: right; |
|
83 |
width: 22%; |
|
84 |
z-index: 9; |
|
85 |
padding: 0 0 0 16px; |
|
86 |
transition-duration: 0.5s; |
|
87 |
margin: 0; |
|
88 |
} |
|
89 |
#sidebar .sidebar-wrapper { |
|
90 |
padding-left: 10px; |
|
91 |
transition-duration: 0; |
|
92 |
} |
|
81 | 93 |
* html #sidebar{ width: 22%; } |
82 | 94 |
#sidebar h3{ font-size: 14px; margin-top:14px; color: #666; } |
83 | 95 |
#sidebar hr{ width: 100%; margin: 0 auto; height: 1px; background: #ccc; border: 0; } |
... | ... | |
85 | 97 |
#sidebar .contextual { margin-right: 1em; } |
86 | 98 |
#sidebar ul, ul.flat {margin: 0; padding: 0;} |
87 | 99 |
#sidebar ul li, ul.flat li {list-style-type:none;margin: 0px 2px 0px 0px; padding: 0px 0px 0px 0px;} |
100 |
#sidebar.hidden { margin-right: -22%; } |
|
101 |
#sidebar a#sidebar-toggle { |
|
102 |
position: absolute; |
|
103 |
top: 0; |
|
104 |
left: -6px; |
|
105 |
width: 20px; |
|
106 |
height: 30px; |
|
107 |
font-size: 1em; |
|
108 |
font-weight: bold; |
|
109 |
border: 1px solid #ccc; |
|
110 |
border-radius: 0 0 3px 3px; |
|
111 |
background: #eee url(../images/bullet_arrow_right.png) no-repeat 50% 50%; |
|
112 |
} |
|
113 |
#sidebar a#sidebar-toggle:focus { |
|
114 |
outline: 0; |
|
115 |
} |
|
116 |
#sidebar.hidden a#sidebar-toggle { |
|
117 |
background: #eee url(../images/bullet_arrow_left.png) no-repeat 50% 50%; |
|
118 |
} |
|
119 |
#sidebar a#sidebar-toggle:hover { |
|
120 |
background-color: #f5f5f5; |
|
121 |
} |
|
88 | 122 | |
89 |
#content { width: 75%; background-color: #fff; margin: 0px; border-right: 1px solid #ddd; padding: 6px 10px 10px 10px; z-index: 10; }
|
|
123 |
#content { overflow: hidden; background-color: #fff; margin: 0px; border-right: 1px solid #ddd; padding: 6px 10px 10px 10px; z-index: 10; }
|
|
90 | 124 |
* html #content{ width: 75%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;} |
91 | 125 |
html>body #content { min-height: 600px; } |
92 | 126 |
* html body #content { height: 600px; } /* IE */ |
public/themes/alternate/stylesheets/application.css | ||
---|---|---|
6 | 6 |
#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; } |
7 | 7 |
#footer { background-color:#EEEEEE; border: 0px; } |
8 | 8 | |
9 |
#sidebar.hidden .sidebar-wrapper { padding-left: 15px; } |
|
10 | ||
9 | 11 |
/* Headers */ |
10 | 12 |
h2, h3, h4, .wiki h1, .wiki h2, .wiki h3 {border-bottom: 0px;} |
11 | 13 |
public/themes/classic/stylesheets/application.css | ||
---|---|---|
22 | 22 |
#content { background: #fff; } |
23 | 23 |
#content .tabs ul { bottom:-1px; } |
24 | 24 | |
25 |
#sidebar.hidden .sidebar-wrapper { padding-left: 15px; } |
|
26 | ||
25 | 27 |
h2, h3, h4, .wiki h1, .wiki h2, .wiki h3 { border-bottom: 0px; color:#606060; font-family: Trebuchet MS,Georgia,"Times New Roman",serif; } |
26 | 28 |
h2, .wiki h1 { letter-spacing:-1px; } |
27 | 29 |
h4 { border-bottom: dotted 1px #c0c0c0; } |