ADDED: search category; CHANGED: artist list, placeholders, appearance

app/controllers/artists_controller.rb

@@ -6,6 +6,7 @@ class ArtistsController < ApplicationController
     @tracks = LastFM::Artist.getTopTracks @artist.name, 10
     @albums = LastFM::Artist.getTopAlbums @artist.name, 8
     @images = LastFM::Artist.getImages @artist.name, 18
+    @related= LastFM::Artist.getSimilar @artist.name, 6
   end
 
   def index

app/controllers/search_controller.rb

@@ -6,10 +6,11 @@ class SearchController < ApplicationController
     end
     
     if !params[:q].nil?
-      @artists = LastFM::Artist.search(params[:q].to_s.lstrip, 14)
+      @artists = LastFM::Artist.search(params[:q].to_s.lstrip, 8)
       @tracks = LastFM::Track.search(params[:q].to_s.lstrip, 24)
       @albums = LastFM::Album.search(params[:q].to_s.lstrip, 16)
     end
+    puts params
 
   end
 

app/views/artists/show.html.haml

@@ -24,19 +24,18 @@
           %li Top Albums
         %div{:wheel=>"music"}
           %div
-            %ul.songs
+            %ul.songs.long
               - @tracks.track.each do |track|
                 %li
                   = image_tag "ico/play.png", :class=>"play"
                   = image_tag "ico/add.png", :class=>"add"
                   %span= track.name
-                  =raw " "
                   = "by #{trimString(track.artist.name, 50)}"
             %br.clean
               = link_to "NACHLADEN", :class => "more" do
                 = image_tag "ico/more.png"
           %div
-            %ul.albums
+            %ul.albums.wide
               - @albums.album.each do |album|
                 %li
                   .img= image_tag validate_img_url(album.image, "album", :medium)
@@ -49,13 +48,15 @@
             = link_to "NACHLADEN", :class => "more" do
               = image_tag "ico/more.png"
       .related
-        %ul.artists
-          - @artist.similar.artist.each_with_index do |artist, i|
-            - break if i >= 4
+        %ul.artists.ultrasmall
+          - @related.artist.each do |artist|
             %li
               - link_to :controller=>:artists,:action=>:show,:id=>CGI.escape(artist.name) do
-                = image_tag validate_img_url(artist.image, "artist", :large)
-                %p= trimString(artist.name, 18)
+                = image_tag validate_img_url(artist.image, "artist", :extralarge)
+                %p
+                  = trimString(artist.name, 19)
+                  %br><
+                  =raw "<span>#{'%.2f' % artist.match}% match</span>"
         %br.clean
         = link_to "NACHLADEN", :class => "more" do
           = image_tag "ico/more.png"

app/views/layouts/application.html.haml

@@ -23,6 +23,6 @@
                   %li Artists
                   %li Albums
                   %li Songs
-              = hidden_field_tag 'category', 'all'
+              = hidden_field_tag 'tab', 'all'
             = submit_tag '', :class=>"submit"
       = yield

app/views/search/index.html.haml

@@ -1,6 +1,7 @@
+#predefinedTab= params[:tab]
 %h2.headline
-  =raw "Search for „#{params[:q]}“"
-%ul.navigation.hash{:steering => "search"}
+  =raw "Search for <span class='blue'>#{params[:q]}</span>"
+%ul.navigation.hash.main{:steering => "search"}
   %li.active ALL
   %li ARTISTS
   %li ALBUMS
@@ -9,20 +10,24 @@
 %div{:wheel => "search"}
   .active#search_all
     #search_all_artists
+      -#%h2.headline.small Artists
       %ul.artists
         - @artists.artist.each_with_index do |artist, i|
-          - break if i >= 7
+          - break if i == 2
           %li
-            - puts artist.name
             - link_to :controller=>:artists,:action=>:show,:id=>CGI.escape(artist.name) do
-              = image_tag validate_img_url(artist.image, "artist", :large)
-              %p= trimString(artist.name, 18)
+              = image_tag validate_img_url(artist.image, "artist", :extralarge)
+              %p
+                = trimString(artist.name, 30)
+                %br><
+                =raw "<span>#{artist.listeners} Listeners</span>"
       %br.clean
+      %br
     #search_all_songs
-      %h2.headline.small Songs
-      %ul.songs
+      -#%h2.headline.small Songs
+      %ul.songs.short
         - @tracks.track.each_with_index do |track, i|
-          - break if i == 8
+          - break if i == 13
           %li
             = image_tag "ico/play.png", :class=>"play"
             = image_tag "ico/add.png", :class=>"add"
@@ -30,8 +35,8 @@
             =raw "&nbsp;by "
             = link_to trimString(track.artist, 50), :controller=>"artists",:action=>"show",:id=>CGI.escape(track.artist)
     #search_all_albums
-      %h2.headline.small Albums
-      %ul.albums
+      -#%h2.headline.small Albums
+      %ul.albums.wide
         - @albums.album.each_with_index do |album, i|
           - break if i == 6
           %li
@@ -41,13 +46,16 @@
               %br>
               = link_to trimString(album.artist, 22), :controller=>"artists",:action=>"show",:id=>CGI.escape(album.artist)
   #search_artists
-    %ul.artists
+    %ul.artists.small
       - @artists.artist.each_with_index do |artist, i|
-        - break if i >= 14
+        - break if i >= 8
         %li
           - link_to :controller=>:artists,:action=>:show,:id=>CGI.escape(artist.name) do
-            = image_tag validate_img_url(artist.image, "artist", :large)
-            %p= trimString(artist.name, 18)
+            = image_tag validate_img_url(artist.image, "artist", :extralarge)
+            %p
+              = trimString(artist.name, 26)
+              %br><
+              =raw "<span>#{artist.listeners} Listeners</span>"
     %br.clean
     = link_to "NACHLADEN", :class => "more" do
       = image_tag "ico/more.png"

public/javascripts/application.js

@@ -10,13 +10,15 @@ $(document).ready(function(){
   initPictureOverlay();
   
   initArtistDescription();
-  
-  fitImages(".artists img"); // resize and resposition images (artists, album)
-  fitImages("#artist .side .img img");
 });
 
 $(window).load(function() {
   initSearchDropdown(); // dropdown for the search input
+    
+  fitImages(".artists img"); // resize and resposition images (artists, album)
+  fitImages(".artists.small img"); 
+  fitImages(".artists.ultrasmall img"); 
+  fitImages("#artist .side .img img");
 });
 
 
@@ -68,15 +70,17 @@ function initArtistDescription(){
 function fitImages(selector) {
   switch(selector)
   {
-    case ".artists img": divWidth = 126, divHeight = 81; break;
+    case ".artists img": divWidth = 252, divHeight = 166; break;
+    case ".artists.small img": divWidth = 230, divHeight = 152; break;
+    case ".artists.ultrasmall img": divWidth = 170, divHeight = 112; break;
     case "#artist .side .img img": divWidth = 363, divHeight = 241; break;
   }
 	$(selector).each(function() {
 		$(this).wrap("<div />");
-		
 		// use this instead of $(this).width(); because .width() of hidden images is zero!
 		width = this.width;
 		height = this.height;
+    
 		if( width < divWidth ) {
 			scaleRatio = width / divWidth;
 			width = divWidth;
@@ -122,14 +126,15 @@ function initSearchDropdown()
   
   $("div[dropping] .box li").live("click", function(){
     $("div[dropping] > span").html($(this).html());
-    $("div[dropping] #category").attr("value", $(this).html().toLowerCase());
+    $("div[dropping] #tab").attr("value", $(this).html().toLowerCase());
   });
 }
 
 // list fixes
 function fixLists()
 {
-  $(".artists li:nth-child(7n)").css("marginRight", 0);
+  $(".artists.small li:nth-child(4n)").css("marginRight", 0);
+  $(".artists.ultrasmall li:nth-child(3n)").css("marginRight", 0);
   $(".songs.tab li:nth-child(2n)").css("marginRight", 0);
   $("#artist .gallery a:nth-child(6n)").css("marginRight", 0);
 }
@@ -137,6 +142,13 @@ function fixLists()
 // set positions for navigation elements
 function initNavigation()
 {
+  // set hash if submitted by search form
+  $searchTab = $("#predefinedTab").text();
+  if($searchTab != "")
+  {
+    $("#search_form #tab").attr("value", $searchTab);
+    $("#search_form .selection > span").text($searchTab);
+  }
   // add positions and hash control
   $(".navigation").each(function(){
     $i = 0;
@@ -152,8 +164,18 @@ function initNavigation()
   $('.navigation').each(function(){
     if($(this).hasClass("hash"))
     {
-      $str = $.deparam.fragment(window.location.href);
-      $active = $(".navigation li[hashcontrol="+$str.tab+"]");
+      $searchTab = $("#predefinedTab").text();
+      if($(this).hasClass("main") && $searchTab != "")
+      {
+        $str = $searchTab;
+        $("#search_form .selection > span").text($searchTab);
+      }
+      else 
+      {
+        $str = $.deparam.fragment(window.location.href);
+        $str = $str.tab;
+      }
+      $active = $(".navigation li[hashcontrol="+$str+"]");
       if($active.text() == "" || $active == null) $id = 0;
       else $id = $active.parent().children().index($active);
     }
@@ -200,9 +222,17 @@ function handleNavigation()
     $settings['newpos'] = $settings['nav'].children().index(this);
     $settings['oldpos'] = $(this).attr("position");
     $settings['wheel']  = $settings['nav'].attr("steering");
+    $settings['hash']   = $(this).attr("hashcontrol");
     $settings['speed']  = 300;
     $settings['range']  = 50;
     
+    // for search bar
+    if($(this).parent().hasClass("main"))
+    {
+      $("#search_form .selection > span").text($settings['hash']);
+      $("#search_form #tab").attr("value", $settings['hash']);
+    }
+    
     // get the width of the navigation elements which will fade out
     for(var i=0; i<$settings['newpos'];i++){ 
       $fadeOutWidth += $settings['nav'].children("li:eq("+i+")").width(); 

public/stylesheets/layout.css

@@ -1,5 +1,6 @@
 @charset "utf-8";
 /** FONTS **/
+
 @font-face{ 
 	font-family: AauxNextLight;
 	src: url('../fonts/aauxnext/aauxnext-lt-webfont.eot');
@@ -28,10 +29,11 @@
 	     url('../fonts/aauxnext/aauxnext-bd-webfont.svg#webfont') format("svg");
 }
 
+
 /** STANDARDS **/
 body
 {
-    background: #f6f9fb url('../images/bg/overall.png') repeat-x top;
+    background: #f6f9fb url('../images/bg/overall2.png') repeat-y top center;
     /* background: white; */
     font-size: 14px;
     color: #7d8791;
@@ -168,13 +170,17 @@ a { text-decoration: none; color: #7d8791; }
 	-moz-border-radius-bottomright: 8px;
 	border-bottom-right-radius: 8px;
 }
+#predefinedTab { display: none; }
 
 .headline
 {
   color: #7d8791;
-  font-family: AauxNextLight, "Segoe UI", Arial, sans-serif;
   font-size: 32px;
 }
+.headline, .headline span
+{
+  font-family: AauxNextLight, "Segoe UI", Arial, sans-serif!important;
+}
 .headline.small
 {
   font-size: 24px;
@@ -207,27 +213,61 @@ a { text-decoration: none; color: #7d8791; }
 .navigation.sub li:hover { color: #68727c; }
 .navigation.sub .active { color: #7d8791; font-family: AauxNextLight, "Segoe UI", Arial, sans-serif; }
 
+.artists { overflow: hidden; }
 .artists li
 {
-  width: 126px;
-  height: 123px;
-  background: url('../images/bg/fuse.png') 0 0;
+  width: 252px;
+  height: 166px;
+  /*background: url('../images/bg/fuse.png') -401px 160px no-repeat;*/
+  overflow: hidden;
   float: left;
-  margin: 0 11px 20px 0;
+  position: relative;
+  margin-right: 10px;
 }
-.artists div { position: relative; width: 126px; height: 81px; overflow: hidden; }
-.artists img { float: left; }
+.artists li:last-child { margin-right: 0;}
+.artists div
+{
+  width: 252px;
+  height: 166px;
+  position: relative;
+  overflow: hidden;
+}
+
+.artists.small li, .artists.small li div
+{
+  width: 230px;
+  height: 152px;
+}
+.artists.ultrasmall li, .artists.ultrasmall li div
+{
+  width: 170px;
+  height: 112px;
+}
+.artists img { position: absolute; float: left;}
+
 .artists p
 {
+  background: url('../images/bg/artist-balken.png') repeat-x;
   color: White;
-  font-size: 12px;
-  height: 23px; line-height: 23px;
-  text-indent: 10px;
+  font-size: 16px;
+  height: 38px;
+  padding: 8px 10px 0 10px;
+  line-height: 14px;
   font-family: AauxNextBold, "Segoe UI", Arial, sans-serif; 
   display: inline-block;
-  width: 100%;
+  width: 232px;
+  position: absolute;
+  bottom: 0;
+}
+.artists.small li, .artists.ultrasmall li { margin-bottom: 15px; }
+.artists.small p { width: 210px; }
+.artists.ultrasmall p { width: 150px;}
+.artists p span
+{
+  font-size: 11px;
+  font-weight: normal;
+  color: #c5ced4;
 }
-.artists li:first-child { background-position: -126px 0; }
 
 .related .artists li { margin-right: 6px; }
 .related .artists li:first-child { background-position: 0 0; }
@@ -244,19 +284,22 @@ a { text-decoration: none; color: #7d8791; }
   font-size: 12px;
   width: 465px;
 }
+.songs.short li { width: 395px; }
+.songs.long li { width: 530px; }
 .songs.tab { overflow: hidden; }
 .songs.tab li { float: left; margin-right: 20px; }
 .songs li span 
 { 
   color: #2d3135; 
-  margin-left: 5px;
+  margin-left: 10px;
 }
+.songs.long li span { color: #027bbf;}
 .songs li img { vertical-align: middle; }
 .songs a:hover, .albums a:hover { color: #505861;}
 
-
-#search_all_songs { float: left; }
-#search_all_albums { float: right; width: 468px; }
+#search_all_artists { float: left; }
+#search_all_songs { float: right; }
+#search_all_albums { float: left; width: 514px; }
 
 .albums li 
 {
@@ -264,6 +307,7 @@ a { text-decoration: none; color: #7d8791; }
   width: 233px;
   margin-bottom: 15px;
 }
+.albums.wide li { width: 257px; }
 .albums .img 
 { 
   background: url('../images/bg/fuse.png') -294px 0 no-repeat; 
@@ -365,17 +409,16 @@ div[wheel] > div { display: none; opacity: 0.0; position: relative; }
 .overlay .close
 {
 	position: absolute;
-	right: 134px; top: 20px;
+	right: 134px; top: 21px;
   cursor: pointer;
   z-index: 9999;
 }
 
-#overlayGallery .close { right: 241px;}
+#overlayGallery .close { right: 106px;}
 #overlayGallery
 {
   width: 272px;
 	display: none;
-	margin-left: -136px;
 }
 #overlayGallery .content img { float: left; }
 #overlayGallery .content 
@@ -391,6 +434,7 @@ div[wheel] > div { display: none; opacity: 0.0; position: relative; }
   bottom: 25px; margin-left: -48px;
   display: none;
 }
+.blockUI.blockMsg.blockPage { margin-left: -136px;}
 /*
 .overlay
 {