localhots/oldhaven
1
0
Fork 0
Code Releases Activity

Improved design, delayed blowjobs, error handling, nice artist loading.

Browse Source
This commit is contained in:
magnolia-fan 2011-06-21 00:42:21 +04:00
parent 7dbf6b87cc
commit b69c9cdbe0
13 changed files with 219 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

257
README
View File

@ -1,256 +1 @@
== Welcome to Rails http://beathaven.org/
Rails is a web-application framework that includes everything needed to create
database-backed web applications according to the Model-View-Control pattern.
This pattern splits the view (also called the presentation) into "dumb"
templates that are primarily responsible for inserting pre-built data in between
HTML tags. The model contains the "smart" domain objects (such as Account,
Product, Person, Post) that holds all the business logic and knows how to
persist themselves to a database. The controller handles the incoming requests
(such as Save New Account, Update Product, Show Post) by manipulating the model
and directing data to the view.
In Rails, the model is handled by what's called an object-relational mapping
layer entitled Active Record. This layer allows you to present the data from
database rows as objects and embellish these data objects with business logic
methods. You can read more about Active Record in
link:files/vendor/rails/activerecord/README.html.
The controller and view are handled by the Action Pack, which handles both
layers by its two parts: Action View and Action Controller. These two layers
are bundled in a single package due to their heavy interdependence. This is
unlike the relationship between the Active Record and Action Pack that is much
more separate. Each of these packages can be used independently outside of
Rails. You can read more about Action Pack in
link:files/vendor/rails/actionpack/README.html.
== Getting Started
1. At the command prompt, create a new Rails application:
<tt>rails new myapp</tt> (where <tt>myapp</tt> is the application name)
2. Change directory to <tt>myapp</tt> and start the web server:
<tt>cd myapp; rails server</tt> (run with --help for options)
3. Go to http://localhost:3000/ and you'll see:
"Welcome aboard: You're riding Ruby on Rails!"
4. Follow the guidelines to start developing your application. You can find
the following resources handy:
* The Getting Started Guide: http://guides.rubyonrails.org/getting_started.html
* Ruby on Rails Tutorial Book: http://www.railstutorial.org/
== Debugging Rails
Sometimes your application goes wrong. Fortunately there are a lot of tools that
will help you debug it and get it back on the rails.
First area to check is the application log files. Have "tail -f" commands
running on the server.log and development.log. Rails will automatically display
debugging and runtime information to these files. Debugging info will also be
shown in the browser on requests from 127.0.0.1.
You can also log your own messages directly into the log file from your code
using the Ruby logger class from inside your controllers. Example:
class WeblogController < ActionController::Base
def destroy
@weblog = Weblog.find(params[:id])
@weblog.destroy
logger.info("#{Time.now} Destroyed Weblog ID ##{@weblog.id}!")
end
end
The result will be a message in your log file along the lines of:
Mon Oct 08 14:22:29 +1000 2007 Destroyed Weblog ID #1!
More information on how to use the logger is at http://www.ruby-doc.org/core/
Also, Ruby documentation can be found at http://www.ruby-lang.org/. There are
several books available online as well:
* Programming Ruby: http://www.ruby-doc.org/docs/ProgrammingRuby/ (Pickaxe)
* Learn to Program: http://pine.fm/LearnToProgram/ (a beginners guide)
These two books will bring you up to speed on the Ruby language and also on
programming in general.
== Debugger
Debugger support is available through the debugger command when you start your
Mongrel or WEBrick server with --debugger. This means that you can break out of
execution at any point in the code, investigate and change the model, and then,
resume execution! You need to install ruby-debug to run the server in debugging
mode. With gems, use <tt>sudo gem install ruby-debug</tt>. Example:
class WeblogController < ActionController::Base
def index
@posts = Post.find(:all)
debugger
end
end
So the controller will accept the action, run the first line, then present you
with a IRB prompt in the server window. Here you can do things like:
>> @posts.inspect
=> "[#<Post:0x14a6be8
@attributes={"title"=>nil, "body"=>nil, "id"=>"1"}>,
#<Post:0x14a6620
@attributes={"title"=>"Rails", "body"=>"Only ten..", "id"=>"2"}>]"
>> @posts.first.title = "hello from a debugger"
=> "hello from a debugger"
...and even better, you can examine how your runtime objects actually work:
>> f = @posts.first
=> #<Post:0x13630c4 @attributes={"title"=>nil, "body"=>nil, "id"=>"1"}>
>> f.
Display all 152 possibilities? (y or n)
Finally, when you're ready to resume execution, you can enter "cont".
== Console
The console is a Ruby shell, which allows you to interact with your
application's domain model. Here you'll have all parts of the application
configured, just like it is when the application is running. You can inspect
domain models, change values, and save to the database. Starting the script
without arguments will launch it in the development environment.
To start the console, run <tt>rails console</tt> from the application
directory.
Options:
* Passing the <tt>-s, --sandbox</tt> argument will rollback any modifications
made to the database.
* Passing an environment name as an argument will load the corresponding
environment. Example: <tt>rails console production</tt>.
To reload your controllers and models after launching the console run
<tt>reload!</tt>
More information about irb can be found at:
link:http://www.rubycentral.com/pickaxe/irb.html
== dbconsole
You can go to the command line of your database directly through <tt>rails
dbconsole</tt>. You would be connected to the database with the credentials
defined in database.yml. Starting the script without arguments will connect you
to the development database. Passing an argument will connect you to a different
database, like <tt>rails dbconsole production</tt>. Currently works for MySQL,
PostgreSQL and SQLite 3.
== Description of Contents
The default directory structure of a generated Ruby on Rails application:
|-- app
| |-- controllers
| |-- helpers
| |-- mailers
| |-- models
| `-- views
| `-- layouts
|-- config
| |-- environments
| |-- initializers
| `-- locales
|-- db
|-- doc
|-- lib
| `-- tasks
|-- log
|-- public
| |-- images
| |-- javascripts
| `-- stylesheets
|-- script
|-- test
| |-- fixtures
| |-- functional
| |-- integration
| |-- performance
| `-- unit
|-- tmp
| |-- cache
| |-- pids
| |-- sessions
| `-- sockets
`-- vendor
`-- plugins
app
Holds all the code that's specific to this particular application.
app/controllers
Holds controllers that should be named like weblogs_controller.rb for
automated URL mapping. All controllers should descend from
ApplicationController which itself descends from ActionController::Base.
app/models
Holds models that should be named like post.rb. Models descend from
ActiveRecord::Base by default.
app/views
Holds the template files for the view that should be named like
weblogs/index.html.erb for the WeblogsController#index action. All views use
eRuby syntax by default.
app/views/layouts
Holds the template files for layouts to be used with views. This models the
common header/footer method of wrapping views. In your views, define a layout
using the <tt>layout :default</tt> and create a file named default.html.erb.
Inside default.html.erb, call <% yield %> to render the view using this
layout.
app/helpers
Holds view helpers that should be named like weblogs_helper.rb. These are
generated for you automatically when using generators for controllers.
Helpers can be used to wrap functionality for your views into methods.
config
Configuration files for the Rails environment, the routing map, the database,
and other dependencies.
db
Contains the database schema in schema.rb. db/migrate contains all the
sequence of Migrations for your schema.
doc
This directory is where your application documentation will be stored when
generated using <tt>rake doc:app</tt>
lib
Application specific libraries. Basically, any kind of custom code that
doesn't belong under controllers, models, or helpers. This directory is in
the load path.
public
The directory available for the web server. Contains subdirectories for
images, stylesheets, and javascripts. Also contains the dispatchers and the
default HTML files. This should be set as the DOCUMENT_ROOT of your web
server.
script
Helper scripts for automation and generation.
test
Unit and functional tests along with fixtures. When using the rails generate
command, template test files will be generated for you and placed in this
directory.
vendor
External libraries that the application depends on. Also includes the plugins
subdirectory. If the app has frozen rails, those gems also go here, under
vendor/rails/. This directory is in the load path.

11
app/controllers/artist_controller.rb
View File

@ -6,7 +6,14 @@ class ArtistController < ApplicationController
name = params[:name].gsub('%20', ' ').gsub('+', ' ') name = params[:name].gsub('%20', ' ').gsub('+', ' ')
artist = Artist.find_by_name(name) artist = Artist.find_by_name(name)
if artist and artist.status == 0 if artist and artist.status == 0
render :json => {status: 'loading'} pics = []
pics << artist.pic_url unless artist.pic_url.nil?
unless artist.albums.empty?
artist.albums.each do |album|
pics << album.pic_url unless album.pic_url.nil?
end
end
render :json => {status: 'loading', pics: pics}
return return
end end
unless artist unless artist
@ -21,7 +28,7 @@ class ArtistController < ApplicationController
artist.status = 0 artist.status = 0
artist.save artist.save
Delayed::Job.enqueue LoadArtistJob.new(name) Delayed::Job.enqueue LoadArtistJob.new(name)
render :json => {status: 'loading_started'} render :json => {status: 'loading', pics: []}
return return
elsif results[0][:name].downcase == name.downcase or results[0][:name].downcase == 'the '+ name.downcase elsif results[0][:name].downcase == name.downcase or results[0][:name].downcase == 'the '+ name.downcase
render :json => {status: 'corrected', page: results[0][:name]} render :json => {status: 'corrected', page: results[0][:name]}

BIN
public/images/concrete_wall_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB

32
public/javascripts/beathaven/ajax.js
View File

@ -1,11 +1,17 @@
var Ajax = { var Ajax = {
referer: false,
loadArtistData: function(name) { loadArtistData: function(name) {
Search.showSpinner(); Search.showSpinner();
name = name.split(' ').join('+'); name = name.split(' ').join('+');
$.get('/artist/'+ name +'/', function(data){ $.get('/artist/'+ name +'/', function(data){
if (typeof data.status != 'undefined') { if (typeof data.status != 'undefined') {
if (data.status == 'loaded') { if (data.status == 'loading') {
Ajax.loadArtistData(name); Search.showArtistPics(data.pics);
setTimeout(function() {
Ajax.loadArtistData(name);
}, 3000);
} else if (data.status == 'corrected') { } else if (data.status == 'corrected') {
Ajax.loadArtistData(data.page); Ajax.loadArtistData(data.page);
} else if (data.status == 'suggestions') { } else if (data.status == 'suggestions') {
@ -16,10 +22,7 @@ var Ajax = {
} }
return false; return false;
} else { } else {
var display_name = name.split('+').join(' ');
yaCounter7596904.hit('/artist/'+ name +'/', display_name, Ajax.getAnchor());
Ajax.setArchor('/artist/'+ name +'/'); Ajax.setArchor('/artist/'+ name +'/');
Ajax.setTitle(display_name);
Pages.renderArtist(data); Pages.renderArtist(data);
beathaven.redrawScrollbar(); beathaven.redrawScrollbar();
} }
@ -27,23 +30,9 @@ var Ajax = {
}, },
loadSearchPage: function() { loadSearchPage: function() {
$.get('/demo/search.html', function(data){ $.get('/search.html', function(data){
yaCounter7596904.hit('/search/', 'Artist Search', Ajax.getAnchor());
Ajax.setArchor('/search/'); Ajax.setArchor('/search/');
Ajax.setTitle('Artist Search'); Pages.renderSearch(data);
$('#data-container .inner').html(data);
beathaven.redrawScrollbar();
$('#search_field').autocomplete({
serviceUrl: '/artist/autocomplete', // Страница для обработки запросов автозаполнения
minChars: 2, // Минимальная длина запроса для срабатывания автозаполнения
delimiter: /(,|;)\s*/, // Разделитель для нескольких запросов, символ или регулярное выражение
maxHeight: 400, // Максимальная высота списка подсказок, в пикселях
width: 415, // Ширина списка
zIndex: 9999, // z-index списка
deferRequestBy: 150, // Задержка запроса (мсек)
onSelect: Ajax.loadArtistData
});
$('#search_field').focus();
}) })
}, },
@ -61,6 +50,7 @@ var Ajax = {
}, },
setArchor: function(anchor) { setArchor: function(anchor) {
Ajax.referer = Ajax.getAnchor();
window.location.hash = '#'+ anchor; window.location.hash = '#'+ anchor;
}, },

8
public/javascripts/beathaven/layout.js
View File

@ -27,11 +27,19 @@ var beathaven = {
}, },
checkRedrawScrollbar: function() { checkRedrawScrollbar: function() {
var focused_id = false;
if (typeof document.activeElement.id !== 'undefined') {
focused_id = document.activeElement.id;
}
var outer_height = $('#data-container > div').outerHeight(); var outer_height = $('#data-container > div').outerHeight();
if (outer_height > 300 && outer_height != beathaven.last_height) { if (outer_height > 300 && outer_height != beathaven.last_height) {
beathaven.last_height = outer_height; beathaven.last_height = outer_height;
beathaven.redrawScrollbar(); beathaven.redrawScrollbar();
} }
if (focused_id) {
document.getElementById(focused_id).focus();
focused_id = false;
}
window.setTimeout(beathaven.checkRedrawScrollbar, 500); window.setTimeout(beathaven.checkRedrawScrollbar, 500);
}, },

31
public/javascripts/beathaven/pages.js
View File

@ -52,6 +52,37 @@ var Pages = {
} }
}) })
$('#data-container').css('backgroundImage', 'none');
$('#data-container .inner').html('').append(artist_info).append(albums_info); $('#data-container .inner').html('').append(artist_info).append(albums_info);
yaCounter7596904.hit(Ajax.getAnchor(), data.artist.name, Ajax.referer);
Ajax.setTitle(data.artist.name);
},
renderSearch: function(data) {
$('#data-container').css('background', 'url(/images/concrete_wall_2.png) 0 -30px repeat');
$('#data-container .inner').html(data);
$('#search-container')
.css('marginLeft', ($('#data-container').width() - 425) / 2 + 'px')
.css('marginTop', ($('#data-container').height() / 2 - 230) +'px')
.height(($('#data-container').height() - $('#search_form').height()) / 2);
setTimeout(function(){
$('#search_field').autocomplete({
serviceUrl: '/artist/autocomplete', // Страница для обработки запросов автозаполнения
minChars: 2, // Минимальная длина запроса для срабатывания автозаполнения
delimiter: /(,|;)\s*/, // Разделитель для нескольких запросов, символ или регулярное выражение
maxHeight: 400, // Максимальная высота списка подсказок, в пикселях
width: 415, // Ширина списка
zIndex: 9999, // z-index списка
deferRequestBy: 500, // Задержка запроса (мсек)
onSelect: Ajax.loadArtistData
});
$('#search_field').focus();
}, 501)
yaCounter7596904.hit(Ajax.getAnchor(), 'Artist Search', Ajax.referer);
Ajax.setTitle('Artist Search');
} }
} }

12
public/javascripts/beathaven/search.js
View File

@ -27,6 +27,18 @@ var Search = {
hideSuggestions: function() { hideSuggestions: function() {
$('.suggestions ul li').remove(); $('.suggestions ul li').remove();
$('.suggestions').hide(); $('.suggestions').hide();
},
showArtistPics: function(pics) {
$('.artist_loading, .artist_pics').show();
$('.artist_pics').html('');
for (var i = 0; i < pics.length; i++) {
$('.artist_pics').append('\
<div class="pic">\
<img src="'+ pics[i] +'" alt=""/>\
</div>\
');
}
} }
} }

17
public/search.html
View File

@ -3,20 +3,11 @@
<input type="text" id="search_field"/> <input type="text" id="search_field"/>
<input type="submit" value="Search" id="search_button"/> <input type="submit" value="Search" id="search_button"/>
</form> </form>
<img src="/images/loader.gif" alt="" /> <img class="spinner" src="/images/loader.gif" alt=""/>
<div class="artist_loading">Artist info is loading for the first time now. Usually it takes less than a minute, please wait a bit.</div>
<div class="artist_pics"></div>
<div class="suggestions"> <div class="suggestions">
<div>Misspelled?</div> <div>Misspelled?</div>
<ul> <ul></ul>
<li><a class="data artist">The Raconters</a></li>
<li><a class="data artist">The Raconteurs</a></li>
<li><a class="data artist">The Encounters</a></li>
<li><a class="data artist">Encounters</a></li>
<li><a class="data artist">The Encounter</a></li>
<li><a class="data artist">Carpenters</a></li>
<li><a class="data artist">The Dearhunters</a></li>
<li><a class="data artist">Jamhunters</a></li>
<li><a class="data artist">The Go Go Haunters</a></li>
<li><a class="data artist">The Beathunters</a></li>
</ul>
</div> </div>
</div> </div>

5
public/stylesheets/albums.css
View File

@ -38,6 +38,11 @@
.album .pic > * { .album .pic > * {
margin-left: 25px; margin-left: 25px;
} }
.album .pic img {
width: 248px;
height: 248px;
border: #DDD 1px solid;
}
.add-album-button-container { .add-album-button-container {
position: relative; position: relative;
margin: 10px -25px 0 0; margin: 10px -25px 0 0;

3
public/stylesheets/layout.css
View File

@ -13,6 +13,7 @@ body {
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
cursor: default; cursor: default;
min-width: 1000px;
} }
#header-container { #header-container {
@ -22,11 +23,13 @@ body {
width: 350px; width: 350px;
height: 600px; height: 600px;
float: right; float: right;
background-color: #222;
} }
#data-container { #data-container {
width: auto; width: auto;
margin-right: 350px; margin-right: 350px;
overflow-y: auto; overflow-y: auto;
min-width: 650px;
} }
#player { #player {

49
public/stylesheets/misc.css
View File

@ -5,7 +5,8 @@
} }
#navigation { #navigation {
background-color: #333; background-color: #EEE;
background-image: url(/images/concrete_wall_2.png);
height: 30px; height: 30px;
} }
#navigation li { #navigation li {
@ -14,13 +15,13 @@
width: auto; width: auto;
height: 30px; height: 30px;
margin-left: 10px; margin-left: 10px;
color: #FFF; color: #222;
line-height: 30px; line-height: 30px;
text-shadow: #CCC 0px 0px 0.5px; text-shadow: #666 0px 0px 0.5px;
} }
#navigation li:hover { #navigation li:hover {
cursor: pointer; cursor: pointer;
text-shadow: #CCC 0px 0px 2px; text-shadow: #666 0px 0px 2px;
} }
#navigation li.logo { #navigation li.logo {
font-size: 20px; font-size: 20px;
@ -38,7 +39,7 @@
#header-container .hello { #header-container .hello {
float: right; float: right;
margin: 6px 10px 0 0; margin: 6px 10px 0 0;
color: #FFF; color: #222;
} }
.button { .button {
@ -62,22 +63,44 @@
} }
.scrollbar-handle-container { .scrollbar-handle-container {
background: #FFF;
width: 8px; width: 8px;
} }
.scrollbar-handle { .scrollbar-handle {
width: 8px; width: 8px;
background: #EEE;
} }
.scrollbar-handle:hover { #data-container .scrollbar-handle-container {
background: #999; background-color: #FFF;
} }
.scrollbar-handle.move { #data-container .scrollbar-handle {
background: #AAA; background-color: #CCC;
} }
#data-container .scrollbar-handle:hover {
background-color: #999;
}
#data-container .scrollbar-handle.move {
background-color: #AAA;
}
#player-container .scrollbar-handle-container {
background-color: #222;
}
#player-container .scrollbar-handle {
background-color: #444;
}
#player-container .scrollbar-handle:hover {
background-color: #666;
}
#player-container .scrollbar-handle.move {
background-color: #888;
}
#error_page { #error_page {
position: relative; position: relative;

146
public/stylesheets/player.css
View File

@ -1,53 +1,50 @@
#player { #player .now-playing {
background-color: #222; height: 30px;
color: #FFF;
text-align: center;
line-height: 30px;
} }
#player .now-playing { #player .progress {
height: 30px; width: 330px;
color: #FFF; height: 5px;
text-align: center; background-color: #333;
line-height: 30px; margin: 0 10px;
} cursor: pointer;
#player .progress { }
width: 330px; #player .progress .loaded {
width: 0;
height: 5px; height: 5px;
background-color: #333; background-color: #405050;
margin: 0 10px;
cursor: pointer;
} }
#player .progress .loaded { #player .progress .played {
width: 0; width: 0;
height: 5px; height: 5px;
background-color: #405050; background-color: #09A;
} }
#player .progress .played { #player .controls {
width: 0; width: 290px;
height: 5px; margin: 20px 95px;
background-color: #09A; }
} #player .controls > div {
#player .controls { width: 40px;
width: 290px; height: 40px;
margin: 20px 95px; float: left;
margin-right: 20px;
cursor: pointer;
}
#player .controls .prev {
background-image: url('/images/icns/prev.png');
}
#player .controls .play {
background-image: url('/images/icns/play.png');
}
#player .controls .pause {
background-image: url('/images/icns/pause.png');
display: none;
}
#player .controls .next {
background-image: url('/images/icns/next.png');
} }
#player .controls > div {
width: 40px;
height: 40px;
float: left;
margin-right: 20px;
cursor: pointer;
}
#player .controls .prev {
background-image: url('/images/icns/prev.png');
}
#player .controls .play {
background-image: url('/images/icns/play.png');
}
#player .controls .pause {
background-image: url('/images/icns/pause.png');
display: none;
}
#player .controls .next {
background-image: url('/images/icns/next.png');
}
.playlist-tracks { .playlist-tracks {
width: 343px; width: 343px;
@ -60,6 +57,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 26px; height: 26px;
color: #FFF;
} }
.playlist-tracks li .item .title { .playlist-tracks li .item .title {
position: absolute; position: absolute;
@ -82,15 +80,15 @@
line-height: 26px; line-height: 26px;
} }
.playlist-tracks li .item:hover { .playlist-tracks li .item:hover {
background-color: #D0E0F0; background-color: #444;
cursor: default; cursor: default;
} }
.playlist-tracks li:nth-child(even) { .playlist-tracks li:nth-child(odd) {
background-color: #F0F0F0; background-color: #2A2A2A;
cursor: default; cursor: default;
} }
.playlist-tracks li.now .item { .playlist-tracks li.now .item {
background-color: #E0EAF0; color: #09A;
cursor: default; cursor: default;
} }
.playlist-tracks li .item .duration { .playlist-tracks li .item .duration {
@ -106,41 +104,31 @@
z-index: 20; z-index: 20;
width: 100px; width: 100px;
height: 26px; height: 26px;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 42%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -moz-linear-gradient(left, rgba(32,32,32,0) 0%, rgba(32,32,32,1) 50%, rgba(32,32,32,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(255,255,255,0.6)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(32,32,32,0)), color-stop(50%,rgba(32,32,32,1)), color-stop(100%,rgba(32,32,32,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 42%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(left, rgba(32,32,32,0) 0%,rgba(32,32,32,1) 50%,rgba(32,32,32,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 42%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* Opera11.10+ */ background: -o-linear-gradient(left, rgba(32,32,32,0) 0%,rgba(32,32,32,1) 50%,rgba(32,32,32,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 42%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* IE10+ */ background: -ms-linear-gradient(left, rgba(32,32,32,0) 0%,rgba(32,32,32,1) 50%,rgba(32,32,32,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00202020', endColorstr='#202020',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 42%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* W3C */ background: linear-gradient(left, rgba(32,32,32,0) 0%,rgba(32,32,32,1) 50%,rgba(32,32,32,1) 100%); /* W3C */
} }
.playlist-tracks li:nth-child(even) .item .fade { .playlist-tracks li:nth-child(odd) .item .fade {
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(249,249,249,0.6) 42%, rgba(248,248,248,1) 50%, rgba(240,240,240,1) 100%); /* FF3.6+ */ background: -moz-linear-gradient(left, rgba(42,42,42,0) 0%, rgba(42,42,42,1) 50%, rgba(42,42,42,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(249,249,249,0.6)), color-stop(50%,rgba(248,248,248,1)), color-stop(100%,rgba(240,240,240,1))); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(42,42,42,0)), color-stop(50%,rgba(42,42,42,1)), color-stop(100%,rgba(42,42,42,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(249,249,249,0.6) 42%,rgba(248,248,248,1) 50%,rgba(240,240,240,1) 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(left, rgba(42,42,42,0) 0%,rgba(42,42,42,1) 50%,rgba(42,42,42,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(249,249,249,0.6) 42%,rgba(248,248,248,1) 50%,rgba(240,240,240,1) 100%); /* Opera11.10+ */ background: -o-linear-gradient(left, rgba(42,42,42,0) 0%,rgba(42,42,42,1) 50%,rgba(42,42,42,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(249,249,249,0.6) 42%,rgba(248,248,248,1) 50%,rgba(240,240,240,1) 100%); /* IE10+ */ background: -ms-linear-gradient(left, rgba(42,42,42,0) 0%,rgba(42,42,42,1) 50%,rgba(42,42,42,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f0f0f0',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002a2a2a', endColorstr='#2a2a2a',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(249,249,249,0.6) 42%,rgba(248,248,248,1) 50%,rgba(240,240,240,1) 100%); /* W3C */ background: linear-gradient(left, rgba(42,42,42,0) 0%,rgba(42,42,42,1) 50%,rgba(42,42,42,1) 100%); /* W3C */
}
.playlist-tracks li.now .item .fade {
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(242,246,249,0.6) 42%, rgba(240,244,248,1) 50%, rgba(224,234,240,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(242,246,249,0.6)), color-stop(50%,rgba(240,244,248,1)), color-stop(100%,rgba(224,234,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(242,246,249,0.6) 42%,rgba(240,244,248,1) 50%,rgba(224,234,240,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(242,246,249,0.6) 42%,rgba(240,244,248,1) 50%,rgba(224,234,240,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(242,246,249,0.6) 42%,rgba(240,244,248,1) 50%,rgba(224,234,240,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#e0eaf0',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(242,246,249,0.6) 42%,rgba(240,244,248,1) 50%,rgba(224,234,240,1) 100%); /* W3C */
} }
.playlist-tracks li .item:hover .fade { .playlist-tracks li .item:hover .fade {
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(235,242,249,0.6) 42%, rgba(231,240,248,1) 50%, rgba(208,224,240,1) 100%); /* FF3.6+ */ background: -moz-linear-gradient(left, rgba(64,64,64,0) 0%, rgba(64,64,64,1) 50%, rgba(64,64,64,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(235,242,249,0.6)), color-stop(50%,rgba(231,240,248,1)), color-stop(100%,rgba(208,224,240,1))); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(64,64,64,0)), color-stop(50%,rgba(64,64,64,1)), color-stop(100%,rgba(64,64,64,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(235,242,249,0.6) 42%,rgba(231,240,248,1) 50%,rgba(208,224,240,1) 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(left, rgba(64,64,64,0) 0%,rgba(64,64,64,1) 50%,rgba(64,64,64,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(235,242,249,0.6) 42%,rgba(231,240,248,1) 50%,rgba(208,224,240,1) 100%); /* Opera11.10+ */ background: -o-linear-gradient(left, rgba(64,64,64,0) 0%,rgba(64,64,64,1) 50%,rgba(64,64,64,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(235,242,249,0.6) 42%,rgba(231,240,248,1) 50%,rgba(208,224,240,1) 100%); /* IE10+ */ background: -ms-linear-gradient(left, rgba(64,64,64,0) 0%,rgba(64,64,64,1) 50%,rgba(64,64,64,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#d0e0f0',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00404040', endColorstr='#404040',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(235,242,249,0.6) 42%,rgba(231,240,248,1) 50%,rgba(208,224,240,1) 100%); /* W3C */ background: linear-gradient(left, rgba(64,64,64,0) 0%,rgba(64,64,64,1) 50%,rgba(64,64,64,1) 100%); /* W3C */
} }

43
public/stylesheets/search.css
View File

@ -1,7 +1,6 @@
#search-container { #search-container {
width: 100%; width: 425px;
text-align: center; padding: 0 5px;
margin-top: 50px;
} }
#search-container #search_field { #search-container #search_field {
width: 300px; width: 300px;
@ -22,10 +21,30 @@
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
} }
#search-container img {
margin-top: 30px; .spinner {
display: none; display: none;
margin: 20px 0 0 175px;
}
.artist_loading {
display: none;
margin: 15px 0;
font-size: 18;
}
.artist_pics {
display: none;
}
.artist_pics .pic {
float: left;
width: 47px;
height: 47px;
overflow: hidden;
margin: 0 5px 5px 0;
} }
.artist_pics .pic img {
width: 47px;
}
.autocomplete { .autocomplete {
margin: 4px 0 0 -1px; margin: 4px 0 0 -1px;
@ -33,22 +52,24 @@
.autocomplete div { .autocomplete div {
font-size: 24px; font-size: 24px;
padding: 6px 5px; padding: 6px 5px;
background-color: #FAFAFA; border-top: #BBB 1px solid;
margin-bottom: 1px; margin-bottom: 1px;
} }
.autocomplete div:first-child {
border: none;
}
.autocomplete div.selected { .autocomplete div.selected {
background-color: #EAEAEA; background-color: #DDD;
} }
.suggestions { .suggestions {
display: none; display: none;
margin: 30px 0 0 250px; width: 415px;
width: 500px;
text-align: left; text-align: left;
font-size: 24px; font-size: 24px;
} }
.suggestions div { .suggestions div {
margin-bottom: 20px; margin: 15px 0;
} }
.suggestions ul li { .suggestions ul li {
display: block; display: block;