made reprioritize links look better

diff --git a/index.html b/index.html
index db50f39..806ce88 100644 (file)
--- a/index.html
+++ b/index.html
@@ -43,7 +43,7 @@
     <h4>Queued tasks</h4>
     <div>Jason hasn't started on these yet, so you can change them if you want. At some point you'll also be able to prioritize them.</div>
     <!--~queue_row start~-->
-    <div class="task_link">~client.html~ <a href="tasks?tasks_edit_id=~task_id~&amp;bump=top">^^</a> <a href="tasks?tasks_edit_id=~task_id~&amp;bump=up">^</a> <a href="tasks?tasks_edit_id=~task_id~&amp;bump=down">v</a> <a href="tasks?tasks_edit_id=~task_id~&amp;bump=bottom">vv</a> <a href="tasks?tasks_id=~task_id~">#~task_id~: ~task_title.html~</a> (~task_price.money~)</div>
+    <div class="task_link"><div class="updown"><div class="updown_links"> <a href="tasks?tasks_edit_id=~task_id~&amp;bump=down">later</a> <a href="tasks?tasks_edit_id=~task_id~&amp;bump=up">sooner</a> <a href="tasks?tasks_edit_id=~task_id~&amp;bump=bottom">last</a> <a href="tasks?tasks_edit_id=~task_id~&amp;bump=top">first</a></div></div> ~client.html~ <a href="tasks?tasks_id=~task_id~">#~task_id~: ~task_title.html~</a> (~task_price.money~)</div>
     <!--~end~-->
   <!--~end~-->
 

diff --git a/tasks.css b/tasks.css
index c117feb..6adaf9c 100644 (file)
--- a/tasks.css
+++ b/tasks.css
@@ -3,7 +3,9 @@
        margin: 15px 0px 5px;
 }
 
-.task_link { padding-top: 8px; }
+.task_link {
+       padding-top: 8px;
+}
 
 #badges {
        margin-top: 30px;
@@ -16,3 +18,28 @@
        font-size: 10px;
        text-align: center;
 }
+
+.updown {
+       width: 14px;
+       height: 18px;
+       position: relative;
+       background: transparent url(images/updown.png);
+       display: inline-block;
+       vertical-align: bottom;
+}
+
+.updown_links {
+       position: absolute;
+       top: -7px;
+       right: -10000px;
+       width: 200px;
+       height: 20px;
+       border: 1px solid black;
+       background: #fff url(images/updown.png) right 50% no-repeat;
+       padding: 5px 20px 5px 5px;
+       text-align: right;
+}
+
+.updown:hover .updown_links {
+       right: -1px;
+}