From 7b91dd9cef81419f87fba4327f48dc747de184b6 Mon Sep 17 00:00:00 2001 From: Matchu Date: Tue, 8 Jun 2010 10:39:23 -0400 Subject: [PATCH] pretty home page --- app/helpers/items_helper.rb | 53 +++++++++++++++++++++----- app/stylesheets/items/_index.scss | 36 +++++++++++++++++ app/stylesheets/screen.scss | 9 +++-- app/views/items/index.html.haml | 16 ++++++++ public/stylesheets/compiled/screen.css | 46 ++++++++++++++++++++-- 5 files changed, 145 insertions(+), 15 deletions(-) create mode 100644 app/stylesheets/items/_index.scss diff --git a/app/helpers/items_helper.rb b/app/helpers/items_helper.rb index 8de9d862..fdbf66cf 100644 --- a/app/helpers/items_helper.rb +++ b/app/helpers/items_helper.rb @@ -1,12 +1,33 @@ module ItemsHelper - StandardSpeciesImageFormat = 'http://pets.neopets.com/cp/%s/1/1.png' + module PetTypeImage + Format = 'http://pets.neopets.com/cp/%s/%i/%i.png' + + Emotions = { + :happy => 1, + :sad => 2, + :angry => 3, + :ill => 4 + } + + Sizes = { + :face => 1, + :thumb => 2, + :zoom => 3, + :full => 4 + } + end - def standard_species_images(species_list) - pet_types = PetType.random_basic_per_species(species_list.map(&:id)) - raw(pet_types.inject('') do |html, pet_type| - src = sprintf(StandardSpeciesImageFormat, pet_type.image_hash) - human_name = pet_type.species.name.humanize - image = image_tag(src, :alt => human_name, :title => human_name) + def standard_species_search_links + build_on_random_standard_pet_types(Species.all) do |pet_type| + image = pet_type_image(pet_type, :happy, :zoom) + query = "species:#{pet_type.species.name}" + link_to(image, items_path(:q => query)) + end + end + + def standard_species_images(species) + build_on_random_standard_pet_types(species) do |pet_type| + image = pet_type_image(pet_type, :happy, :face) attributes = { 'data-id' => pet_type.id, 'data-body-id' => pet_type.body_id @@ -18,11 +39,25 @@ module ItemsHelper pet_type_attribute.send(subattribute_name) end end - html + link_to( + link_to( image, '#', attributes ) - end) + end + end + + private + + def build_on_random_standard_pet_types(species, &block) + raw(PetType.random_basic_per_species(species.map(&:id)).map(&block).join) + end + + def pet_type_image(pet_type, emotion, size) + emotion_id = PetTypeImage::Emotions[emotion] + size_id = PetTypeImage::Sizes[size] + src = sprintf(PetTypeImage::Format, pet_type.image_hash, emotion_id, size_id) + human_name = pet_type.species.name.humanize + image_tag(src, :alt => human_name, :title => human_name) end end diff --git a/app/stylesheets/items/_index.scss b/app/stylesheets/items/_index.scss new file mode 100644 index 00000000..ef614c97 --- /dev/null +++ b/app/stylesheets/items/_index.scss @@ -0,0 +1,36 @@ +form { + margin-bottom: 2em; +} + +@mixin main_unit { + float: left; + width: 49%; + + h2 { + font-size: 125%; + } +} + +#search-help { + @include main_unit; + padding-right: 1%; + + dl { + text-align: left; + } + + dd { + margin-bottom: 1em; + } +} + +#species-search-links { + @include main_unit; + + padding-left: 1%; + + img { + height: 80px; + width: 80px; + } +} diff --git a/app/stylesheets/screen.scss b/app/stylesheets/screen.scss index d3704390..56b9b2a3 100644 --- a/app/stylesheets/screen.scss +++ b/app/stylesheets/screen.scss @@ -84,12 +84,14 @@ h1 a { } } -a.item { +a { img { @include opacity(.9); } - &:hover img { - @include opacity(1); + &:hover, &:focus { + img { + @include opacity(1); + } } } @@ -115,4 +117,5 @@ a.item { src: url('http://impress.openneo.net/assets/fonts/Delicious-Italic.otf'); } +@import "items/index"; @import "items/show"; diff --git a/app/views/items/index.html.haml b/app/views/items/index.html.haml index 83a70372..38663e87 100644 --- a/app/views/items/index.html.haml +++ b/app/views/items/index.html.haml @@ -11,3 +11,19 @@ = will_paginate @results = render @results = will_paginate @results +- else + #search-help + %h2 Find what you're looking for + %dl + %dt negg + %dd returns any item with the word "negg" in it + %dt floating doll + %dd returns any item with the words "floating" and "doll" in it + %dt "easter negg" + %dd returns any item with the phrase "easter negg" in it + %dt species:shoyru + %dd returns any item a Shoyru can wear + + #species-search-links + %h2 Can't decide? Search by species + = standard_species_search_links diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css index bc9055b2..dd7ad5ea 100644 --- a/public/stylesheets/compiled/screen.css +++ b/public/stylesheets/compiled/screen.css @@ -541,7 +541,7 @@ h1 a:hover { } /* line 88, ../../../app/stylesheets/screen.scss */ -a.item img { +a img { -moz-opacity: 0.9; -webkit-opacity: 0.9; -o-opacity: 0.9; @@ -550,8 +550,8 @@ a.item img { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); } -/* line 91, ../../../app/stylesheets/screen.scss */ -a.item:hover img { +/* line 92, ../../../app/stylesheets/screen.scss */ +a:hover img, a:focus img { -moz-opacity: 1; -webkit-opacity: 1; -o-opacity: 1; @@ -579,6 +579,46 @@ a.item:hover img { src: url("http://impress.openneo.net/assets/fonts/Delicious-Italic.otf"); } +/* line 1, ../../../app/stylesheets/items/_index.scss */ +form { + margin-bottom: 2em; +} + +/* line 14, ../../../app/stylesheets/items/_index.scss */ +#search-help { + float: left; + width: 49%; + padding-right: 1%; +} +/* line 9, ../../../app/stylesheets/items/_index.scss */ +#search-help h2 { + font-size: 125%; +} +/* line 18, ../../../app/stylesheets/items/_index.scss */ +#search-help dl { + text-align: left; +} +/* line 22, ../../../app/stylesheets/items/_index.scss */ +#search-help dd { + margin-bottom: 1em; +} + +/* line 27, ../../../app/stylesheets/items/_index.scss */ +#species-search-links { + float: left; + width: 49%; + padding-left: 1%; +} +/* line 9, ../../../app/stylesheets/items/_index.scss */ +#species-search-links h2 { + font-size: 125%; +} +/* line 32, ../../../app/stylesheets/items/_index.scss */ +#species-search-links img { + height: 80px; + width: 80px; +} + /* line 2, ../../../app/stylesheets/items/_show.scss */ body.show header { border-bottom: 1px solid #033e6b;