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
Download Patch File Download Diff File Expand all files Collapse all files
public/images/concrete_wall_2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB

public/javascripts/beathaven/ajax.js
+11 -21
View File
@@ -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') {
Ajax.loadArtistData(name);
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;
},
public/javascripts/beathaven/layout.js
+8
View File
@@ -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);
},
public/javascripts/beathaven/pages.js
+31
View File
@@ -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');
}
}
public/javascripts/beathaven/search.js
+12
View File
@@ -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>\
');
}
}
}
public/search.html
+4 -13
View File
@@ -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>
public/stylesheets/albums.css
+5
View File
@@ -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;
public/stylesheets/layout.css
+3
View File
@@ -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 {
public/stylesheets/misc.css
+36 -13
View File
@@ -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;
}
#data-container .scrollbar-handle {
background-color: #CCC;
}
#data-container .scrollbar-handle:hover {
background-color: #999;
}
.scrollbar-handle.move {
background: #AAA;
}
#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;
public/stylesheets/player.css
+67 -79
View File
@@ -1,53 +1,50 @@
#player {
background-color: #222;
#player .now-playing {
height: 30px;
color: #FFF;
text-align: center;
line-height: 30px;
}
#player .now-playing {
height: 30px;
color: #FFF;
text-align: center;
line-height: 30px;
}
#player .progress {
width: 330px;
#player .progress {
width: 330px;
height: 5px;
background-color: #333;
margin: 0 10px;
cursor: pointer;
}
#player .progress .loaded {
width: 0;
height: 5px;
background-color: #333;
margin: 0 10px;
cursor: pointer;
background-color: #405050;
}
#player .progress .loaded {
#player .progress .played {
width: 0;
height: 5px;
background-color: #405050;
background-color: #09A;
}
#player .progress .played {
width: 0;
height: 5px;
background-color: #09A;
}
#player .controls {
width: 290px;
margin: 20px 95px;
#player .controls {
width: 290px;
margin: 20px 95px;
}
#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');
}
#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 {
width: 343px;
@@ -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 */
}
public/stylesheets/search.css
+32 -11
View File
@@ -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,10 +21,30 @@
-moz-border-radius: 3px;
border-radius: 3px;
}
#search-container img {
margin-top: 30px;
display: none;
.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 {
margin: 4px 0 0 -1px;
@@ -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;