From 1a2595aaf26fdcc8862be7aa71d53895970248ab Mon Sep 17 00:00:00 2001 From: Douglas Gardner Date: Tue, 16 Apr 2013 17:22:09 +0000 Subject: [PATCH 1/5] increment size with image count This commit adds functionality to the loading callout in the imgur module. The size of the font used in the loading callout now increases in a linear fashion in proportion to the number of images viewed in a row. The size starts at 12px, and will increase to 72px at image 2000, with round figures at most "standard" font sizes. This is largely an experiment to see what it looks like: it might not be as nice looking now that the callout contains extra information (such as the view count). It may be worth experimenting with just increasing the count number and leaving the "a w with x views (y*z)" message at a static size, or perhaps by editing the colour variant, or even the position on the screen. I really just wanted some feedback to make it a bit more interesting for a heavy user that has reached high numbers of images. Some figures: * 12px is reached after 0 images * 14px is reached after 66 images * 16px is reached after 133 images * 18px is reached after 200 images * 21px is reached after 300 images * 24px is reached after 400 images * 36px is reached after 800 images * 48px is reached after 1,200 images * 60px is reached after 1,600 images * 72px is reached after 2,000 images * 144px is reached after 4,400 images. --- public/imgurr.css | 1 + views/imgur/imgurr.jade | 1 + 2 files changed, 2 insertions(+) diff --git a/public/imgurr.css b/public/imgurr.css index f2a0cff..7d54561 100644 --- a/public/imgurr.css +++ b/public/imgurr.css @@ -14,6 +14,7 @@ border-top-right-radius:5px; color:#85bf25; font-family:sans-serif; + font-size:12px; font-weight:700; left:0; padding:20px; diff --git a/views/imgur/imgurr.jade b/views/imgur/imgurr.jade index 1a1440b..2271135 100644 --- a/views/imgur/imgurr.jade +++ b/views/imgur/imgurr.jade @@ -10,6 +10,7 @@ html(lang='en') function getNewImage() { count += 1; $('#loading').text('Loading image ' + count + '...'); + $('#loading').css('font-size', ((count * 0.03) + 12)); $('#image').load(function(){}); $.get("/api/imgur/getRandomImage", function(d) { $('#image').attr('src', d.data[0]); From 9b191bc89a4081740a6e59a885908c6150e2a35d Mon Sep 17 00:00:00 2001 From: Douglas Gardner Date: Tue, 16 Apr 2013 17:47:01 +0000 Subject: [PATCH 2/5] 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 From 3cdaa4b9a6fb0357f5b8387b0ff53ac01434591c Mon Sep 17 00:00:00 2001 From: Douglas Gardner Date: Tue, 16 Apr 2013 17:51:03 +0000 Subject: [PATCH 3/5] move css around This commit moves the font-size declaration from the common box CSS to only affecting the "loading" box. --- public/imgurr.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/imgurr.css b/public/imgurr.css index daaf1d7..e9d43cd 100644 --- a/public/imgurr.css +++ b/public/imgurr.css @@ -12,7 +12,6 @@ background:rgba(43,43,43,0.8); color:#85bf25; font-family:sans-serif; - font-size:12px; font-weight:700; padding:20px; position:absolute; @@ -29,6 +28,7 @@ #loading { left:0; + font-size:12px; border-bottom-right-radius:5px; border-top-right-radius:5px; } From 2b9dbea855ece511f792e8d927574247df16a751 Mon Sep 17 00:00:00 2001 From: Douglas Gardner Date: Tue, 16 Apr 2013 21:03:50 +0000 Subject: [PATCH 4/5] improve imgur module * Added config.json to the party * Moved API key (client ID) to the configuration file * Added image link to random imgur image page * Minimised loading message * Added fade to loading message * Added count to title attribute of webpage * Removed font-size increase * Added placeholders --- modules/imgur/config.json | 5 +++ modules/imgur/imgur.js | 2 +- public/imgurr.css | 64 +++++++++++++++++++++++---------------- views/imgur/imgurr.jade | 13 +++++--- 4 files changed, 52 insertions(+), 32 deletions(-) create mode 100644 modules/imgur/config.json diff --git a/modules/imgur/config.json b/modules/imgur/config.json new file mode 100644 index 0000000..ac6af71 --- /dev/null +++ b/modules/imgur/config.json @@ -0,0 +1,5 @@ +{ + "imagelength": 5, + "nsfwwarn": true, + "apikey": "xxxxxxxxx" +} diff --git a/modules/imgur/imgur.js b/modules/imgur/imgur.js index 11ea1c3..16c9f2c 100644 --- a/modules/imgur/imgur.js +++ b/modules/imgur/imgur.js @@ -65,7 +65,7 @@ var imgur = function(dbot) { 'url': 'https://api.imgur.com/3/image/' + slug + '.json', 'json': true, 'headers': { - 'Authorization': 'Client-ID 86fd3a8da348b65' + 'Authorization': 'Client-ID ' + dbot.config.imgur.apikey } }, function(err, response, body) { callback(body); diff --git a/public/imgurr.css b/public/imgurr.css index e9d43cd..f7ad728 100644 --- a/public/imgurr.css +++ b/public/imgurr.css @@ -1,41 +1,53 @@ #container { - text-align:center; + text-align:center; } #container,#image { - margin:0; - max-height:100%; - padding:0; -} - -#loading, #details{ - background:rgba(43,43,43,0.8); - color:#85bf25; - font-family:sans-serif; - font-weight:700; - padding:20px; - position:absolute; - top:50px; + margin:0; + max-height:100%; + padding:0; } #details { - right:0; - text-align:right; - border-bottom-left-radius:5px; - border-top-left-radius:5px display:none; + font-weight:700; + left:25px; + min-width:280px; + padding:20px; + text-align:center; + top:25px; +} + +#link { + left:25px; + text-align:center; + width:168px; +} + +#link,#loading { + font-family:monospace; + font-size:10px; + padding:10px; + top:95px; } #loading { - left:0; - font-size:12px; - border-bottom-right-radius:5px; - border-top-right-radius:5px; + font-weight:500; + left:220px; + min-width:95px; +} + +#loading,#details,#link { + background:rgba(43,43,43,0.8); + border-radius:5px; + color:#85bf25; + font-family:sans-serif; + position:absolute; } html,body { - background-color:#121211; - height:100%; - margin:0; - padding:0; + background-color:#121211; + height:100%; + margin:0; + padding:0; } diff --git a/views/imgur/imgurr.jade b/views/imgur/imgurr.jade index 2818bc0..79a671a 100644 --- a/views/imgur/imgurr.jade +++ b/views/imgur/imgurr.jade @@ -9,24 +9,27 @@ 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(); + document.title = 'random imgur (' + count + ')'; + $('#loading').fadeIn(); $('#image').load(function(){}); $.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]); $.get("/api/imgur/getImageInfoString", { 'slug': d.data[1] }, function(info) { $("#details").text(count + ': ' + info.data[0]); $('#details').show(); - $('#loading').hide(); + $('#loading').fadeOut(); }, "json"); }, "json"); } $(getNewImage()); $(document).on('keydown', function(e){(e.which==32)&&(getNewImage()) }); body - div#loading Loading Image + div#loading Loading image 1... div#details Press [SPACE] to load a new image + a#link [SPACE] for next div#container img#image From 33e2e12086efe67afbbd53d74ab6b78b16c1454b Mon Sep 17 00:00:00 2001 From: Douglas Gardner Date: Tue, 16 Apr 2013 21:08:00 +0000 Subject: [PATCH 5/5] recommit api key --- modules/imgur/config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/imgur/config.json b/modules/imgur/config.json index ac6af71..d8cf5a3 100644 --- a/modules/imgur/config.json +++ b/modules/imgur/config.json @@ -1,5 +1,5 @@ { "imagelength": 5, "nsfwwarn": true, - "apikey": "xxxxxxxxx" + "apikey": "86fd3a8da348b65 " }