basic show page

app/controllers/items_controller.rb

@@ -9,4 +9,8 @@ class ItemsController < ApplicationController
       end
     end
   end
+  
+  def show
+    @item = Item.find params[:id]
+  end
 end

app/stylesheets/items/_show.scss

@@ -0,0 +1,20 @@
+body.show {
+  header {
+    display: block;
+  }
+  
+  #item-thumbnail {
+    @include inline-block;
+    border: 1px solid $module_border_color;
+    height: 80px;
+    margin-right: -.5em;
+    width: 80px;
+  }
+  
+  #item-name {
+    @include inline-block;
+    border-bottom: 1px solid $module_border_color;
+    margin: 0;
+    padding: 0 1em 0 1em;
+  }
+}

app/stylesheets/screen.scss

@@ -68,6 +68,7 @@ h1 a {
   @include inline-block;
   padding: 10px;
   text-align: center;
+  text-decoration: none;
   vertical-align: top;
   width: 100px;
   img {
@@ -77,3 +78,5 @@ h1 a {
     width: 80px;
   }
 }
+
+@import "items/show";

app/views/items/_item.html.haml

@@ -1,3 +1,3 @@
-= div_for item do
+= link_to item, :class => 'item' do
   = image_tag item.thumbnail_url, :alt => item.description, :title => item.description
   = item.name

app/views/items/index.html.haml

@@ -1,6 +1,3 @@
-= form_tag items_path, :method => :get do
-  = text_field_tag :q, @query
-  = submit_tag 'Search', :name => nil
 - if @results
   - if @results.empty?
     :markdown

app/views/items/show.html.haml

@@ -0,0 +1,3 @@
+%header
+  = image_tag @item.thumbnail_url, :id => 'item-thumbnail'
+  %h2#item-name= @item.name

app/views/layouts/items.html.haml

@@ -3,8 +3,11 @@
   %head
     %title Infinite Closet
     = stylesheet_link_tag 'compiled/screen'
-  %body
+  %body{:class => params[:action]}
     #container
       %h1= link_to 'Infinite Closet', items_path
       = flashes
+      = form_tag items_path, :method => :get do
+        = text_field_tag :q, @query
+        = submit_tag 'Search', :name => nil
       = yield

config/routes.rb

@@ -1,3 +1,4 @@
 OpenneoImpressItems::Application.routes.draw do |map|
   match '/' => 'items#index', :as => :items
+  match '/:id' => 'items#show', :as => :item
 end

public/stylesheets/compiled/screen.css

@@ -335,7 +335,7 @@ body .bottom {
 }
 /* line 8, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_debug.scss */
 body .showgrid {
-  background: url('/images/grid.png?1273964747');
+  background: url('/images/grid.png?1273969609');
 }
 /* line 4, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_interaction.scss */
 body .error {
@@ -525,13 +525,44 @@ h1 a:hover {
   *vertical-align: auto;
   padding: 10px;
   text-align: center;
+  text-decoration: none;
   vertical-align: top;
   width: 100px;
 }
-/* line 73, ../../../app/stylesheets/screen.scss */
+/* line 74, ../../../app/stylesheets/screen.scss */
 .item img {
   display: block;
   height: 80px;
   margin: 0 auto;
   width: 80px;
 }
+
+/* line 2, ../../../app/stylesheets/items/show.scss */
+body.show header {
+  display: block;
+}
+/* line 6, ../../../app/stylesheets/items/show.scss */
+body.show #item-thumbnail {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: middle;
+  *display: inline;
+  *vertical-align: auto;
+  border: 1px solid #033e6b;
+  height: 80px;
+  margin-right: -0.5em;
+  width: 80px;
+}
+/* line 14, ../../../app/stylesheets/items/show.scss */
+body.show #item-name {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: middle;
+  *display: inline;
+  *vertical-align: auto;
+  border-bottom: 1px solid #033e6b;
+  margin: 0;
+  padding: 0 1em 0 1em;
+}