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