From 9b191bc89a4081740a6e59a885908c6150e2a35d Mon Sep 17 00:00:00 2001
From: Douglas Gardner <douglas@chippy.ch>
Date: Tue, 16 Apr 2013 17:47:01 +0000
Subject: [PATCH] Add new "details" box to random imgur page

This commit adds a new box to the imgur page, separating the
"Loading..." box with a new "details" box, which contains the
information found via the API.

The loading box appears on the left, and disappears when an image is
loaded, to be replaced with a box on the right.

API operations, such as a "report" or "submit to gallery" option, could
appear below the current right-aligned box, in a smaller font.

I'm undecided as to whether this commit is an improvement or not.
---
 public/imgurr.css       | 19 +++++++++++++++----
 views/imgur/imgurr.jade |  7 ++++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/public/imgurr.css b/public/imgurr.css
index 7d54561..daaf1d7 100644
--- a/public/imgurr.css
+++ b/public/imgurr.css
@@ -8,20 +8,31 @@
   padding:0;
 }
 
-#loading {
+#loading, #details{
   background:rgba(43,43,43,0.8);
-  border-bottom-right-radius:5px;
-  border-top-right-radius:5px;
   color:#85bf25;
   font-family:sans-serif;
   font-size:12px;
   font-weight:700;
-  left:0;
   padding:20px;
   position:absolute;
   top:50px;
 }
 
+#details {
+    right:0;
+    text-align:right;
+    border-bottom-left-radius:5px;
+    border-top-left-radius:5px
+    display:none;
+}
+
+#loading {
+    left:0;
+    border-bottom-right-radius:5px;
+    border-top-right-radius:5px;
+}
+
 html,body {
   background-color:#121211;
   height:100%;
diff --git a/views/imgur/imgurr.jade b/views/imgur/imgurr.jade
index 2271135..2818bc0 100644
--- a/views/imgur/imgurr.jade
+++ b/views/imgur/imgurr.jade
@@ -9,13 +9,17 @@ html(lang='en')
       var count = 0;
       function getNewImage() {
         count += 1;
+        $('#details').hide();
         $('#loading').text('Loading image ' + count + '...');
         $('#loading').css('font-size', ((count * 0.03) + 12));
+        $('#loading').show();
         $('#image').load(function(){});
         $.get("/api/imgur/getRandomImage", function(d) {
           $('#image').attr('src', d.data[0]);
           $.get("/api/imgur/getImageInfoString", { 'slug': d.data[1] }, function(info) {
-              $("#loading").text(count + ': ' + info.data[0]);
+              $("#details").text(count + ': ' + info.data[0]);
+              $('#details').show();
+              $('#loading').hide();
           }, "json");
         }, "json");
       }
@@ -23,5 +27,6 @@ html(lang='en')
       $(document).on('keydown', function(e){(e.which==32)&&(getNewImage()) });
   body
     div#loading Loading Image
+    div#details Press [SPACE] to load a new image
     div#container
       img#image