swcs/9minutes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CHANGED: gallery overlay, Tags, Artists List; ADDED: Related (Artists)

Browse Source
This commit is contained in:
Tobias Klika
2011-05-06 13:19:00 +02:00
parent 812ea84770
commit f26ec3ecdb
8 changed files with 129 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/controllers/search_controller.rb
+1 -1
View File
@@ -6,7 +6,7 @@ class SearchController < ApplicationController
end
if !params[:q].nil?
@artists = LastFM::Artist.search(params[:q].to_s.lstrip, 18)
@artists = LastFM::Artist.search(params[:q].to_s.lstrip, 14)
@tracks = LastFM::Track.search(params[:q].to_s.lstrip, 24)
@albums = LastFM::Album.search(params[:q].to_s.lstrip, 16)
end
app/views/artists/show.html.haml
+18 -4
View File
@@ -5,7 +5,8 @@
%span
%b Tags:
- @artist.tags.tag.each_with_index do |tag, i|
= (i!=0) ? ", "+tag.name : tag.name
- @tag = link_to tag.name, search_index_path(:q=>tag.name)
=raw (i!=0) ? ", "+@tag:@tag
%br
%br
@@ -50,11 +51,22 @@
%br.clean
= link_to "NACHLADEN", :class => "more" do
= image_tag "ico/more.png"
%div Related
.related
%ul.artists
- @artist.similar.artist.each_with_index do |artist, i|
- break if i >= 4
%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)
%br.clean
= link_to "NACHLADEN", :class => "more" do
= image_tag "ico/more.png"
.gallery
- @images.image.each_with_index do |img, i|
- @bigPicture = validate_img_url(img.sizes["size"], "gallery", :extralarge)
= link_to "javascript:void(0);", :picture=>@bigPicture, :onClick=>"javascript:overlay('#overlayGallery');" do
- @orignalPicture = validate_img_url(img.sizes["size"], "gallery", :original)
= link_to "javascript:void(0);", :picture=>@bigPicture, :original=>@orignalPicture, :onClick=>"javascript:overlay('#overlayGallery');" do
=image_tag validate_img_url(img.sizes["size"], "gallery", :medium)
@@ -62,4 +74,6 @@
%span.close<
= image_tag "ico/close.png"
.content
= image_tag "placeholder/gallery.png"
= image_tag "placeholder/gallery.png", :class=>"galleryimage"
= link_to "#", :class => "original" do
= image_tag "ico/gallery-fullscreen.png"
app/views/layouts/application.html.haml
+1 -1
View File
@@ -9,7 +9,7 @@
#site
#head
%h1
= image_tag "9minutes.png"
= link_to image_tag("9minutes.png"), "/"
= form_tag search_index_path, :method => 'get', :id => "search_form", :class => "right" do
.wrap
= text_field_tag 'q', params[:q], :class => "input", :placeholder => "Search for"
app/views/search/index.html.haml
+6 -6
View File
@@ -11,12 +11,12 @@
#search_all_artists
%ul.artists
- @artists.artist.each_with_index do |artist, i|
- break if i >= 6
- break if i >= 7
%li
- puts artist.name
- link_to :controller=>"artists",:action=>"show",:id=>CGI.escape(artist.name) do
- 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, 22)
%p= trimString(artist.name, 18)
%br.clean
#search_all_songs
%h2.headline.small Songs
@@ -43,11 +43,11 @@
#search_artists
%ul.artists
- @artists.artist.each_with_index do |artist, i|
- break if i >= 12
- break if i >= 14
%li
= link_to "LINK" do
- 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, 22)
%p= trimString(artist.name, 18)
%br.clean
= link_to "NACHLADEN", :class => "more" do
= image_tag "ico/more.png"
public/images/bg/fuse.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

public/images/ico/gallery-fullscreen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

public/javascripts/application.js
+26 -11
View File
@@ -6,11 +6,11 @@ $(document).ready(function(){
initNavigation(); // set positions and :active for navigation elements
handleNavigation(); // handle animations and content switch
orderNavigation(); // order if predefined category
fitArtistImages(); // resize and resposition images (artists, album)
onImageError(); // replace broken image links with placeholders
initPictureOverlay();
fitImages(".artists img"); // resize and resposition images (artists, album)
fitImages("#artist .side .img img");
});
$(window).load(function() {
@@ -21,11 +21,18 @@ $(window).load(function() {
function initPictureOverlay(){
$('#artist .gallery a').live("click", function(){
$src = $(this).attr("picture");
$('#overlayGallery .content img').hide().attr('src', $src).show();
$original = $(this).attr("original");
$('#overlayGallery .original').hide().attr('href', $original);
$('#overlayGallery .content .galleryimage').hide().attr('src', $src)
.bind("load", function() {
$(this).fadeIn(300, function(){
$('#overlayGallery .original').fadeIn(300);
});
});
});
$('#overlayGallery .close').click(function(){
setTimeout(
"$('#overlayGallery .content img').attr('src', '/images/placeholder/gallery.png');"
"$('#overlayGallery .content .galleryimage').attr('src', '/images/placeholder/gallery.png');"
, 450);
});
}
@@ -43,21 +50,29 @@ function ajj(){
function fitArtistImages() {
$("ul.artists img").each(function() {
function fitImages(selector) {
switch(selector)
{
case ".artists img": divWidth = 126, divHeight = 81; break;
case "#artist .side .img img": divWidth = 363, divHeight = 241; break;
}
$(selector).each(function() {
$(this).wrap("<div />");
divWidth = 147, divHeight = 94;
// 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;
height /= scaleRatio;
}
else {
scaleRatio = width / divWidth;
width = divWidth;
height /= scaleRatio;
}
if ( height < divHeight ) {
scaleRatio = height / divHeight;
height = divHeight;
@@ -99,7 +114,7 @@ function initSearchDropdown()
// list fixes
function fixLists()
{
$(".artists li:nth-child(6n)").css("marginRight", 0);
$(".artists li:nth-child(7n)").css("marginRight", 0);
$(".songs.tab li:nth-child(2n)").css("marginRight", 0);
$("#artist .gallery a:nth-child(6n)").css("marginRight", 0);
}
public/stylesheets/layout.css
+77 -10
View File
@@ -209,25 +209,28 @@ a { text-decoration: none; color: #7d8791; }
.artists li
{
width: 147px;
height: 143px;
width: 126px;
height: 123px;
background: url('../images/bg/fuse.png') 0 0;
float: left;
margin: 0 13px 20px 0;
margin: 0 11px 20px 0;
}
.artists div { position: relative; width: 147px; height: 94px; overflow: hidden; }
.artists div { position: relative; width: 126px; height: 81px; overflow: hidden; }
.artists img { float: left; }
.artists p
{
color: White;
font-size: 12px;
height: 27px; line-height: 27px;
height: 23px; line-height: 23px;
text-indent: 10px;
font-family: AauxNextBold, "Segoe UI", Arial, sans-serif;
display: inline-block;
width: 100%;
}
.artists li:first-child { background-position: -147px 0; }
.artists li:first-child { background-position: -126px 0; }
.related .artists li { margin-right: 6px; }
.related .artists li:first-child { background-position: 0 0; }
#search_all
{
@@ -286,10 +289,18 @@ div[wheel] > div { display: none; opacity: 0.0; position: relative; }
width: 439px;
height: 281px;
background: url('../images/bg/fuse.png') -401px 160px no-repeat;
overflow: hidden;
}
#artist .side .img div
{
width: 363px;
height: 241px;
position: relative;
overflow: hidden;
}
#artist .side .img img { width: 363px; height: 241px; }
#artist .description { width: 363px; font-size: 12px; }
#artist .description span { color: #2e353c; }
#artist .description a {text-decoration: underline; }
#artist .description span, #artist .description span a { color: #2e353c; text-decoration: none;}
#artist .main
{
float: right;
@@ -307,7 +318,7 @@ div[wheel] > div { display: none; opacity: 0.0; position: relative; }
padding: 7px;
border: 1px solid #e9edf0;
display: inline;
vertical-align: middle;
vertical-align: bottom;
margin-bottom: 10px;
}
#artist .gallery a
@@ -356,12 +367,68 @@ div[wheel] > div { display: none; opacity: 0.0; position: relative; }
margin-left: -136px;
}
#overlayGallery .content img { float: left; }
#overlayGallery .content {
#overlayGallery .content
{
overflow: hidden;
width: 252px;
min-height: 150px;
background: #0d1213 url('../images/placeholder/gallery.png') no-repeat center;
}
#overlayGallery .original
{
position: absolute;
bottom: 25px; margin-left: -48px;
display: none;
}
/*
.overlay
{
background: rgba(255,255,255,0.6);
padding: 7px;
border-radius: 14px;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
-moz-box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 10px 10px rgba(0,0,0,0.2);
box-shadow: 0 0 3px 3px rgba(0,0,0,0.1);
width: 488px;
display: none;
}
.overlay > div
{
background: #1a1c1f;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.overlay .content
{
padding: 10px;
}
.overlay .close
{
position: absolute;
right: 134px; top: 20px;
cursor: pointer;
z-index: 9999;
}
#overlayGallery .close { right: 76px;}
#overlayGallery
{
width: 600px;
display: none;
margin-left: -300px;
}
#overlayGallery .content img { float: left; }
#overlayGallery .content {
overflow: hidden;
width: 580px;
min-height: 150px;
background: #0d1213 url('../images/placeholder/gallery.png') no-repeat center;
}
*/