From f60a5e3b048728240bb4d85dd1fb5e2c9ea6fa2d Mon Sep 17 00:00:00 2001
From: Idan Gazit
Date: Wed, 12 Aug 2009 17:04:54 +0300
Subject: panel width, content boxing, safe scrolling

---
 debug_toolbar/templates/debug_toolbar/base.html    |   6 +-
 .../templates/debug_toolbar/panels/headers.html    |  34 ++--
 .../templates/debug_toolbar/panels/logger.html     |  51 +++---
 .../debug_toolbar/panels/request_vars.html         | 187 +++++++++++----------
 .../debug_toolbar/panels/settings_vars.html        |  34 ++--
 .../templates/debug_toolbar/panels/signals.html    |  36 ++--
 .../templates/debug_toolbar/panels/sql.html        |  99 +++++------
 .../debug_toolbar/panels/template_source.html      |  12 +-
 .../templates/debug_toolbar/panels/templates.html  |  62 ++++---
 .../templates/debug_toolbar/panels/timer.html      |  42 ++---
 10 files changed, 301 insertions(+), 262 deletions(-)

(limited to 'debug_toolbar/templates')

diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html
index 5f4b7e7..a44d31e 100644
--- a/debug_toolbar/templates/debug_toolbar/base.html
+++ b/debug_toolbar/templates/debug_toolbar/base.html
@@ -54,8 +54,10 @@
 			<div id="{{ panel.dom_id }}" class="panelContent">
 				<a href="" class="close">Close</a>
 			    <h3>{{ panel.title|safe }}</h3>
-			    <div class="panelScroll">
-					{{ panel.content|safe }}
+			    <div class="panelScrollWrap">
+			        <div class="panelScrollContent">
+			            {{ panel.content|safe }}
+			        </div>
 			    </div>
 			</div>
 		{% endif %}
diff --git a/debug_toolbar/templates/debug_toolbar/panels/headers.html b/debug_toolbar/templates/debug_toolbar/panels/headers.html
index b14a50c..a6b6b59 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/headers.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/headers.html
@@ -1,16 +1,18 @@
-<table>
-	<thead>
-		<tr>
-			<th>Key</th>
-			<th>Value</th>
-		</tr>
-	</thead>
-	<tbody>
-		{% for key, value in headers.iteritems %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				<td>{{ key|escape }}</td>
-				<td>{{ value|escape }}</td>
-			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+<div class="boxed">
+    <table>
+    	<thead>
+    		<tr>
+    			<th>Key</th>
+    			<th>Value</th>
+    		</tr>
+    	</thead>
+    	<tbody>
+    		{% for key, value in headers.iteritems %}
+    			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    				<td>{{ key|escape }}</td>
+    				<td>{{ value|escape }}</td>
+    			</tr>
+    		{% endfor %}
+    	</tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/logger.html b/debug_toolbar/templates/debug_toolbar/panels/logger.html
index e6ce945..2bfab05 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/logger.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/logger.html
@@ -1,25 +1,26 @@
-{% if records %}
-	<table>
-		<thead>
-			<tr>
-				<th>Level</th>
-				<th>Time</th>
-				<th>Message</th>
-				<th>Location</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for record in records %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					<td>{{ record.level }}</td>
-					<td>{{ record.time|date:"h:i:s m/d/Y" }}</td>
-					<td>{{ record.message }}</td>
-					<td>{{ record.file }}:{{ record.line }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>No messages logged.</p>
-{% endif %}
-
+<div class="boxed">
+    {% if records %}
+    	<table>
+    		<thead>
+    			<tr>
+    				<th>Level</th>
+    				<th>Time</th>
+    				<th>Message</th>
+    				<th>Location</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for record in records %}
+    				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    					<td>{{ record.level }}</td>
+    					<td>{{ record.time|date:"h:i:s m/d/Y" }}</td>
+    					<td>{{ record.message }}</td>
+    					<td>{{ record.file }}:{{ record.line }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>No messages logged.</p>
+    {% endif %}
+</div>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/request_vars.html b/debug_toolbar/templates/debug_toolbar/panels/request_vars.html
index a65d0a5..d8c81ba 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/request_vars.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/request_vars.html
@@ -1,92 +1,103 @@
 <h4>COOKIES Variables</h4>
-{% if cookies %}
-	<table>
-		<colgroup>
-			<col style="width:20%"/>
-			<col/>
-		</colgroup>
-		<thead>
-			<tr>
-				<th>Key</th>
-				<th>Value</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for key, value in cookies %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					<td>{{ key|escape }}</td>
-					<td>{{ value|escape }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>None</p>
-{% endif %}
+<div class="boxed">
+    {% if cookies %}
+    	<table>
+    		<colgroup>
+    			<col style="width:20%"/>
+    			<col/>
+    		</colgroup>
+    		<thead>
+    			<tr>
+    				<th>Key</th>
+    				<th>Value</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for key, value in cookies %}
+    				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    					<td>{{ key|escape }}</td>
+    					<td>{{ value|escape }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
+
 <h4>SESSION Variables</h4>
-{% if session %}
-	<table>
-		<colgroup>
-			<col style="width:20%"/>
-			<col/>
-		</colgroup>
-		<thead>
-			<tr>
-				<th>Key</th>
-				<th>Value</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for key, value in session %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					<td>{{ key|escape }}</td>
-					<td>{{ value|escape }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>None</p>
-{% endif %}
+<div class="boxed">
+    {% if session %}
+    	<table>
+    		<colgroup>
+    			<col style="width:20%"/>
+    			<col/>
+    		</colgroup>
+    		<thead>
+    			<tr>
+    				<th>Key</th>
+    				<th>Value</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for key, value in session %}
+    				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    					<td>{{ key|escape }}</td>
+    					<td>{{ value|escape }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
+
 <h4>GET Variables</h4>
-{% if get %}
-	<table>
-		<thead>
-			<tr>
-				<th>Key</th>
-				<th>Value</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for key, value in get %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					<td>{{ key|escape }}</td>
-					<td>{{ value|join:", "|escape }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>None</p>
-{% endif %}
+<div class="boxed">
+    {% if get %}
+    	<table>
+    		<thead>
+    			<tr>
+    				<th>Key</th>
+    				<th>Value</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for key, value in get %}
+    				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    					<td>{{ key|escape }}</td>
+    					<td>{{ value|join:", "|escape }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
+
 <h4>POST Variables</h4>
-{% if post %}
-	<table>
-		<thead>
-			<tr>
-				<th>Key</th>
-				<th>Value</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for key, value in post %}
-				<tr class="{% cycle 'row1' 'row2' %}">
-					<td>{{ key|escape }}</td>
-					<td>{{ value|join:", "|escape }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>None</p>
-{% endif %}
+<div class="boxed">
+    {% if post %}
+    	<table>
+    		<thead>
+    			<tr>
+    				<th>Key</th>
+    				<th>Value</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for key, value in post %}
+    				<tr class="{% cycle 'row1' 'row2' %}">
+    					<td>{{ key|escape }}</td>
+    					<td>{{ value|join:", "|escape }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html b/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html
index c53ee4d..8c65700 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html
@@ -1,16 +1,18 @@
-<table>
-	<thead>
-		<tr>
-			<th>Setting</th>
-			<th>Value</th>
-		</tr>
-	</thead>
-	<tbody>
-		{% for var in settings.items|dictsort:"0" %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				<td>{{ var.0 }}</td>
-				<td><code>{{ var.1|pprint }}</code></td>
-			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+<div class="boxed">
+    <table>
+    	<thead>
+    		<tr>
+    			<th>Setting</th>
+    			<th>Value</th>
+    		</tr>
+    	</thead>
+    	<tbody>
+    		{% for var in settings.items|dictsort:"0" %}
+    			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    				<td>{{ var.0 }}</td>
+    				<td><code>{{ var.1|pprint }}</code></td>
+    			</tr>
+    		{% endfor %}
+    	</tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/signals.html b/debug_toolbar/templates/debug_toolbar/panels/signals.html
index 7875700..c7a7733 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/signals.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/signals.html
@@ -1,18 +1,20 @@
-<table>
-    <thead>
-        <tr>
-            <th>Signal</th>
-            <th>Providing Args</th>
-            <th>Receivers</th>
-        </tr>
-    </thead>
-    <tbody>
-        {% for name, signal, receivers in signals %}
-            <tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-                <td>{{ name|escape }}</td>
-                <td>{{ signal.providing_args|join:", " }}</td>
-                <td>{{ receivers|join:", " }}</td>
+<div class="boxed">
+    <table>
+        <thead>
+            <tr>
+                <th>Signal</th>
+                <th>Providing Args</th>
+                <th>Receivers</th>
             </tr>
-        {% endfor %}
-    </tbody>
-</table>
+        </thead>
+        <tbody>
+            {% for name, signal, receivers in signals %}
+                <tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+                    <td>{{ name|escape }}</td>
+                    <td>{{ signal.providing_args|join:", " }}</td>
+                    <td>{{ receivers|join:", " }}</td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html
index 717d54d..bb805e6 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql.html
@@ -1,48 +1,51 @@
-<table>
-	<thead>
-		<tr>
-			<th>Time&nbsp;(ms)</th>
-			<th>Action</th>
-			<th>Stacktrace</th>
-			<th>Query</th>
-		</tr>
-	</thead>
-	<tbody>
-		{% for query in queries %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				<td>{{ query.time|floatformat:"2" }}</td>
-				<td>
-				{% if query.params %}
-					<a class="remoteCall" href="/__debug__/sql_select/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">SELECT</a>
-					<a class="remoteCall" href="/__debug__/sql_explain/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">EXPLAIN</a>
-					{% if is_mysql %}
-						<a class="remoteCall" href="/__debug__/sql_profile/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">PROFILE</a>
-					{% endif %}
-				{% endif %}
-				</td>
-				<td>
-					{% if query.stacktrace %}
-					<div class="djSQLShowStacktraceDiv"><a class="djSQLShowStacktrace" href="#">Toggle Stacktrace</a></div>
-					<div class="djSQLHideStacktraceDiv" style="display:none;">
-						<table>
-							<tr>
-								<th>Line</th>
-								<th>Method</th>
-								<th>File</th>
-							</tr>
-							{% for file, line, method in query.stacktrace %}
-								<tr>
-									<td>{{ line }}</td>
-									<td><pre>{{ method|escape }}<pre></td>
-									<td><pre>{{ file|escape }}</pre></td>
-								</tr>
-							{% endfor %}
-						</table>
-					</div>
-					{% endif %}
-				</td>
-				<td class="syntax">{{ query.sql|safe }}</td>
-			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+<div class="boxed">
+    <table>
+    	<thead>
+    		<tr>
+    			<th>Time&nbsp;(ms)</th>
+    			<th>Action</th>
+    			<th>Stacktrace</th>
+    			<th>Query</th>
+    		</tr>
+    	</thead>
+    	<tbody>
+    		{% for query in queries %}
+    			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    				<td>{{ query.time|floatformat:"2" }}</td>
+    				<td>
+    				{% if query.params %}
+    					<a class="remoteCall" href="/__debug__/sql_select/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">SELECT</a>
+    					<a class="remoteCall" href="/__debug__/sql_explain/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">EXPLAIN</a>
+    					{% if is_mysql %}
+    						<a class="remoteCall" href="/__debug__/sql_profile/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">PROFILE</a>
+    					{% endif %}
+    				{% endif %}
+    				</td>
+    				<td>
+    					{% if query.stacktrace %}
+    					<div class="djSQLShowStacktraceDiv"><a class="djSQLShowStacktrace" href="#">Toggle Stacktrace</a></div>
+    					<div class="djSQLHideStacktraceDiv" style="display:none;">
+    						<table>
+    							<tr>
+    								<th>Line</th>
+    								<th>Method</th>
+    								<th>File</th>
+    							</tr>
+    							{% for file, line, method in query.stacktrace %}
+    								<tr>
+    									<td>{{ line }}</td>
+    									<td><pre>{{ method|escape }}<pre></td>
+    									<td><pre>{{ file|escape }}</pre></td>
+    								</tr>
+    							{% endfor %}
+    						</table>
+    					</div>
+    					{% endif %}
+    				</td>
+    				<td class="syntax">{{ query.sql|safe }}</td>
+    			</tr>
+    		{% endfor %}
+    	</tbody>
+    </table>
+</div>
+
diff --git a/debug_toolbar/templates/debug_toolbar/panels/template_source.html b/debug_toolbar/templates/debug_toolbar/panels/template_source.html
index 572522b..2094a3f 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/template_source.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/template_source.html
@@ -1,3 +1,9 @@
-<a class="back" href="">&laquo;&nbsp;Back</a>
-<h3>Template Source: <samp>{{ template_name }}</samp></h3>
-{{ source }}
+<a class="close back" href="">Back</a>
+<h3>Template Source: <code>{{ template_name }}</code></h3>
+<div class="panelScrollWrap">
+    <div class="panelScrollContent">
+        <div class="boxed">
+            {{ source }}
+        </div>
+    </div>
+</div>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/templates.html b/debug_toolbar/templates/debug_toolbar/panels/templates.html
index 01240f7..622321f 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/templates.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/templates.html
@@ -1,4 +1,5 @@
 <h4>Template path{{ template_dirs|length|pluralize }}</h4>
+<div class="boxed">
 {% if template_dirs %}
 	<ol>
 	{% for template in template_dirs %}
@@ -8,32 +9,39 @@
 {% else %}
 	<p>None</p>
 {% endif %}
+</div>
+
 <h4>Template{{ templates|length|pluralize }}</h4>
-{% if templates %}
-<dl>
-{% for template in templates %}
-	<dt><strong><a class="remoteCall" href="/__debug__/template_source/?template={{ template.template.name }}">{{ template.template.name|addslashes }}</a></strong></dt>
-	<dd><samp>{{ template.template.origin_name|addslashes }}</samp></dd>
-	<dd>
-		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
-		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ template.context }}</pre></div>
-	</dd>
-{% endfor %}
-</dl>
-{% else %}
-	<p>None</p>
-{% endif %}
+<div class="boxed">
+    {% if templates %}
+    <dl>
+    {% for template in templates %}
+    	<dt><strong><a class="remoteCall" href="/__debug__/template_source/?template={{ template.template.name }}">{{ template.template.name|addslashes }}</a></strong></dt>
+    	<dd><samp>{{ template.template.origin_name|addslashes }}</samp></dd>
+    	<dd>
+    		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
+    		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ template.context }}</pre></div>
+    	</dd>
+    {% endfor %}
+    </dl>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
+
 <h4>Context processor{{ context_processors|length|pluralize }}</h4>
-{% if context_processors %}
-<dl>
-{% for key, value in context_processors.iteritems %}
-	<dt><strong>{{ key|escape }}</strong></dt>
-	<dd>
-		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
-		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ value|escape }}</pre></div>
-	</dd>
-{% endfor %}
-</dl>
-{% else %}
-	<p>None</p>
-{% endif %}
+<div class="boxed">
+    {% if context_processors %}
+    <dl>
+    {% for key, value in context_processors.iteritems %}
+    	<dt><strong>{{ key|escape }}</strong></dt>
+    	<dd>
+    		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
+    		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ value|escape }}</pre></div>
+    	</dd>
+    {% endfor %}
+    </dl>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/timer.html b/debug_toolbar/templates/debug_toolbar/panels/timer.html
index 39e9eb1..ba801b2 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/timer.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/timer.html
@@ -1,20 +1,22 @@
-<table>
-	<colgroup>
-		<col style="width:20%"/>
-		<col/>
-	</colgroup>
-	<thead>
-		<tr>
-			<th>Key</th>
-			<th>Value</th>
-		</tr>
-	</thead>
-	<tbody>
-		{% for key, value in rows %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				<td>{{ key|escape }}</td>
-				<td>{{ value|escape }}</td>
-			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+<div class="boxed">
+    <table>
+    	<colgroup>
+    		<col style="width:20%"/>
+    		<col/>
+    	</colgroup>
+    	<thead>
+    		<tr>
+    			<th>Key</th>
+    			<th>Value</th>
+    		</tr>
+    	</thead>
+    	<tbody>
+    		{% for key, value in rows %}
+    			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    				<td>{{ key|escape }}</td>
+    				<td>{{ value|escape }}</td>
+    			</tr>
+    		{% endfor %}
+    	</tbody>
+    </table>
+</div>
-- 
cgit v1.2.3