dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

new frontpage layout, yay

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/controllers/outfits_controller.rb
View file

@ -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

18
app/helpers/contribution_helper.rb
View file

@ -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

84
app/stylesheets/outfits/_new.sass
View file

@ -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

89
app/views/outfits/new.html.haml
View file

@ -54,65 +54,42 @@
= form_tag items_path, :method => 'get' do
= text_field_tag 'q', '', :placeholder => raw('find an item&hellip;'), :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 &mdash; 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 &mdash; 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)
&mdash;
= 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&hellip;')
= 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

24
public/javascripts/outfits/new.js
View file

@ -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 += '&hellip;';
}
el.find('h4').text(header).wrapInner($('<a/>', {href: url}));
el.find('p').html(body);
$('<a/>', {'id': 'read-more', href: url, text: 'read more'}).appendTo(el.find('div'));
}*/
el.find('h2').text(header).wrapInner($('<a/>', {href: url}));
el.find('div').html(body);
$('<a/>', {'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);}
})();

98
public/stylesheets/compiled/screen.css
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 {
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 {