new frontpage layout, yay

This commit is contained in:
Emi Matchu 2012-08-01 13:34:54 -04:00
parent 4693d1480f
commit c2a0c5de74
6 changed files with 234 additions and 84 deletions

View file

@ -50,9 +50,14 @@ class OutfitsController < ApplicationController
@colors = Color.all_ordered_by_name @colors = Color.all_ordered_by_name
@species = Species.all_ordered_by_name @species = Species.all_ordered_by_name
end end
unless fragment_exist?(:action_suffix => 'top_contributors') unless fragment_exist?(:action_suffix => 'top_contributors')
@top_contributors = User.top_contributors.limit(User::PreviewTopContributorsCount) @top_contributors = User.top_contributors.limit(User::PreviewTopContributorsCount)
end 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 end
def show def show

View file

@ -1,24 +1,24 @@
module ContributionHelper module ContributionHelper
def contributed_description(contributed) def contributed_description(contributed, image = true)
case contributed case contributed
when Item when Item
contributed_item(contributed, 'for the first time') contributed_item(contributed, image, 'for the first time')
when SwfAsset when SwfAsset
contributed_item(contributed.item, 'on a new body type') contributed_item(contributed.item, image, 'on a new body type')
when PetType when PetType
contributed_pet_type(contributed, :after => 'for the first time') contributed_pet_type(contributed, image, :after => 'for the first time')
when PetState 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
end end
def contributed_item(item, adverbial) def contributed_item(item, image = true, adverbial)
if item if item
output do |html| output do |html|
html << 'the' html << 'the'
html << link_to(item.name, item, :class => 'contributed-name') html << link_to(item.name, item, :class => 'contributed-name')
html << adverbial html << adverbial
html << image_tag(item.thumbnail_url) html << image_tag(item.thumbnail_url) if image
end end
else else
"data for an item that has since been updated" "data for an item that has since been updated"
@ -26,13 +26,13 @@ module ContributionHelper
end end
PET_TYPE_IMAGE_FORMAT = 'http://pets.neopets.com/cp/%s/1/3.png' 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' options[:before] ||= 'the'
output do |html| output do |html|
html << options[:before] html << options[:before]
html << content_tag(:span, pet_type.human_name, :class => 'contributed-name') html << content_tag(:span, pet_type.human_name, :class => 'contributed-name')
html << options[:after] if options[:after] 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
end end

View file

@ -1,3 +1,4 @@
@import "compass/css3/gradient"
@import "partials/campaign-progress" @import "partials/campaign-progress"
body.outfits-new body.outfits-new
@ -6,7 +7,6 @@ body.outfits-new
#outfit-forms #outfit-forms
+clearfix +clearfix
+module +module
margin-bottom: 3em
position: relative position: relative
h1 h1
margin-bottom: 0 margin-bottom: 0
@ -103,7 +103,7 @@ body.outfits-new
+clearfix +clearfix
display: table display: table
list-style: none list-style: none
margin-bottom: 1em margin-top: 1em
h3 h3
margin-bottom: .25em margin-bottom: .25em
li li
@ -136,8 +136,6 @@ body.outfits-new
+opacity(1) +opacity(1)
p p
min-height: 4.5em min-height: 4.5em
#read-more
float: right
#your-items-module #your-items-module
h3 h3
@ -148,3 +146,81 @@ body.outfits-new
font-weight: bold font-weight: bold
margin-left: .5em 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

View file

@ -54,65 +54,42 @@
= form_tag items_path, :method => 'get' do = form_tag items_path, :method => 'get' do
= text_field_tag 'q', '', :placeholder => raw('find an item&hellip;'), :type => 'search' = text_field_tag 'q', '', :placeholder => raw('find an item&hellip;'), :type => 'search'
= submit_tag 'search' = submit_tag 'search'
%li#blog-preview %li
%a{:href => "http://blog.openneo.net"} %a{:href => bulk_pets_path}
= image_tag 'blog.png' = image_tag 'http://images.neopets.com/items/mall_ac_garland_spotlight.gif'
%h3 %h3
%a{:href => "http://blog.openneo.net/"} OpenNeo Blog %a{:href => bulk_pets_path}
Modeling
%div %div
%h4 We'll keep you posted! %h4 Found something?
%p %p
Dress to Impress is always improving, and you can always stay in Enter a pet's name here and we'll keep a copy of what it's wearing.
the loop through our blog. Thanks so much!
#description = form_tag load_pet_path do
%h2 Built by you, just for you! = origin_tag root_path
%p = pet_name_tag :placeholder => raw('model a pet&hellip;')
Dress to Impress lets you plan how you want to dress up your Neopets, = submit_tag 'submit'
before you even go shopping! Whenever you give us a Neopet's name, we #latest-contribution
automatically look up what it's wearing and organize the data into = link_to 'Contributions:', contributions_path, :id => 'recent-contributions-link'
our own wearables database &mdash; a community closet, if you will. = link_to @latest_contribution.user.name, user_contributions_path(@latest_contribution.user)
Then you can plan your outfit, mixing and matching various items, so showed us
you can have the best-dressed Neopet in all of Neopia! = succeed '.' do
%p = contributed_description @latest_contribution.contributed, false
To make all this possible, though, we need your help &mdash; and if Thanks,
you log in at the top, we'll keep track of your = succeed '!' do
= link_to 'contributions', contributions_path = link_to @latest_contribution.user.name, user_contributions_path(@latest_contribution.user)
and award %span#latest-contribution-created-at{:title => @latest_contribution.created_at.to_s}
= link_to 'points', top_contributors_path #{time_ago_in_words @latest_contribution.created_at} ago
so you can show off just how dedicated you really are! #whats-new
- cache :action_suffix => 'top_contributors' do #blog-preview
#top-contributors %h2
%h3 Top Contributors %div
%ol %a#blog-preview-linkback{:href => 'http://blog.openneo.net/'} OpenNeo Blog
- @top_contributors.each do |user| #newest-items
%li %h2 New Items
= link_to user.name, user_contributions_path(user) %ul
&mdash; - @newest_items.each do |item|
= user.points = link_to image_tag(item.thumbnail_url), item
%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!
- content_for :javascripts do - content_for :javascripts do
= include_javascript_libraries :jquery = include_javascript_libraries :jquery
= include_javascripts :new_outfit_package = include_javascripts :new_outfit_package

View file

@ -1,3 +1,5 @@
var disqus_shortname = 'dresstoimpress';
(function () { // don't need to export anything in here (function () { // don't need to export anything in here
var preview_el = $('#pet-preview'), var preview_el = $('#pet-preview'),
@ -144,7 +146,7 @@ $(function () {
$.getJSON('http://blog.openneo.net/api/read/json?callback=?', function (data) { $.getJSON('http://blog.openneo.net/api/read/json?callback=?', function (data) {
var post = data.posts[0], el = $('#blog-preview'), var post = data.posts[0], el = $('#blog-preview'),
url = post['url-with-slug'], header = "Here's the latest!", body = '', 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') { if(post.type == 'regular') {
header = post['regular-title']; header = post['regular-title'];
body = post['regular-body']; body = post['regular-body'];
@ -155,20 +157,28 @@ $(function () {
body = post['photo-caption']; body = post['photo-caption'];
image = post['photo-url-75']; 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) { if(body.length > truncate_body_at) {
body = body.substring(0, truncate_body_at); body = body.substring(0, truncate_body_at);
body = body.replace(/\s+\w+$/, ''); body = body.replace(/\s+\w+$/, '');
body += '&hellip;'; body += '&hellip;';
} }*/
el.find('h4').text(header).wrapInner($('<a/>', {href: url})); el.find('h2').text(header).wrapInner($('<a/>', {href: url}));
el.find('p').html(body); el.find('div').html(body);
$('<a/>', {'id': 'read-more', href: url, text: 'read more'}).appendTo(el.find('div')); $('<a/>', {'id': 'blog-preview-comments', href: url + '#disqus_thread'}).appendTo(el);
if(image) { if(image) {
el.find('img').attr('src', image).parent().attr('href', url); 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);}
})(); })();

View file

@ -3644,14 +3644,13 @@ body.outfits-new .campaign-progress-label, body.outfits-new .campaign-progress-l
body.outfits-new.campaign-loaded .campaign-progress-wrapper { body.outfits-new.campaign-loaded .campaign-progress-wrapper {
visibility: visible; visibility: visible;
} }
/* line 6, ../../../app/stylesheets/outfits/_new.sass */ /* line 7, ../../../app/stylesheets/outfits/_new.sass */
body.outfits-new #outfit-forms { body.outfits-new #outfit-forms {
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;
background: #eeffee; background: #eeffee;
border: 1px solid #006600; border: 1px solid #006600;
padding: 1em; padding: 1em;
margin-bottom: 3em;
position: relative; position: relative;
} }
/* line 8, ../../../app/stylesheets/partials/clean/_mixins.sass */ /* line 8, ../../../app/stylesheets/partials/clean/_mixins.sass */
@ -3811,7 +3810,7 @@ body.outfits-new #sections {
display: inline-block; display: inline-block;
display: table; display: table;
list-style: none; list-style: none;
margin-bottom: 1em; margin-top: 1em;
} }
/* line 8, ../../../app/stylesheets/partials/clean/_mixins.sass */ /* line 8, ../../../app/stylesheets/partials/clean/_mixins.sass */
body.outfits-new #sections { body.outfits-new #sections {
@ -3874,11 +3873,7 @@ body.outfits-new #sections img:hover {
body.outfits-new #sections p { body.outfits-new #sections p {
min-height: 4.5em; min-height: 4.5em;
} }
/* line 139, ../../../app/stylesheets/outfits/_new.sass */ /* line 142, ../../../app/stylesheets/outfits/_new.sass */
body.outfits-new #read-more {
float: right;
}
/* line 144, ../../../app/stylesheets/outfits/_new.sass */
body.outfits-new #your-items-module h3:after { body.outfits-new #your-items-module h3:after {
color: red; color: red;
content: "new!"; content: "new!";
@ -3886,6 +3881,93 @@ body.outfits-new #your-items-module h3:after {
font-weight: bold; font-weight: bold;
margin-left: 0.5em; 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 */ /* line 2, ../../../app/stylesheets/partials/_campaign-progress.sass */
body.outfits-show .campaign-progress-wrapper { body.outfits-show .campaign-progress-wrapper {