Make panel content stylings look like Django's debug template.

6 files changed, 146 insertions, 132 deletions

diff --git a/debug_toolbar/media/debug_toolbar/toolbar.css b/debug_toolbar/media/debug_toolbar/toolbar.css
index 029148c..9da3f32 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.css
+++ b/debug_toolbar/media/debug_toolbar/toolbar.css
@@ -133,75 +133,78 @@
 }
 
 #djDebug .panelContent {
-	
 	display:none;
 	position:absolute;
 	margin:0;
-	padding:10px 20px;
-	top:2px;
+	top:0;
 	right:200px;
-	bottom:2px;
-	left:2px;
-	color:#111;
+	bottom:0;
+	left:0;
+	background-color:#f6f6f6;
+	color:#666;
 	z-index:1000000;
-	/*overflow:auto;*/
-	border-left:10px solid #c6d6da;
-	border-top:10px solid #c6d6da;
-	border-bottom:10px solid #c6d6da;
-	opacity:1.0;
-	background:transparent url(panel_bg.png) repeat left top;
-}
-
-#djDebug .panelContent .panelScrollWrap {
 	overflow:auto;
-	height:90%;
-	width:100%;
 }
 
-#djDebug .panelContent .panelScrollContent {
-	width:auto;
-	margin-right:10px;
+#djDebug .panelContent > div {
+	border-bottom:1px solid #ddd;
+	padding:10px 20px;
 }
 
-#djDebug .panelContent .boxed {
-	background-color:#fff;
-	padding:5px;
-	border:1px solid #c6d6da;
+.djDebugPanelTitle {
+	background-color:#ffc;
+	color:#666;
 }
-
-#djDebug .panelContent p a, #djDebug .panelContent dt a {
-	color:#000;
-	padding:2px 4px;
+#djDebug h3 {
+	font-size:24px;
+	font-weight:bold;
+	font-variant:small-caps;
 }
-#djDebug .panelContent p a:hover, #djDebug .panelContent dt a:hover {
-	background-color:#ffc;
+
+#djDebug h4 {
+	font-size:20px;
+	font-weight:bold;
 }
 
-#djDebug .panelContent p a, #djDebug .panelContent dd a {
-	color:#000;
+#djDebug .panelContent {
 	background-color:#eee;
-	padding:2px 4px;
-}
-#djDebug .panelContent p a:hover, #djDebug .panelContent dd a:hover {
-	color:#111;
-	background-color:#ffc;
+	color:#000;
 }
 
-#djDebug .panelContent h3 {
-	font-size:24px;
-	font-variant:small-caps;
+#djDebug .panelContent table {
+	border:1px solid #ccc;
+	border-collapse:collapse;
+	width:100%;
+	background-color:#fff;
 }
-
-#djDebug .panelContent h4 {
+#djDebug .panelContent tbody td,
+#djDebug .panelContent tbody th {
+	vertical-align:top;
+	padding:2px 3px;
+}
+#djDebug .panelContent thead th {
+	padding:1px 6px 1px 3px;
+	background:#fefefe;
+	text-align:left;
 	font-weight:normal;
-	margin-top:0.5em;
-	font-size:20px;
-	line-height:24px;
+	font-size:11px;
+	border:1px solid #ddd;
+}
+#djDebug .panelContent tbody th {
+	width:12em;
+	text-align:right;
+	color:#666;
+	padding-right:.5em;
 }
 
 #djDebug .panelContent code {
 	font-family:Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", monospace;
-	font-size:inherit;
+	font-size:12px;
+}
+/*
+#djDebug .panelContent p a:hover, #djDebug .panelContent dd a:hover {
+	color:#111;
+	background-color:#ffc;
 }
 
 #djDebug .panelContent p {
@@ -212,9 +215,7 @@
 	margin:5px 0 15px;
 	background-color:#fff;
 }
-
 #djDebug .panelContent table {
-	/*width:90%;*/
 	clear:both;
 	border:0;
 	padding:0;
@@ -250,6 +251,7 @@
 #djDebug .panelContent table tr.djDebugOdd td {
   background:#eee;
 }
+*/
 
 #djDebug .panelContent .close {
 	text-indent:-9999999px;
diff --git a/debug_toolbar/media/debug_toolbar/toolbar.js b/debug_toolbar/media/debug_toolbar/toolbar.js
index 355a66f..b20a487 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.js
+++ b/debug_toolbar/media/debug_toolbar/toolbar.js
@@ -31,7 +31,7 @@ jQuery(function($j) {
 			$j('#djDebug a.remoteCall').click(function() {
 				$j('#djDebugWindow').load(this.href, {}, function() {
 					$j('#djDebugWindow a.back').click(function() {
-						$j(this).parent().hide();
+						$j(this).parent().parent().hide();
 						return false;
 					});
 				});
diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html
index 401677a..d0f4562 100644
--- a/debug_toolbar/templates/debug_toolbar/base.html
+++ b/debug_toolbar/templates/debug_toolbar/base.html
@@ -50,13 +50,13 @@
 	{% for panel in panels %}
 		{% if panel.has_content %}
 			<div id="{{ panel.dom_id }}" class="panelContent">
-				<a href="" class="close">Close</a>
-			    <h3>{{ panel.title|safe }}</h3>
-			    <div class="panelScrollWrap">
-			        <div class="panelScrollContent">
-			            {{ panel.content|safe }}
-			        </div>
-			    </div>
+				<div class="djDebugPanelTitle">
+					<a href="" class="close">Close</a>
+					<h3>{{ panel.title|safe }}</h3>
+				</div>
+				<div class="djDebugPanelContent">
+					{{ panel.content|safe }}
+				</div>
 			</div>
 		{% endif %}
 	{% endfor %}
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html b/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
index a163b25..d26a8a3 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
@@ -1,26 +1,30 @@
-<a class="back" href="">&laquo;&nbsp;Back</a>
-<h3>SQL Explained</h3>
-<dl>
-	<dt>Executed SQL</dt>
-	<dd><pre>{{ sql|safe }}</pre></dd>
-	<dt>Time</dt>
-	<dd>{{ time }} ms</dd>
-</dl>
-<table>
-	<thead>
-		<tr>
-			{% for h in headers %}
-				<th>{{ h|upper }}</th>
-			{% endfor %}
-		</tr>
-	</thead>
-	<tbody>
-		{% for row in result %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				{% for column in row %}
-					<td>{{ column|escape }}</td>
+<div class="djDebugPanelTitle">
+	<a class="back" href="">&laquo;&nbsp;Back</a>
+	<h3>SQL Explained</h3>
+</div>
+<div class="djDebugPanelContent">
+	<dl>
+		<dt>Executed SQL</dt>
+		<dd><pre>{{ sql|safe }}</pre></dd>
+		<dt>Time</dt>
+		<dd>{{ time }} ms</dd>
+	</dl>
+	<table>
+		<thead>
+			<tr>
+				{% for h in headers %}
+					<th>{{ h|upper }}</th>
 				{% endfor %}
 			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+		</thead>
+		<tbody>
+			{% for row in result %}
+				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+					{% for column in row %}
+						<td>{{ column|escape }}</td>
+					{% endfor %}
+				</tr>
+			{% endfor %}
+		</tbody>
+	</table>
+</div>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html b/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html
index e46f41d..c5410f8 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html
@@ -1,26 +1,30 @@
-<a class="back" href="">&laquo;&nbsp;Back</a>
-<h3>SQL Profiled</h3>
-<dl>
-	<dt>Executed SQL</dt>
-	<dd><pre>{{ sql|safe }}</pre></dd>
-	<dt>Time</dt>
-	<dd>{{ time }} ms</dd>
-</dl>
-<table>
-	<thead>
-		<tr>
-			{% for h in headers %}
-				<th>{{ h|upper }}</th>
-			{% endfor %}
-		</tr>
-	</thead>
-	<tbody>
-		{% for row in result %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				{% for column in row %}
-					<td>{{ column|escape }}</td>
+<div class="djDebugPanelTitle">
+	<a class="back" href="">&laquo;&nbsp;Back</a>
+	<h3>SQL Profiled</h3>
+</div>
+<div class="djDebugPanelContent">
+	<dl>
+		<dt>Executed SQL</dt>
+		<dd><pre>{{ sql|safe }}</pre></dd>
+		<dt>Time</dt>
+		<dd>{{ time }} ms</dd>
+	</dl>
+	<table>
+		<thead>
+			<tr>
+				{% for h in headers %}
+					<th>{{ h|upper }}</th>
 				{% endfor %}
 			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+		</thead>
+		<tbody>
+			{% for row in result %}
+				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+					{% for column in row %}
+						<td>{{ column|escape }}</td>
+					{% endfor %}
+				</tr>
+			{% endfor %}
+		</tbody>
+	</table>
+</div>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql_select.html b/debug_toolbar/templates/debug_toolbar/panels/sql_select.html
index 17e7d48..4fc928d 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql_select.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql_select.html
@@ -1,30 +1,34 @@
-<a class="back" href="">&laquo;&nbsp;Back</a>
-<h3>SQL Selected</h3>
-<dl>
-	<dt>Executed SQL</dt>
-	<dd><pre>{{ sql|safe }}</pre></dd>
-	<dt>Time</dt>
-	<dd>{{ time }} ms</dd>
-</dl>
-{% if result %}
-<table>
-	<thead>
-		<tr>
-			{% for h in headers %}
-				<th>{{ h|upper }}</th>
-			{% endfor %}
-		</tr>
-	</thead>
-	<tbody>
-		{% for row in result %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				{% for column in row %}
-					<td>{{ column|escape }}</td>
+<div class="djDebugPanelTitle">
+	<a class="back" href="">&laquo;&nbsp;Back</a>
+	<h3>SQL Selected</h3>
+</div>
+<div class="djDebugPanelContent">
+	<dl>
+		<dt>Executed SQL</dt>
+		<dd><pre>{{ sql|safe }}</pre></dd>
+		<dt>Time</dt>
+		<dd>{{ time }} ms</dd>
+	</dl>
+	{% if result %}
+	<table>
+		<thead>
+			<tr>
+				{% for h in headers %}
+					<th>{{ h|upper }}</th>
 				{% endfor %}
 			</tr>
-		{% endfor %}
-	</tbody>
-</table>
-{% else %}
-	<p>Empty set</p>
-{% endif %}
+		</thead>
+		<tbody>
+			{% for row in result %}
+				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+					{% for column in row %}
+						<td>{{ column|escape }}</td>
+					{% endfor %}
+				</tr>
+			{% endfor %}
+		</tbody>
+	</table>
+	{% else %}
+		<p>Empty set</p>
+	{% endif %}
+</div>