From fca7cb1fe75436b5ec0a624894810ba7e3fd3c6e Mon Sep 17 00:00:00 2001 From: Tim Oxley Date: Sun, 17 Apr 2011 00:44:04 +1000 Subject: [PATCH] infinitescroll + more minor style changes --- app/views/layouts/application.html.haml | 2 +- public/javascripts/application.js | 7 +- public/javascripts/jquery.infinitescroll.js | 14 +- public/javascripts/view.js | 51 ++++- public/stylesheets/sass/style.scss | 49 +++-- public/stylesheets/style.css | 229 +++++++++++++++----- 6 files changed, 274 insertions(+), 78 deletions(-) diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 8941730..ac113ea 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -3,7 +3,7 @@ %head %title InspiredShots = stylesheet_link_tag :all - = javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js', 'jquery.infinitescroll.js', 'application', 'view', 'jquery.lettering' + = javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js', 'jquery.infinitescroll.js', 'application', 'view', 'jquery.lettering' %body #content %h1#title InspiredShots diff --git a/public/javascripts/application.js b/public/javascripts/application.js index 395b4a7..5e9053e 100644 --- a/public/javascripts/application.js +++ b/public/javascripts/application.js @@ -4,10 +4,12 @@ jQuery(document).ready(function($) { url: window.location.href, appendTo: '#feed', triggerAt: 620, + fade: 'slow' }); var feed = $('#feed'); - + feed.hide(); + feed.delay(2000).fadeIn('slow'); // display loading animation feed.bind('infinitescroll.beforesend', function() { $(this).append('
  • '); @@ -15,6 +17,7 @@ jQuery(document).ready(function($) { // hide loading animation feed.bind('infinitescroll.finish', function() { - $('li.loading').fadeOut('fast'); + $('li.loading').fadeOut('slow'); + $('li.loading').slideUp('slow'); }); }); diff --git a/public/javascripts/jquery.infinitescroll.js b/public/javascripts/jquery.infinitescroll.js index cc4ba9e..0fc7233 100644 --- a/public/javascripts/jquery.infinitescroll.js +++ b/public/javascripts/jquery.infinitescroll.js @@ -8,6 +8,7 @@ triggerAt: 300, page: 2, appendTo: '.list tbody', + fade: 'none', container: $(document) }, options); var req = null; @@ -24,11 +25,20 @@ $(settings.appendTo).trigger('infinitescroll.beforesend'); req = $.get(settings.url, 'page='+settings.page, function(data) { if (data !== '') { + + var elements = $(data); if (settings.page > 1) { - $(settings.appendTo).append(data); + $(settings.appendTo).append(elements); } else { - $(settings.appendTo).html(data); + $(settings.appendTo).html(elements); } + + // hide, then fade in elements if fade is configured + if (settings.fade !== 'none' || settings.fade !== null) { + elements.css('display', 'none'); // hide() throws an error :/ ? + elements.fadeIn(settings.fade); + } + settings.page++; $(settings.appendTo).trigger('infinitescroll.finish'); } else { diff --git a/public/javascripts/view.js b/public/javascripts/view.js index eb36823..d071510 100644 --- a/public/javascripts/view.js +++ b/public/javascripts/view.js @@ -1,4 +1,6 @@ - +function supports_canvas() { + return !!document.createElement('canvas').getContext; +} function generateNoise(opacity) { if ( !!!document.createElement('canvas').getContext ) { @@ -9,7 +11,7 @@ function generateNoise(opacity) { ctx = canvas.getContext('2d'), x, y, number, - opacityopacity = opacity || .2; + opacity = opacity || .2; canvas.width = 200; canvas.height = 200; @@ -23,10 +25,51 @@ function generateNoise(opacity) { } } - document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")"; + $('body').css({backgroundImage: "url(" + canvas.toDataURL("image/png") + ")"}); } + +function createTopGradient(opacity) { + var canvas = document.createElement("canvas"), + ctx = canvas.getContext('2d'); + canvas.width = 1200; + canvas.height = 600; + opacity = opacity || .2; + + var radgrad2 = ctx.createRadialGradient(600,120,0,600,120,600); + + radgrad2.addColorStop(0, 'rgba(202,168,255,'+opacity+')'); + radgrad2.addColorStop(1, 'rgba(202,168,255,0)'); + + ctx.fillStyle = radgrad2; + ctx.fillRect(0, 0, 1200, 600); + $('body').prepend('
    '); + $('#content').css({ + zIndex: 1 + }); + $('body').css({overflowX: 'hidden'}); + $('#grad').css({ + width: 'auto', + height: 'auto', + margin: '0 auto', + position: 'absolute', + top: 0, + left: '50%', + marginLeft: '-600px', + }); + $('#grad').css({ + width: '1200px', + height: '1200px', + display: 'block', + background: "url(" + canvas.toDataURL("image/png") + ") center top no-repeat", + + }); +} + $(function() { - generateNoise(.05); // default opacity is .2 + if (supports_canvas()) { + createTopGradient(0.04); + generateNoise(.05); + } $('#title').lettering(); }) diff --git a/public/stylesheets/sass/style.scss b/public/stylesheets/sass/style.scss index 2dad745..861b975 100644 --- a/public/stylesheets/sass/style.scss +++ b/public/stylesheets/sass/style.scss @@ -20,27 +20,42 @@ sup,sub{vertical-align:baseline} header, nav, section, article, footer{display:block;} + + // -- Global ------------------------------------------------------------------- -body{color:#8d8d8e;background:#111415;width:400px;margin:40px auto;font:12px/140% 'Helvetica Neue', Arial, Sans-Serif;} +body {background-color:#111415;} +#content{color:#8d8d8e;width:400px; margin: 100px auto 40px;font:12px/140% 'Helvetica Neue', Arial, Sans-Serif;} a:link, a:visited, a:hover, a:active{color:#2B899D;} // -- Header ------------------------------------------------------------------- -#title{font-size:62px;margin-bottom:40px;color:#ea4c89;text-shadow:1px -1px 0px #fc629d;font-weight:bold; letter-spacing: -0.005em;} -#subtitle{font-size:21px;margin-bottom:30px;text-transform:lowercase;font-weight:normal; +#title{font-size:62px;margin-bottom:40px;color:rgba(234,76,137, 1);text-shadow:0px 1px 0px rgba(252,98,157,1);font-weight:bold; letter-spacing: -0.005em; + &:hover {color: rgba(252,98,157,1)} +} + +#subtitle{font-size:21px;margin-bottom:20px;text-transform:lowercase;font-weight:normal; opacity: 0.9; font-family:'Palatino', 'Times New Roman', serif;text-align:right;text-shadow: 1px -1px 0px #000;} // -- Content ------------------------------------------------------------------ ul#feed{ - li{margin:20px 0;background:#000;text-align:center;width:400px;height:300px;line-height:300px; position: relative; + li{margin:50px 0;background:#000;text-align:center;width:400px;height:300px;line-height:300px; position: relative; + border: 0.5px solid rgba(255,255,255, 0.02); + -webkit-border-radius: 1.5px; + -moz-border-radius: 1.5px; + border-radius: 1.5px; img{margin:0 auto; -moz-box-shadow: 1px 1px 0px #171b1c; -webkit-box-shadow: 1px 1px 0px #171b1c; box-shadow: 1px 1px 0px #171b1c; + -webkit-border-radius: 1.5px; + -moz-border-radius: 1.5px; + border-radius: 1.5px; + } &.loading{background:url('../images/loading.gif') 50% 50% no-repeat;height:16px; margin: 40px auto; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; + border: none; } } } @@ -53,41 +68,41 @@ footer{text-align:right; position: fixed; bottom: 10px; right: 20px; // -- Kerning -------- #title .char9 { - margin-left: 0px + margin-left: 0px } #title .char7 { - margin-left: 1px + margin-left: 1px } #title .char8 { - margin-left: 0px + margin-left: 0px } #title .char4 { - margin-left: 0px + margin-left: 0px } #title .char6 { - margin-left: -1px + margin-left: -1px } #title .char10 { - margin-left: 0px + margin-left: 0px } #title .char11 { - margin-left: -1px + margin-left: -1px } #title .char12 { - margin-left: 0px + margin-left: 0px } #title .char3 { - margin-left: -1px + margin-left: -1px } #title .char2 { - margin-left: -2px + margin-left: -1px } #title .char5 { - margin-left: -1px + margin-left: -1px } #title .char13 { - margin-left: 2px + margin-left: 2px } #title .char1 { - margin-left: 0px + margin-left: 0px } \ No newline at end of file diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 2e50161..c79b347 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1,52 +1,177 @@ -body, div, dl, dt, dd, ul, ol, li, h1, h2, h4, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } - -table { border-collapse: collapse; border-spacing: 0; } - -fieldset, img { border: 0; } - -address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit; } - -del, ins { text-decoration: none; } - -li { list-style: none; } - -caption, th { text-align: left; } - -h1, h2, h3, h4, h4, h5, h6 { font-size: 100%; font-weight: 400; } - -q:before, q:after { content: ''; } - -abbr, acronym { border: 0; font-variant: normal; } - -legend { color: #000; } - -input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } - -input, button, textarea, select { font-size: 100%; } - -.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } - -.clearfix { display: inline-block; } - -html[xmlns] .clearfix { display: block; } - -* html .clearfix { height: 1%; } - -sup, sub { vertical-align: baseline; } - -header, nav, section, article, footer { display: block; } - -body { color: #8d8d8e; background: #111415; width: 400px; margin: 40px auto; font: 12px/140% "Helvetica Neue", Arial, Sans-Serif; } - -a:link, a:visited, a:hover, a:active { color: #2B899D; } - -#title { font-size: 61px; margin-bottom: 40px; color: #ea4c89; text-shadow: 1px -1px 0px #fc629d; font-weight: bold; } - -#subtitle { font-size: 21px; margin-bottom: 30px; text-transform: lowercase; font-weight: normal; font-family: 'Palatino', 'Times New Roman', serif; text-align: right; text-shadow: 1px -1px 0px black; } - -ul#feed li { margin: 20px 0; background: #000; text-align: center; width: 400px; height: 300px; line-height: 300px; position: relative; } -ul#feed li img { margin: 0 auto; -moz-box-shadow: 1px 1px 0px #171b1c; -webkit-box-shadow: 1px 1px 0px #171b1c; box-shadow: 1px 1px 0px #171b1c; } -ul#feed li.loading { background: url("../images/loading.gif") 50% 50% no-repeat; height: 16px; margin: 40px auto; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } - -footer { text-align: right; position: fixed; bottom: 10px; right: 20px; } -footer a { color: #aaa; } +body, div, dl, dt, dd, ul, ol, li, h1, h2, h4, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { + margin: 0; + padding: 0; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +fieldset, img { + border: 0; } + +address, caption, cite, code, dfn, em, strong, th, var, optgroup { + font-style: inherit; + font-weight: inherit; } + +del, ins { + text-decoration: none; } + +li { + list-style: none; } + +caption, th { + text-align: left; } + +h1, h2, h3, h4, h4, h5, h6 { + font-size: 100%; + font-weight: 400; } + +q:before, q:after { + content: ''; } + +abbr, acronym { + border: 0; + font-variant: normal; } + +legend { + color: #000; } + +input, button, textarea, select, optgroup, option { + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: inherit; } + +input, button, textarea, select { + font-size: 100%; } + +.clearfix:after { + content: "."; + display: block; + clear: both; + visibility: hidden; + line-height: 0; + height: 0; } + +.clearfix { + display: inline-block; } + +html[xmlns] .clearfix { + display: block; } + +* html .clearfix { + height: 1%; } + +sup, sub { + vertical-align: baseline; } + +header, nav, section, article, footer { + display: block; } + +body { + background-color: #111415; } + +#content { + color: #8d8d8e; + width: 400px; + margin: 100px auto 40px; + font: 12px/140% "Helvetica Neue", Arial, Sans-Serif; } + +a:link, a:visited, a:hover, a:active { + color: #2B899D; } + +#title { + font-size: 62px; + margin-bottom: 40px; + color: #ea4c89; + text-shadow: 0px 1px 0px #fc629d; + font-weight: bold; + letter-spacing: -0.005em; } + #title:hover { + color: #fc629d; } + +#subtitle { + font-size: 21px; + margin-bottom: 20px; + text-transform: lowercase; + font-weight: normal; + opacity: 0.9; + font-family: 'Palatino', 'Times New Roman', serif; + text-align: right; + text-shadow: 1px -1px 0px black; } + +ul#feed li { + margin: 50px 0; + background: #000; + text-align: center; + width: 400px; + height: 300px; + line-height: 300px; + position: relative; + border: 0.5px solid rgba(255, 255, 255, 0.02); + -webkit-border-radius: 1.5px; + -moz-border-radius: 1.5px; + border-radius: 1.5px; } + ul#feed li img { + margin: 0 auto; + -moz-box-shadow: 1px 1px 0px #171b1c; + -webkit-box-shadow: 1px 1px 0px #171b1c; + box-shadow: 1px 1px 0px #171b1c; + -webkit-border-radius: 1.5px; + -moz-border-radius: 1.5px; + border-radius: 1.5px; } + ul#feed li.loading { + background: url("../images/loading.gif") 50% 50% no-repeat; + height: 16px; + margin: 40px auto; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; + border: none; } + +footer { + text-align: right; + position: fixed; + bottom: 10px; + right: 20px; } + footer a { + color: #aaa; } + +#title .char9 { + margin-left: 0px; } + +#title .char7 { + margin-left: 1px; } + +#title .char8 { + margin-left: 0px; } + +#title .char4 { + margin-left: 0px; } + +#title .char6 { + margin-left: -1px; } + +#title .char10 { + margin-left: 0px; } + +#title .char11 { + margin-left: -1px; } + +#title .char12 { + margin-left: 0px; } + +#title .char3 { + margin-left: -1px; } + +#title .char2 { + margin-left: -1px; } + +#title .char5 { + margin-left: -1px; } + +#title .char13 { + margin-left: 2px; } + +#title .char1 { + margin-left: 0px; }