Improved design, delayed blowjobs, error handling, nice artist loading.
This commit is contained in:
magnolia-fan
parent
7dbf6b87cc
commit
b69c9cdbe0
257
README
257
README
|
|
@ -1,256 +1 @@
|
|||
== Welcome to Rails
|
||||
|
||||
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.
|
||||
http://beathaven.org/
|
||||
|
|
@ -6,7 +6,14 @@ class ArtistController < ApplicationController
|
|||
name = params[:name].gsub('%20', ' ').gsub('+', ' ')
|
||||
artist = Artist.find_by_name(name)
|
||||
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
|
||||
end
|
||||
unless artist
|
||||
|
|
@ -21,7 +28,7 @@ class ArtistController < ApplicationController
|
|||
artist.status = 0
|
||||
artist.save
|
||||
Delayed::Job.enqueue LoadArtistJob.new(name)
|
||||
render :json => {status: 'loading_started'}
|
||||
render :json => {status: 'loading', pics: []}
|
||||
return
|
||||
elsif results[0][:name].downcase == name.downcase or results[0][:name].downcase == 'the '+ name.downcase
|
||||
render :json => {status: 'corrected', page: results[0][:name]}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
|
|
@ -1,11 +1,17 @@
|
|||
var Ajax = {
|
||||
|
||||
referer: false,
|
||||
|
||||
loadArtistData: function(name) {
|
||||
Search.showSpinner();
|
||||
name = name.split(' ').join('+');
|
||||
$.get('/artist/'+ name +'/', function(data){
|
||||
if (typeof data.status != 'undefined') {
|
||||
if (data.status == 'loaded') {
|
||||
if (data.status == 'loading') {
|
||||
Search.showArtistPics(data.pics);
|
||||
setTimeout(function() {
|
||||
Ajax.loadArtistData(name);
|
||||
}, 3000);
|
||||
} else if (data.status == 'corrected') {
|
||||
Ajax.loadArtistData(data.page);
|
||||
} else if (data.status == 'suggestions') {
|
||||
|
|
@ -16,10 +22,7 @@ var Ajax = {
|
|||
}
|
||||
return false;
|
||||
} else {
|
||||
var display_name = name.split('+').join(' ');
|
||||
yaCounter7596904.hit('/artist/'+ name +'/', display_name, Ajax.getAnchor());
|
||||
Ajax.setArchor('/artist/'+ name +'/');
|
||||
Ajax.setTitle(display_name);
|
||||
Pages.renderArtist(data);
|
||||
beathaven.redrawScrollbar();
|
||||
}
|
||||
|
|
@ -27,23 +30,9 @@ var Ajax = {
|
|||
},
|
||||
|
||||
loadSearchPage: function() {
|
||||
$.get('/demo/search.html', function(data){
|
||||
yaCounter7596904.hit('/search/', 'Artist Search', Ajax.getAnchor());
|
||||
$.get('/search.html', function(data){
|
||||
Ajax.setArchor('/search/');
|
||||
Ajax.setTitle('Artist Search');
|
||||
$('#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();
|
||||
Pages.renderSearch(data);
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -61,6 +50,7 @@ var Ajax = {
|
|||
},
|
||||
|
||||
setArchor: function(anchor) {
|
||||
Ajax.referer = Ajax.getAnchor();
|
||||
window.location.hash = '#'+ anchor;
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -27,11 +27,19 @@ var beathaven = {
|
|||
},
|
||||
|
||||
checkRedrawScrollbar: function() {
|
||||
var focused_id = false;
|
||||
if (typeof document.activeElement.id !== 'undefined') {
|
||||
focused_id = document.activeElement.id;
|
||||
}
|
||||
var outer_height = $('#data-container > div').outerHeight();
|
||||
if (outer_height > 300 && outer_height != beathaven.last_height) {
|
||||
beathaven.last_height = outer_height;
|
||||
beathaven.redrawScrollbar();
|
||||
}
|
||||
if (focused_id) {
|
||||
document.getElementById(focused_id).focus();
|
||||
focused_id = false;
|
||||
}
|
||||
window.setTimeout(beathaven.checkRedrawScrollbar, 500);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -52,6 +52,37 @@ var Pages = {
|
|||
}
|
||||
})
|
||||
|
||||
$('#data-container').css('backgroundImage', 'none');
|
||||
$('#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');
|
||||
}
|
||||
}
|
||||
|
|
@ -27,6 +27,18 @@ var Search = {
|
|||
hideSuggestions: function() {
|
||||
$('.suggestions ul li').remove();
|
||||
$('.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>\
|
||||
');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,20 +3,11 @@
|
|||
<input type="text" id="search_field"/>
|
||||
<input type="submit" value="Search" id="search_button"/>
|
||||
</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>Misspelled?</div>
|
||||
<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>
|
||||
<ul></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,6 +38,11 @@
|
|||
.album .pic > * {
|
||||
margin-left: 25px;
|
||||
}
|
||||
.album .pic img {
|
||||
width: 248px;
|
||||
height: 248px;
|
||||
border: #DDD 1px solid;
|
||||
}
|
||||
.add-album-button-container {
|
||||
position: relative;
|
||||
margin: 10px -25px 0 0;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ body {
|
|||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
min-width: 1000px;
|
||||
}
|
||||
|
||||
#header-container {
|
||||
|
|
@ -22,11 +23,13 @@ body {
|
|||
width: 350px;
|
||||
height: 600px;
|
||||
float: right;
|
||||
background-color: #222;
|
||||
}
|
||||
#data-container {
|
||||
width: auto;
|
||||
margin-right: 350px;
|
||||
overflow-y: auto;
|
||||
min-width: 650px;
|
||||
}
|
||||
|
||||
#player {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
}
|
||||
|
||||
#navigation {
|
||||
background-color: #333;
|
||||
background-color: #EEE;
|
||||
background-image: url(/images/concrete_wall_2.png);
|
||||
height: 30px;
|
||||
}
|
||||
#navigation li {
|
||||
|
|
@ -14,13 +15,13 @@
|
|||
width: auto;
|
||||
height: 30px;
|
||||
margin-left: 10px;
|
||||
color: #FFF;
|
||||
color: #222;
|
||||
line-height: 30px;
|
||||
text-shadow: #CCC 0px 0px 0.5px;
|
||||
text-shadow: #666 0px 0px 0.5px;
|
||||
}
|
||||
#navigation li:hover {
|
||||
cursor: pointer;
|
||||
text-shadow: #CCC 0px 0px 2px;
|
||||
text-shadow: #666 0px 0px 2px;
|
||||
}
|
||||
#navigation li.logo {
|
||||
font-size: 20px;
|
||||
|
|
@ -38,7 +39,7 @@
|
|||
#header-container .hello {
|
||||
float: right;
|
||||
margin: 6px 10px 0 0;
|
||||
color: #FFF;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.button {
|
||||
|
|
@ -62,22 +63,44 @@
|
|||
}
|
||||
|
||||
.scrollbar-handle-container {
|
||||
background: #FFF;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.scrollbar-handle {
|
||||
width: 8px;
|
||||
background: #EEE;
|
||||
}
|
||||
|
||||
.scrollbar-handle:hover {
|
||||
background: #999;
|
||||
}
|
||||
#data-container .scrollbar-handle-container {
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.scrollbar-handle.move {
|
||||
background: #AAA;
|
||||
}
|
||||
#data-container .scrollbar-handle {
|
||||
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 {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,16 @@
|
|||
#player {
|
||||
background-color: #222;
|
||||
}
|
||||
#player .now-playing {
|
||||
#player .now-playing {
|
||||
height: 30px;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
#player .progress {
|
||||
}
|
||||
#player .progress {
|
||||
width: 330px;
|
||||
height: 5px;
|
||||
background-color: #333;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
#player .progress .loaded {
|
||||
width: 0;
|
||||
height: 5px;
|
||||
|
|
@ -24,10 +21,10 @@
|
|||
height: 5px;
|
||||
background-color: #09A;
|
||||
}
|
||||
#player .controls {
|
||||
#player .controls {
|
||||
width: 290px;
|
||||
margin: 20px 95px;
|
||||
}
|
||||
}
|
||||
#player .controls > div {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
@ -60,6 +57,7 @@
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 26px;
|
||||
color: #FFF;
|
||||
}
|
||||
.playlist-tracks li .item .title {
|
||||
position: absolute;
|
||||
|
|
@ -82,15 +80,15 @@
|
|||
line-height: 26px;
|
||||
}
|
||||
.playlist-tracks li .item:hover {
|
||||
background-color: #D0E0F0;
|
||||
background-color: #444;
|
||||
cursor: default;
|
||||
}
|
||||
.playlist-tracks li:nth-child(even) {
|
||||
background-color: #F0F0F0;
|
||||
.playlist-tracks li:nth-child(odd) {
|
||||
background-color: #2A2A2A;
|
||||
cursor: default;
|
||||
}
|
||||
.playlist-tracks li.now .item {
|
||||
background-color: #E0EAF0;
|
||||
color: #09A;
|
||||
cursor: default;
|
||||
}
|
||||
.playlist-tracks li .item .duration {
|
||||
|
|
@ -106,41 +104,31 @@
|
|||
z-index: 20;
|
||||
width: 100px;
|
||||
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: -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-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: -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: -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+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',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: -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(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(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(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(32,32,32,0) 0%,rgba(32,32,32,1) 50%,rgba(32,32,32,1) 100%); /* IE10+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00202020', endColorstr='#202020',GradientType=1 ); /* IE6-9 */
|
||||
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 {
|
||||
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: -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-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: -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: -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+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f0f0f0',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 */
|
||||
}
|
||||
|
||||
.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:nth-child(odd) .item .fade {
|
||||
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(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(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(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(42,42,42,0) 0%,rgba(42,42,42,1) 50%,rgba(42,42,42,1) 100%); /* IE10+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002a2a2a', endColorstr='#2a2a2a',GradientType=1 ); /* IE6-9 */
|
||||
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 .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: -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-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: -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: -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+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#d0e0f0',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: -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(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(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(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(64,64,64,0) 0%,rgba(64,64,64,1) 50%,rgba(64,64,64,1) 100%); /* IE10+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00404040', endColorstr='#404040',GradientType=1 ); /* IE6-9 */
|
||||
background: linear-gradient(left, rgba(64,64,64,0) 0%,rgba(64,64,64,1) 50%,rgba(64,64,64,1) 100%); /* W3C */
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
#search-container {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
width: 425px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
#search-container #search_field {
|
||||
width: 300px;
|
||||
|
|
@ -22,9 +21,29 @@
|
|||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#search-container img {
|
||||
margin-top: 30px;
|
||||
|
||||
.spinner {
|
||||
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 {
|
||||
|
|
@ -33,22 +52,24 @@
|
|||
.autocomplete div {
|
||||
font-size: 24px;
|
||||
padding: 6px 5px;
|
||||
background-color: #FAFAFA;
|
||||
border-top: #BBB 1px solid;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.autocomplete div:first-child {
|
||||
border: none;
|
||||
}
|
||||
.autocomplete div.selected {
|
||||
background-color: #EAEAEA;
|
||||
background-color: #DDD;
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
display: none;
|
||||
margin: 30px 0 0 250px;
|
||||
width: 500px;
|
||||
width: 415px;
|
||||
text-align: left;
|
||||
font-size: 24px;
|
||||
}
|
||||
.suggestions div {
|
||||
margin-bottom: 20px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.suggestions ul li {
|
||||
display: block;
|
||||
|
|
|
|||
Loading…
Reference in New Issue