toolbar restyling, switched to non-minified css/js

4 files changed, 88 insertions, 27 deletions

diff --git a/debug_toolbar/media/debug_toolbar/indicator.png b/debug_toolbar/media/debug_toolbar/indicator.png
new file mode 100644
index 0000000..a21fc6e
--- /dev/null
+++ b/debug_toolbar/media/debug_toolbar/indicator.png
diff --git a/debug_toolbar/media/debug_toolbar/toolbar.css b/debug_toolbar/media/debug_toolbar/toolbar.css
index 275a776..b6e3f5d 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.css
+++ b/debug_toolbar/media/debug_toolbar/toolbar.css
@@ -5,17 +5,13 @@
     padding: 0;
     position: static;
     text-align: left;
-}
-#djDebug a {
-    color: #fff;
-}
-#djDebug a:hover {
-    color: #900;
+	font-family: Cambria, Georgia, serif;
+	font-size: 16px;
 }
 
 #djDebugToolbar {
     background: #111;
-    width: 150px;
+    width: 200px;
     z-index: 100000000;
     position:absolute;
     top:0;
@@ -28,23 +24,38 @@
     color:#999;
 }
 
+
+
 #djDebugToolbarHandle {
     position:absolute;
     background: #111;
     top:0;
-    bottom:0;
     right:0;
+    height: 25px;
+    width: 25px;
     z-index: 100000000;
 }
 
 #djDebugToolbarHandle ul li {
     list-style-type:none;
-    padding: 3px;
+    padding: 0;
 }
 
 #djDebugToolbarHandle ul li a {
-    font-size: 16px;
-    font-weight: bold;
+	display: block;
+	width: 100%;
+	font-size: 16px;
+	line-height: 25px;
+	font-weight: bold;
+	text-decoration: none;
+	color: #daf7ff;
+	text-align: center;
+}
+
+#djDebugToolbarHandle ul li a:hover {
+	color: #111;
+	background-color: #9fbb54;
+	border: 1px solid #111;
 }
 
 #djDebugToolbar ul {
@@ -57,24 +68,58 @@
     border-bottom: 1px solid #222;
     color: #fff;
     display: block;
-    font-size: 11px;
     font-weight: bold;
     float: none;
     margin: 0;
     padding: 0;
-    padding: 8px;
     position: relative;
     width: auto;
 }
 
-#djDebugToolbar li:hover {
-    background: #222;
+
+
+#djDebugToolbar li>a,
+#djDebugToolbar li>div.contentless  {
+	font-weight: normal;
+	font-style: normal;
+	font-variant: small-caps;
+	text-decoration: none;
+	display: block;
+	font-size: 18px;
+	padding: 10px 10px 5px 25px;
+	color: #fff;
 }
 
-#djDebugToolbar li:hover a {
-    color: #fff;
+#djDebugToolbar li a:hover {
+	color: #111;
+	background-color: #c6d6da;
+	border-right: 10px solid #fff;
 }
 
+#djDebugToolbar li.active {
+	background-image: url(indicator.png);
+	background-repeat: no-repeat;
+	background-position: left center;
+}
+
+#djDebugToolbar li.active a:hover {
+	background-color: #111;
+	background-image: inherit;
+	background-position: inherit;
+	background-repeat: inherit;
+	color: #b36a60;
+	border: none;
+}
+
+#djDebugToolbar li small {
+	font-size: 12px;
+	color: #999;
+	font-style: italic;
+	text-decoration: none;
+	font-variant: normal;
+}
+
+
 #djDebugToolbar #djDebugButton {
     color: #92ef3f;
 }
@@ -88,19 +133,24 @@
 }
 
 #djDebug .panelContent {
-    background: #222;
+    background: #daf7ff;
     display: none;
     position: absolute;
     margin: 0;
     padding: 10px;
-    top: 0;
+    top: 15px;
     width: auto;
-    left: 0px;
-    right: 150px;
-    bottom: 0;
-    color: #fff;
+    max-width: 700px;
+    min-width: 500px;
+    right: 200px;
+    bottom: 15px;
+    color: #111;
     z-index: 1000000;
     overflow: auto;
+	border-left: 10px solid #c6d6da;
+	border-top: 10px solid #c6d6da;
+	border-bottom: 10px solid #c6d6da;
+	opacity: 0.9;
 }
 
 #djDebug .panelContent p a, #djDebug .panelContent dl a {
diff --git a/debug_toolbar/media/debug_toolbar/toolbar.js b/debug_toolbar/media/debug_toolbar/toolbar.js
index 40e1a58..cde67a6 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.js
+++ b/debug_toolbar/media/debug_toolbar/toolbar.js
@@ -14,10 +14,13 @@ jQuery(function($j) {
 				current = $j('#djDebug #' + this.className);
 				if (current.is(':visible')) {
 					$j(document).trigger('close.djDebug');
+					$j(this).parent().removeClass("active");
 				} else {
 					$j('.panelContent').hide();
 					current.show();
 					$j.djDebug.open();
+					$j('#djDebugToolbar li').removeClass("active");
+					$j(this).parent().addClass("active");
 				}
 				return false;
 			});
@@ -77,6 +80,7 @@ jQuery(function($j) {
 		},
 		hide_toolbar: function(setCookie) {
 			$j('#djDebugToolbar').hide("fast");
+			$j('#djDebugToolbar li').removeClass("active");
 			$j(document).trigger('close.djDebug');
 			$j('#djDebugToolbarHandle').show();
 			if (setCookie) {
diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html
index e3681b2..f6a508d 100644
--- a/debug_toolbar/templates/debug_toolbar/base.html
+++ b/debug_toolbar/templates/debug_toolbar/base.html
@@ -7,13 +7,14 @@
 		document.write(unescape('%3Cscript src="' + jquery_url + '" type="text/javascript"%3E%3C/script%3E'));
 	}
 </script>
-<script type="text/javascript" src="{{ BASE_URL }}/__debug__/m/toolbar.min.js"></script>
+<script type="text/javascript" src="{{ BASE_URL }}/__debug__/m/jquery.cookie.js"></script>
+<script type="text/javascript" src="{{ BASE_URL }}/__debug__/m/toolbar.js"></script>
 <script type="text/javascript" charset="utf-8">
 	// Now that jQuery is done loading, put the '$' variable back to what it was...
 	var $ = _$;
 </script>
 <style type="text/css">
-	@import url({{ BASE_URL }}/__debug__/m/toolbar.min.css);
+	@import url({{ BASE_URL }}/__debug__/m/toolbar.css);
 </style>
 <div id="djDebug">
 	<div style="display: none;" id="djDebugToolbar">
@@ -26,13 +27,19 @@
 			{% for panel in panels %}
 				<li>
 					{% if panel.has_content %}
-						<a href="{{ panel.url|default:"#" }}" title="{{ panel.title }}" class="{{ panel.dom_id }}">{{ panel.title }}</a>
+						<a href="{{ panel.url|default:"#" }}" title="{{ panel.title }}" class="{{ panel.dom_id }}">
 					{% else %}
-						{{ panel.title }}
+					    <div class="contentless">
 					{% endif %}
+					{{ panel.title }}
 					{% with panel.subtitle as subtitle %}
 						{% if subtitle %}<br><small>{{ subtitle }}</small>{% endif %}
 					{% endwith %}
+					{% if panel.has_content %}
+						</a>
+					{% else %}
+					    </div>
+					{% endif %}
 				</li>
 			{% endfor %}
 		</ul>