Georg/dbot
1
0
Fork 0
forked from GitHub/dbot
Code Issues Pull Requests Projects Releases Wiki Activity

Add new "details" box to random imgur page

Browse Source 
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.
This commit is contained in:
Douglas Gardner 2013-04-16 17:47:01 +00:00
parent 1a2595aaf2
commit 9b191bc89a
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/imgurr.css
View File

@ -8,20 +8,31 @@
padding:0; padding:0;
} }
#loading { #loading, #details{
background:rgba(43,43,43,0.8); background:rgba(43,43,43,0.8);
border-bottom-right-radius:5px;
border-top-right-radius:5px;
color:#85bf25; color:#85bf25;
font-family:sans-serif; font-family:sans-serif;
font-size:12px; font-size:12px;
font-weight:700; font-weight:700;
left:0;
padding:20px; padding:20px;
position:absolute; position:absolute;
top:50px; 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 { html,body {
background-color:#121211; background-color:#121211;
height:100%; height:100%;

7
views/imgur/imgurr.jade
View File

@ -9,13 +9,17 @@ html(lang='en')
var count = 0; var count = 0;
function getNewImage() { function getNewImage() {
count += 1; count += 1;
$('#details').hide();
$('#loading').text('Loading image ' + count + '...'); $('#loading').text('Loading image ' + count + '...');
$('#loading').css('font-size', ((count * 0.03) + 12)); $('#loading').css('font-size', ((count * 0.03) + 12));
$('#loading').show();
$('#image').load(function(){}); $('#image').load(function(){});
$.get("/api/imgur/getRandomImage", function(d) { $.get("/api/imgur/getRandomImage", function(d) {
$('#image').attr('src', d.data[0]); $('#image').attr('src', d.data[0]);
$.get("/api/imgur/getImageInfoString", { 'slug': d.data[1] }, function(info) { $.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");
}, "json"); }, "json");
} }
@ -23,5 +27,6 @@ html(lang='en')
$(document).on('keydown', function(e){(e.which==32)&&(getNewImage()) }); $(document).on('keydown', function(e){(e.which==32)&&(getNewImage()) });
body body
div#loading Loading Image div#loading Loading Image
div#details Press [SPACE] to load a new image
div#container div#container
img#image img#image