new frontpage layout, yay

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

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
   

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
+

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'
-      %h3
-        %a{:href => "http://blog.openneo.net/"} OpenNeo Blog
-      %div
-        %h4 We'll keep you posted!
-        %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
+        = image_tag 'http://images.neopets.com/items/mall_ac_garland_spotlight.gif'
-    %h2 I found something!
+      %h3
+        %a{:href => bulk_pets_path}
+          Modeling
+      %div
+        %h4 Found something?
         %p
-      Enter the name of the pet you found, and we'll keep a copy of what
+          Enter a pet's name here and we'll keep a copy of what it's wearing.
-      it's wearing. Thanks so much!
+          Thanks so much!
-    = pet_name_tag
+        = form_tag load_pet_path do
-    %button{:type => "submit"}
+          = origin_tag root_path
-      I pwn!
+          = 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

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 += '&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) {
       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);}
 })();
+

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 */
+/* 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 {
   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 {