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

Convert history to list; add toggle for scrollbars

Browse Source 
* Added function to display message
* Added ``s`` hotkey to toggle the scrollbar
* Added ``max-width``
This commit is contained in:
Douglas Gardner 2013-04-17 20:55:34 +00:00
parent 46932f458c
commit bbece26213
2 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/imgurr.css
View File

@ -2,11 +2,23 @@
text-align:center; text-align:center;
} }
body.crop {
overflow:hidden;
}
#history {
padding:0;
margin:0;
}
#container,#image { #container,#image {
margin:0; margin:0;
max-height:100%; max-height:100%;
max-width:100%;
padding:0; padding:0;
} }
a {
color:inherit;
}
#details { #details {
display:none; display:none;
@ -18,7 +30,7 @@
top:25px; top:25px;
} }
#history a { #history li {
left:25px; left:25px;
text-align:center; text-align:center;
width:168px; width:168px;
@ -26,7 +38,7 @@
margin-bottom:15px; margin-bottom:15px;
} }
#history a,#loading { #history li,#loading {
font-family:monospace; font-family:monospace;
font-size:10px; font-size:10px;
padding:10px; padding:10px;
@ -41,7 +53,7 @@
top:95px; top:95px;
} }
#loading,#details,#history a { #loading,#details,#history li {
background:rgba(43,43,43,0.8); background:rgba(43,43,43,0.8);
border-radius:5px; border-radius:5px;
color:#85bf25; color:#85bf25;
@ -56,6 +68,8 @@ html,body {
height:100%; height:100%;
margin:0; margin:0;
padding:0; padding:0;
border:0;
overflow:auto;
} }
#history { #history {
@ -64,7 +78,7 @@ html,body {
max-height:210px; max-height:210px;
overflow:hidden; overflow:hidden;
} }
#history a { #history li {
margin-bottom:10px; margin-bottom:10px;
opacity:0.1; /* won't display anyway due to #history max height */ opacity:0.1; /* won't display anyway due to #history max height */
} }
@ -72,18 +86,18 @@ html,body {
#details { #details {
font-family:sans-serif; font-family:sans-serif;
} }
#history a:hover, #history a:nth-of-type(1) { #history li:hover, #history li:nth-of-type(1) {
opacity:1 !important; opacity:1 !important;
} }
#history a:nth-of-type(2) { #history li:nth-of-type(2) {
opacity:0.8; opacity:0.8;
} }
#history a:nth-of-type(3) { #history li:nth-of-type(3) {
opacity:0.6; opacity:0.6;
} }
#history a:nth-of-type(4) { #history li:nth-of-type(4) {
opacity:0.4; opacity:0.4;
} }
#history a:nth-of-type(5) { #history li:nth-of-type(5) {
opacity:0.2; opacity:0.2;
} }

21
views/imgur/imgurr.jade
View File

@ -7,6 +7,9 @@ html(lang='en')
title random imgur title random imgur
script script
var count = 0; var count = 0;
function giveMessage(msg) {
$('<li>'+msg+'</li>').prependTo('#history').hide().slideDown();
}
function getNewImage() { function getNewImage() {
count += 1; count += 1;
$('#loading').fadeIn(); $('#loading').fadeIn();
@ -17,7 +20,7 @@ html(lang='en')
$.get("/api/imgur/getRandomImage", function(d) { $.get("/api/imgur/getRandomImage", function(d) {
$('#image').attr('src', d.data[0]); $('#image').attr('src', d.data[0]);
$('#details').text("Fetching info..."); $('#details').text("Fetching info...");
$('<a href="' + d.data[0] + '">' + d.data[0] + '</a>').prependTo('#history').hide().slideDown(); giveMessage('<a href="' + d.data[0] + '">' + d.data[0] + '</a>');
$.get("/api/imgur/getImageInfoString", { 'slug': d.data[1] }, function(info) { $.get("/api/imgur/getImageInfoString", { 'slug': d.data[1] }, function(info) {
if(info.data[0].indexOf('undefined') == -1) { if(info.data[0].indexOf('undefined') == -1) {
$("#details").text(count + ': ' + info.data[0]); $("#details").text(count + ': ' + info.data[0]);
@ -30,11 +33,21 @@ html(lang='en')
}, "json"); }, "json");
} }
$(getNewImage()); $(getNewImage());
$(document).on('keydown', function(e){(e.which==32)&&(getNewImage()) }); $(document).on('keydown', function(e){
switch(e.which){
case 13: // enter
case 32: // space
getNewImage();
break;
case 83: // s
$('body').toggleClass('crop');
giveMessage("Toggled scrollbars.")
};
});
body body
div#loading Loading image 1... div#loading Loading image 1...
div#details Press [SPACE] to load a new image div#details Press [SPACE] to load a new image
div#history ul#history
a Press [SPACE] for next li Press [SPACE] for next
div#container div#container
img#image img#image