From 4c26a0fc3a61394ecad0e88d2edafd81728f2dfd Mon Sep 17 00:00:00 2001 From: Douglas Gardner Date: Wed, 17 Apr 2013 20:02:36 +0000 Subject: [PATCH 1/4] add history --- public/imgurr.css | 45 ++++++++++++++++++++++++++++++++++++----- views/imgur/imgurr.jade | 22 ++++++++++---------- 2 files changed, 51 insertions(+), 16 deletions(-) diff --git a/public/imgurr.css b/public/imgurr.css index 650a02e..0ec21f2 100644 --- a/public/imgurr.css +++ b/public/imgurr.css @@ -18,31 +18,36 @@ top:25px; } -#link { +#history a { left:25px; text-align:center; width:168px; font-family:monospace + margin-bottom:15px; } -#link,#loading { +#history a,#loading { font-family:monospace; font-size:10px; padding:10px; - top:95px; + display:block; } + #loading { font-weight:500; left:220px; min-width:95px; + top:95px; } -#loading,#details,#link { +#loading,#details,#history a { background:rgba(43,43,43,0.8); border-radius:5px; color:#85bf25; - font-family:sans-serif; +} + +#history,#loading,#details { position:absolute; } @@ -52,3 +57,33 @@ html,body { margin:0; padding:0; } + +#history { + top:95px; + left:25px; + max-height:210x; + overflow:hidden; +} +#history a { + margin-bottom:10px; + opacity:0.05; +} + +#details { + font-family:sans-serif; +} +#history a:hover, #history a:nth-of-type(1) { + opacity:1 !important; +} +#history a:nth-of-type(2) { + opacity:0.8; +} +#history a:nth-of-type(3) { + opacity:0.6; +} +#history a:nth-of-type(4) { + opacity:0.4; +} +#history a:nth-of-type(5) { + opacity:0.2; +} diff --git a/views/imgur/imgurr.jade b/views/imgur/imgurr.jade index 0db41a2..0cb8154 100644 --- a/views/imgur/imgurr.jade +++ b/views/imgur/imgurr.jade @@ -9,7 +9,7 @@ html(lang='en') var count = 0; function getNewImage() { count += 1; - $('#loading').show(); + $('#loading').fadeIn(); $('#loading').text('Loading image ' + count + '...'); document.title = 'random imgur (' + count + ')'; $('#loading').fadeIn(); @@ -17,16 +17,15 @@ html(lang='en') $.get("/api/imgur/getRandomImage", function(d) { $('#image').attr('src', d.data[0]); $('#details').text("Fetching info..."); - $('#link').text(d.data[0]); - $('#link').attr('href',d.data[0]); + $('' + d.data[0] + '').prependTo('#history').hide().slideDown(); $.get("/api/imgur/getImageInfoString", { 'slug': d.data[1] }, function(info) { - if(info.data[0].indexOf('undefined') == -1) { - $("#details").text(count + ': ' + info.data[0]); - $('#details').show(); - } else { - $("#details").hide(); - } - $('#loading').fadeOut(); + if(info.data[0].indexOf('undefined') == -1) { + $("#details").text(count + ': ' + info.data[0]); + $('#details').show(); + } else { + $("#details").hide(); + } + $('#loading').fadeOut(); }, "json"); }, "json"); } @@ -35,6 +34,7 @@ html(lang='en') body div#loading Loading image 1... div#details Press [SPACE] to load a new image - a#link [SPACE] for next + div#history + a Press [SPACE] for next div#container img#image From 46932f458c45583444aef01824f5516f537dad27 Mon Sep 17 00:00:00 2001 From: Douglas Gardner Date: Wed, 17 Apr 2013 20:04:02 +0000 Subject: [PATCH 2/4] fix cap of 5 --- public/imgurr.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/imgurr.css b/public/imgurr.css index 0ec21f2..d4620ba 100644 --- a/public/imgurr.css +++ b/public/imgurr.css @@ -61,12 +61,12 @@ html,body { #history { top:95px; left:25px; - max-height:210x; + max-height:210px; overflow:hidden; } #history a { margin-bottom:10px; - opacity:0.05; + opacity:0.1; /* won't display anyway due to #history max height */ } #details { From bbece26213c6fb4d8498302f54e1794084768962 Mon Sep 17 00:00:00 2001 From: Douglas Gardner Date: Wed, 17 Apr 2013 20:55:34 +0000 Subject: [PATCH 3/4] Convert history to list; add toggle for scrollbars * Added function to display message * Added ``s`` hotkey to toggle the scrollbar * Added ``max-width`` --- public/imgurr.css | 32 +++++++++++++++++++++++--------- views/imgur/imgurr.jade | 21 +++++++++++++++++---- 2 files changed, 40 insertions(+), 13 deletions(-) diff --git a/public/imgurr.css b/public/imgurr.css index d4620ba..e7ed0b1 100644 --- a/public/imgurr.css +++ b/public/imgurr.css @@ -2,11 +2,23 @@ text-align:center; } +body.crop { + overflow:hidden; +} + +#history { + padding:0; + margin:0; +} #container,#image { margin:0; max-height:100%; + max-width:100%; padding:0; } +a { + color:inherit; +} #details { display:none; @@ -18,7 +30,7 @@ top:25px; } -#history a { +#history li { left:25px; text-align:center; width:168px; @@ -26,7 +38,7 @@ margin-bottom:15px; } -#history a,#loading { +#history li,#loading { font-family:monospace; font-size:10px; padding:10px; @@ -41,7 +53,7 @@ top:95px; } -#loading,#details,#history a { +#loading,#details,#history li { background:rgba(43,43,43,0.8); border-radius:5px; color:#85bf25; @@ -56,6 +68,8 @@ html,body { height:100%; margin:0; padding:0; + border:0; + overflow:auto; } #history { @@ -64,7 +78,7 @@ html,body { max-height:210px; overflow:hidden; } -#history a { +#history li { margin-bottom:10px; opacity:0.1; /* won't display anyway due to #history max height */ } @@ -72,18 +86,18 @@ html,body { #details { 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; } -#history a:nth-of-type(2) { +#history li:nth-of-type(2) { opacity:0.8; } -#history a:nth-of-type(3) { +#history li:nth-of-type(3) { opacity:0.6; } -#history a:nth-of-type(4) { +#history li:nth-of-type(4) { opacity:0.4; } -#history a:nth-of-type(5) { +#history li:nth-of-type(5) { opacity:0.2; } diff --git a/views/imgur/imgurr.jade b/views/imgur/imgurr.jade index 0cb8154..fd7d7d0 100644 --- a/views/imgur/imgurr.jade +++ b/views/imgur/imgurr.jade @@ -7,6 +7,9 @@ html(lang='en') title random imgur script var count = 0; + function giveMessage(msg) { + $('
  • '+msg+'
    • ').prependTo('#history').hide().slideDown(); + } function getNewImage() { count += 1; $('#loading').fadeIn(); @@ -17,7 +20,7 @@ html(lang='en') $.get("/api/imgur/getRandomImage", function(d) { $('#image').attr('src', d.data[0]); $('#details').text("Fetching info..."); - $('' + d.data[0] + '').prependTo('#history').hide().slideDown(); + giveMessage('' + d.data[0] + ''); $.get("/api/imgur/getImageInfoString", { 'slug': d.data[1] }, function(info) { if(info.data[0].indexOf('undefined') == -1) { $("#details").text(count + ': ' + info.data[0]); @@ -30,11 +33,21 @@ html(lang='en') }, "json"); } $(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 div#loading Loading image 1... div#details Press [SPACE] to load a new image - div#history - a Press [SPACE] for next + ul#history + li Press [SPACE] for next div#container img#image From c9fd314ba4d56fbf45bf3e649ffb19f6f1b6205e Mon Sep 17 00:00:00 2001 From: Douglas Gardner Date: Wed, 17 Apr 2013 21:03:40 +0000 Subject: [PATCH 4/4] tidy css --- public/imgurr.css | 95 +++++++++++++++++++++++------------------------ 1 file changed, 46 insertions(+), 49 deletions(-) diff --git a/public/imgurr.css b/public/imgurr.css index e7ed0b1..a5ceae0 100644 --- a/public/imgurr.css +++ b/public/imgurr.css @@ -2,26 +2,16 @@ text-align:center; } -body.crop { - overflow:hidden; -} - -#history { - padding:0; - margin:0; -} #container,#image { margin:0; max-height:100%; max-width:100%; padding:0; } -a { - color:inherit; -} #details { display:none; + font-family:sans-serif; font-weight:700; left:25px; min-width:280px; @@ -30,21 +20,54 @@ a { top:25px; } -#history li { +#history { left:25px; + margin:0; + max-height:210px; + overflow:hidden; + padding:0; + top:95px; +} + +#history li { + font-family:monospace; + left:25px; + margin-bottom:10px; + opacity:0.1; text-align:center; width:168px; - font-family:monospace - margin-bottom:15px; } #history li,#loading { + display:block; font-family:monospace; font-size:10px; padding:10px; - display:block; } +#history li:hover,#history li:nth-of-type(1) { + opacity:1!important; +} + +#history li:nth-of-type(2) { + opacity:0.8; +} + +#history li:nth-of-type(3) { + opacity:0.6; +} + +#history li:nth-of-type(4) { + opacity:0.4; +} + +#history li:nth-of-type(5) { + opacity:0.2; +} + +#history,#loading,#details { + position:absolute; +} #loading { font-weight:500; @@ -59,45 +82,19 @@ a { color:#85bf25; } -#history,#loading,#details { - position:absolute; +a { + color:inherit; +} + +body.crop { + overflow:hidden; } html,body { background-color:#121211; + border:0; height:100%; margin:0; - padding:0; - border:0; overflow:auto; -} - -#history { - top:95px; - left:25px; - max-height:210px; - overflow:hidden; -} -#history li { - margin-bottom:10px; - opacity:0.1; /* won't display anyway due to #history max height */ -} - -#details { - font-family:sans-serif; -} -#history li:hover, #history li:nth-of-type(1) { - opacity:1 !important; -} -#history li:nth-of-type(2) { - opacity:0.8; -} -#history li:nth-of-type(3) { - opacity:0.6; -} -#history li:nth-of-type(4) { - opacity:0.4; -} -#history li:nth-of-type(5) { - opacity:0.2; + padding:0; }