Making table of contents fixed on report list when on a desktop.

Hiding table of contents on phones since it's not very useful.
pitapun · Jan 19, 2013 · 6ce445a · 6ce445a
1 parent 1b4b87f
commit 6ce445a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/public/css/report_list.css b/public/css/report_list.css
@@ -13,3 +13,20 @@
 #report_list .nav-list .nav-list h2 {
 	font-size: 1.3em;
 }
+#table_of_contents {
+    bottom: 0;
+    top: 50px;
+    position: fixed;
+    overflow-y: auto;
+}
+@media (max-width: 979px) {
+    #table_of_contents {
+	position: absolute;
+	top: 60px;
+	bottom: auto;
+	height: auto;
+    }
+}
+#report_list {
+    padding-bottom: 400px;
+}
diff --git a/templates/default/html/report_list.twig b/templates/default/html/report_list.twig
@@ -14,17 +14,16 @@
 
 {% block content %}
 <div class='row'>
-	<div id='table_of_contents' class='span3'>
+	<div id='table_of_contents' class='span3 hidden-phone'>
 	{% block table_of_contents %}
 		<ul class='nav nav-list'>
-			<li class='nav-header'>Table of Contents</li>
 			{% for item in reports %}
 				{% include "html/report_list_table_of_contents_item.twig" %}
 			{% endfor %}
 		</ul>
 	{% endblock %}
 	</div>
-	<div id='report_list' class='span9'>
+	<div id='report_list' class='span9 offset3'>
         <h1 class="visible-phone">All Reports</h1>
 		{% block report_errors %}
 			{% if report_errors is not empty %}

diff --git a/templates/default/html/report_list_item.twig b/templates/default/html/report_list_item.twig
@@ -1,18 +1,24 @@
 {% if item.is_dir %}
+	{% if h is not defined %}
+		{% set h = 2 %}
+	{% endif %}
 	{% if item.children %}
 		<a name="report_{{item.Id}}" href='#'>.</a>
-		<h2 class="{% if not item.Title %}no_title{% endif %}">
+		<h{{h < 5 ? h : 5}} class="{% if not item.Title %}no_title{% endif %}">
 			{% if item.Title %}{{item.Title}}{% else %}{{item.Name}}{% endif %}
 			<button type='button' class='btn' data-toggle="collapse" data-target="#report_{{item.Id}}_children"><span class='caret'></span></button>
-		</h2>
+		</h{{h < 5 ? h : 5}}>
 		<div class='collapse {% if item.Title %}in{% endif %}' id='report_{{item.Id}}_children'>
             {% if item.Description %}
                 <p>{{ item.Description|raw }}</p>
             {% endif %}
+
 			<ul class='nav nav-list well'>
 				{% for item in item.children %}
-					<li>
+					<li>		
+						{% set h = h + 1 %}
 						{% include "html/report_list_item.twig" %}
+						{% set h = h - 1 %}
 					</li>
 				{% endfor %}
 			</ul>