Added the arrow pointer in

14 years ago · 9e046ba8eb
parent 315333d8eb
commit 9e046ba8eb
4 changed files with 18 additions and 1 deletions
--- a/TODO.md
+++ b/TODO.md
@ -7,6 +7,7 @@
 * Add file extensions ourselves to push state
 * Proper markdown highlighting
 * Better about page text
+* Collapse CSS rules to get rid of the #key .box1 nonsense


 # shared version only
--- a/static/application.css
+++ b/static/application.css
@ -45,9 +45,9 @@ textarea {
 }

 #key .box2 {
-	padding: 5px;
 	background: #08323c;
 	font-size: 0px;
+	padding: 0px 5px;
 }

 #key .box1 a.logo, #key .box1 a.logo:visited {
@ -66,6 +66,7 @@ textarea {
 	width: 32px;
 	height: 37px;
 	display: inline-block;
+	position: relative;
 }

 #key .box2 .function.enabled:hover {
@ -73,6 +74,18 @@ textarea {
 	cursor: pointer;
 }

+#pointer {
+	display: block;
+	height: 5px;
+	width: 10px;
+	background: url(hover-dropdown-tip.png);
+	bottom: 0px;
+	position: absolute;
+	margin: auto;
+	left: 0px;
+	right: 0px;
+}
+
 #key .box3 {
 	background: #173e48;
 	font-family: Helvetica, sans-serif;
--- a/static/application.js
+++ b/static/application.js
@ -254,10 +254,12 @@ haste.prototype.configureButton = function(options) {
    $('#key .box3 .label').text(options.label);
    $('#key .box3 .shortcut').text(options.shortcutDescription || '');
    $('#key .box3').show();
+    $(this).append($('#pointer').remove().show());
  });
  // Hide the label
  options.$where.mouseleave(function(evt) {
    $('#key .box3').hide();
+    $('#pointer').hide();
  });
 };

--- a/static/index.html
+++ b/static/index.html
@ -45,6 +45,7 @@
 	<body>

 		<div id="key">
+		  <div id="pointer" style="display:none;"></div>
 			<div class="box1">
 				<a href="/about" class="logo"></a>
 			</div>