From c2a0c5de7484db5c08d63312d5bb3f11167536f9 Mon Sep 17 00:00:00 2001 From: Matchu Date: Wed, 1 Aug 2012 13:34:54 -0400 Subject: [PATCH] new frontpage layout, yay --- app/controllers/outfits_controller.rb | 5 ++ app/helpers/contribution_helper.rb | 18 ++--- app/stylesheets/outfits/_new.sass | 84 ++++++++++++++++++++-- app/views/outfits/new.html.haml | 89 +++++++++-------------- public/javascripts/outfits/new.js | 24 +++++-- public/stylesheets/compiled/screen.css | 98 +++++++++++++++++++++++--- 6 files changed, 234 insertions(+), 84 deletions(-) diff --git a/app/controllers/outfits_controller.rb b/app/controllers/outfits_controller.rb index bc7a5e69..16ab7575 100644 --- a/app/controllers/outfits_controller.rb +++ b/app/controllers/outfits_controller.rb @@ -50,9 +50,14 @@ class OutfitsController < ApplicationController @colors = Color.all_ordered_by_name @species = Species.all_ordered_by_name end + unless fragment_exist?(:action_suffix => 'top_contributors') @top_contributors = User.top_contributors.limit(User::PreviewTopContributorsCount) end + + @newest_items = Item.newest.select([:id, :name, :thumbnail_url]).limit(9) + @latest_contribution = Contribution.recent.first + Contribution.preload_contributeds_and_parents([@latest_contribution]) end def show diff --git a/app/helpers/contribution_helper.rb b/app/helpers/contribution_helper.rb index 8720d52b..68e4e158 100644 --- a/app/helpers/contribution_helper.rb +++ b/app/helpers/contribution_helper.rb @@ -1,24 +1,24 @@ module ContributionHelper - def contributed_description(contributed) + def contributed_description(contributed, image = true) case contributed when Item - contributed_item(contributed, 'for the first time') + contributed_item(contributed, image, 'for the first time') when SwfAsset - contributed_item(contributed.item, 'on a new body type') + contributed_item(contributed.item, image, 'on a new body type') when PetType - contributed_pet_type(contributed, :after => 'for the first time') + contributed_pet_type(contributed, image, :after => 'for the first time') when PetState - contributed_pet_type(contributed.pet_type, :before => 'a new pose for') + contributed_pet_type(contributed.pet_type, image, :before => 'a new pose for') end end - def contributed_item(item, adverbial) + def contributed_item(item, image = true, adverbial) if item output do |html| html << 'the' html << link_to(item.name, item, :class => 'contributed-name') html << adverbial - html << image_tag(item.thumbnail_url) + html << image_tag(item.thumbnail_url) if image end else "data for an item that has since been updated" @@ -26,13 +26,13 @@ module ContributionHelper end PET_TYPE_IMAGE_FORMAT = 'http://pets.neopets.com/cp/%s/1/3.png' - def contributed_pet_type(pet_type, options) + def contributed_pet_type(pet_type, image = true, options) options[:before] ||= 'the' output do |html| html << options[:before] html << content_tag(:span, pet_type.human_name, :class => 'contributed-name') html << options[:after] if options[:after] - html << image_tag(sprintf(PET_TYPE_IMAGE_FORMAT, pet_type.image_hash)) + html << image_tag(sprintf(PET_TYPE_IMAGE_FORMAT, pet_type.image_hash)) if image end end diff --git a/app/stylesheets/outfits/_new.sass b/app/stylesheets/outfits/_new.sass index 7a315c40..66aa6f1e 100644 --- a/app/stylesheets/outfits/_new.sass +++ b/app/stylesheets/outfits/_new.sass @@ -1,3 +1,4 @@ +@import "compass/css3/gradient" @import "partials/campaign-progress" body.outfits-new @@ -6,7 +7,6 @@ body.outfits-new #outfit-forms +clearfix +module - margin-bottom: 3em position: relative h1 margin-bottom: 0 @@ -103,7 +103,7 @@ body.outfits-new +clearfix display: table list-style: none - margin-bottom: 1em + margin-top: 1em h3 margin-bottom: .25em li @@ -136,8 +136,6 @@ body.outfits-new +opacity(1) p min-height: 4.5em - #read-more - float: right #your-items-module h3 @@ -148,3 +146,81 @@ body.outfits-new font-weight: bold margin-left: .5em + $container-width: 800px + $blog-preview-outer-width: $container-width * (2 / 3) + $newest-items-outer-width: $container-width * (1 / 3) + $whats-new-height: 300px + $whats-new-gutter: 12px + #whats-new + +clearfix + height: 300px + margin-bottom: 1em + + $blog-preview-border-width: 1px + $blog-preview-padding: 12px + $blog-preview-inner-width: $blog-preview-outer-width - (2 * $blog-preview-border-width) - (2 * $blog-preview-padding) - $whats-new-gutter + $blog-preview-inner-height: $whats-new-height - (2 * $blog-preview-border-width) - (2 * $blog-preview-padding) + #blog-preview + background: $module-bg-color + border: $blog-preview-border-width solid $module-border-color + display: none + float: left + height: $blog-preview-inner-height + margin-right: $whats-new-gutter + padding: $blog-preview-padding + width: $blog-preview-inner-width + + > h2 + font-size: 150% + + > div, > a + font-size: 85% + + > div + height: 200px + margin-bottom: .75em + overflow: auto + position: relative + + ul, ol + margin-bottom: 1em + padding: 0 1.5em + + #blog-preview-linkback + float: left + + #blog-preview-comments + float: right + font-size: 85% + margin-left: 1em + + #newest-items + float: right + text-align: center + width: $newest-items-outer-width + + h2 + font-size: 150% + + img + height: 80px + width: 80px + + #latest-contribution + border: + color: $soft-border-color + style: solid + width: 1px 0 + font-size: 85% + margin: 1em 0 + padding: .5em 0 + text-align: center + + #recent-contributions-link + font-weight: bold + margin-right: .5em + + #latest-contribution-created-at + color: $soft-text-color + margin-left: .5em + diff --git a/app/views/outfits/new.html.haml b/app/views/outfits/new.html.haml index 3b949f3a..6df0a92e 100644 --- a/app/views/outfits/new.html.haml +++ b/app/views/outfits/new.html.haml @@ -54,65 +54,42 @@ = form_tag items_path, :method => 'get' do = text_field_tag 'q', '', :placeholder => raw('find an item…'), :type => 'search' = submit_tag 'search' - %li#blog-preview - %a{:href => "http://blog.openneo.net"} - = image_tag 'blog.png' + %li + %a{:href => bulk_pets_path} + = image_tag 'http://images.neopets.com/items/mall_ac_garland_spotlight.gif' %h3 - %a{:href => "http://blog.openneo.net/"} OpenNeo Blog + %a{:href => bulk_pets_path} + Modeling %div - %h4 We'll keep you posted! + %h4 Found something? %p - Dress to Impress is always improving, and you can always stay in - the loop through our blog. - #description - %h2 Built by you, just for you! - %p - Dress to Impress lets you plan how you want to dress up your Neopets, - before you even go shopping! Whenever you give us a Neopet's name, we - automatically look up what it's wearing and organize the data into - our own wearables database — a community closet, if you will. - Then you can plan your outfit, mixing and matching various items, so - you can have the best-dressed Neopet in all of Neopia! - %p - To make all this possible, though, we need your help — and if - you log in at the top, we'll keep track of your - = link_to 'contributions', contributions_path - and award - = link_to 'points', top_contributors_path - so you can show off just how dedicated you really are! -- cache :action_suffix => 'top_contributors' do - #top-contributors - %h3 Top Contributors - %ol - - @top_contributors.each do |user| - %li - = link_to user.name, user_contributions_path(user) - — - = user.points - %a{:href => top_contributors_path} see more -= form_tag load_pet_path, :id => 'how-can-i-help' do - - cache :action_suffix => 'how_can_i_help_form_content' do - = destination_tag 'needed_items' - = origin_tag root_path - %h2 How can I help? - %p - Enter your pet's name, and we'll tell you what items you can help us - model. Thanks so much! - = pet_name_tag - %button{:type => "submit"} - Let's model! -= form_tag load_pet_path, :id => 'i-found-something' do - - cache :action_suffix => 'i_found_something_form_content' do - = origin_tag root_path - %a{:href => bulk_pets_path} - add many pets - %h2 I found something! - %p - Enter the name of the pet you found, and we'll keep a copy of what - it's wearing. Thanks so much! - = pet_name_tag - %button{:type => "submit"} - I pwn! + Enter a pet's name here and we'll keep a copy of what it's wearing. + Thanks so much! + = form_tag load_pet_path do + = origin_tag root_path + = pet_name_tag :placeholder => raw('model a pet…') + = submit_tag 'submit' + #latest-contribution + = link_to 'Contributions:', contributions_path, :id => 'recent-contributions-link' + = link_to @latest_contribution.user.name, user_contributions_path(@latest_contribution.user) + showed us + = succeed '.' do + = contributed_description @latest_contribution.contributed, false + Thanks, + = succeed '!' do + = link_to @latest_contribution.user.name, user_contributions_path(@latest_contribution.user) + %span#latest-contribution-created-at{:title => @latest_contribution.created_at.to_s} + #{time_ago_in_words @latest_contribution.created_at} ago + #whats-new + #blog-preview + %h2 + %div + %a#blog-preview-linkback{:href => 'http://blog.openneo.net/'} OpenNeo Blog + #newest-items + %h2 New Items + %ul + - @newest_items.each do |item| + = link_to image_tag(item.thumbnail_url), item - content_for :javascripts do = include_javascript_libraries :jquery = include_javascripts :new_outfit_package diff --git a/public/javascripts/outfits/new.js b/public/javascripts/outfits/new.js index f06b1321..24b97c83 100644 --- a/public/javascripts/outfits/new.js +++ b/public/javascripts/outfits/new.js @@ -1,3 +1,5 @@ +var disqus_shortname = 'dresstoimpress'; + (function () { // don't need to export anything in here var preview_el = $('#pet-preview'), @@ -144,7 +146,7 @@ $(function () { $.getJSON('http://blog.openneo.net/api/read/json?callback=?', function (data) { var post = data.posts[0], el = $('#blog-preview'), url = post['url-with-slug'], header = "Here's the latest!", body = '', - truncate_body_at = 100, image; + truncate_body_at = 500, image; if(post.type == 'regular') { header = post['regular-title']; body = post['regular-body']; @@ -155,20 +157,28 @@ $(function () { body = post['photo-caption']; image = post['photo-url-75']; } - body = body.replace(/(<\/?[\S][^>]*>)/gi, ''); + // No truncation on this new layout + /*body = body.replace(/(<\/?[\S][^>]*>)/gi, ''); if(body.length > truncate_body_at) { body = body.substring(0, truncate_body_at); body = body.replace(/\s+\w+$/, ''); body += '…'; - } - el.find('h4').text(header).wrapInner($('', {href: url})); - el.find('p').html(body); - $('', {'id': 'read-more', href: url, text: 'read more'}).appendTo(el.find('div')); + }*/ + el.find('h2').text(header).wrapInner($('', {href: url})); + el.find('div').html(body); + $('', {'id': 'blog-preview-comments', href: url + '#disqus_thread'}).appendTo(el); if(image) { el.find('img').attr('src', image).parent().attr('href', url); } - el.children('div').hide().fadeIn('slow'); + el.fadeIn('medium'); + addDisqusCount(); }); }); +function addDisqusCount() { + var s = document.createElement('script'); s.async = true; + s.type = 'text/javascript'; + s.src = 'http://' + disqus_shortname + '.disqus.com/count.js'; + (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);} })(); + diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css index 3de6f307..b65c4117 100644 --- a/public/stylesheets/compiled/screen.css +++ b/public/stylesheets/compiled/screen.css @@ -3644,14 +3644,13 @@ body.outfits-new .campaign-progress-label, body.outfits-new .campaign-progress-l body.outfits-new.campaign-loaded .campaign-progress-wrapper { visibility: visible; } -/* line 6, ../../../app/stylesheets/outfits/_new.sass */ +/* line 7, ../../../app/stylesheets/outfits/_new.sass */ body.outfits-new #outfit-forms { overflow: hidden; display: inline-block; background: #eeffee; border: 1px solid #006600; padding: 1em; - margin-bottom: 3em; position: relative; } /* line 8, ../../../app/stylesheets/partials/clean/_mixins.sass */ @@ -3811,7 +3810,7 @@ body.outfits-new #sections { display: inline-block; display: table; list-style: none; - margin-bottom: 1em; + margin-top: 1em; } /* line 8, ../../../app/stylesheets/partials/clean/_mixins.sass */ body.outfits-new #sections { @@ -3874,11 +3873,7 @@ body.outfits-new #sections img:hover { body.outfits-new #sections p { min-height: 4.5em; } -/* line 139, ../../../app/stylesheets/outfits/_new.sass */ -body.outfits-new #read-more { - float: right; -} -/* line 144, ../../../app/stylesheets/outfits/_new.sass */ +/* line 142, ../../../app/stylesheets/outfits/_new.sass */ body.outfits-new #your-items-module h3:after { color: red; content: "new!"; @@ -3886,6 +3881,93 @@ body.outfits-new #your-items-module h3:after { font-weight: bold; margin-left: 0.5em; } +/* line 154, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #whats-new { + overflow: hidden; + display: inline-block; + height: 300px; + margin-bottom: 1em; +} +/* line 8, ../../../app/stylesheets/partials/clean/_mixins.sass */ +body.outfits-new #whats-new { + display: block; +} +/* line 163, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #whats-new #blog-preview { + background: #eeffee; + border: 1px solid #006600; + display: none; + float: left; + height: 274px; + margin-right: 12px; + padding: 12px; + width: 495.333px; +} +/* line 173, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #whats-new #blog-preview > h2 { + font-size: 150%; +} +/* line 176, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #whats-new #blog-preview > div, body.outfits-new #whats-new #blog-preview > a { + font-size: 85%; +} +/* line 179, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #whats-new #blog-preview > div { + height: 200px; + margin-bottom: 0.75em; + overflow: auto; + position: relative; +} +/* line 185, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #whats-new #blog-preview > div ul, body.outfits-new #whats-new #blog-preview > div ol { + margin-bottom: 1em; + padding: 0 1.5em; +} +/* line 189, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #whats-new #blog-preview #blog-preview-linkback { + float: left; +} +/* line 192, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #whats-new #blog-preview #blog-preview-comments { + float: right; + font-size: 85%; + margin-left: 1em; +} +/* line 197, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #whats-new #newest-items { + float: right; + text-align: center; + width: 266.667px; +} +/* line 202, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #whats-new #newest-items h2 { + font-size: 150%; +} +/* line 205, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #whats-new #newest-items img { + height: 80px; + width: 80px; +} +/* line 209, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #latest-contribution { + border-color: #aaddaa; + border-style: solid; + border-width: 1px 0; + font-size: 85%; + margin: 1em 0; + padding: 0.5em 0; + text-align: center; +} +/* line 219, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #latest-contribution #recent-contributions-link { + font-weight: bold; + margin-right: 0.5em; +} +/* line 223, ../../../app/stylesheets/outfits/_new.sass */ +body.outfits-new #latest-contribution #latest-contribution-created-at { + color: #448844; + margin-left: 0.5em; +} /* line 2, ../../../app/stylesheets/partials/_campaign-progress.sass */ body.outfits-show .campaign-progress-wrapper {