Haml templates, artist page renderer
This commit is contained in:
magnolia-fan
parent
6694af18c2
commit
1b02272d81
|
|
@ -15,15 +15,6 @@ $ ->
|
||||||
|
|
||||||
window._beathaven = new BeatHaven()
|
window._beathaven = new BeatHaven()
|
||||||
window._beathaven.init()
|
window._beathaven.init()
|
||||||
|
|
||||||
$(window).resize ->
|
|
||||||
_beathaven.adjustSizes()
|
|
||||||
_beathaven.redrawScrollbar()
|
|
||||||
false
|
|
||||||
window.setTimeout ->
|
|
||||||
window._beathaven.checkRedrawScrollbar()
|
|
||||||
false
|
|
||||||
, 500
|
|
||||||
|
|
||||||
class BeatHaven
|
class BeatHaven
|
||||||
|
|
||||||
|
|
@ -31,10 +22,6 @@ class BeatHaven
|
||||||
lang: 'ru'
|
lang: 'ru'
|
||||||
|
|
||||||
init: ->
|
init: ->
|
||||||
this.adjustSizes()
|
|
||||||
this.checkRedrawScrollbar()
|
|
||||||
|
|
||||||
# if document.location.host == 'beathaven.org' then 2335068 else 2383163
|
|
||||||
window._vkontakte = new Vkontakte(2335068)
|
window._vkontakte = new Vkontakte(2335068)
|
||||||
window._vkontakte.init()
|
window._vkontakte.init()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,55 +1,10 @@
|
||||||
class window.Pages
|
class window.Pages
|
||||||
|
|
||||||
renderArtist: (data) ->
|
renderArtist: (data) ->
|
||||||
artist_info = $ '
|
$('#content').html(data)
|
||||||
<div class="artist-info">
|
|
||||||
<div class="pic">
|
|
||||||
<img src="' +data.artist.pic+ '" alt="' +data.artist.name+ '" width="250" />
|
|
||||||
</div>
|
|
||||||
<h1 class="name" data-id="'+data.artist.id+'">' +data.artist.name+ '</h1>
|
|
||||||
<div class="info">
|
|
||||||
' +data.artist.desc+ '
|
|
||||||
</div>
|
|
||||||
</div>'
|
|
||||||
|
|
||||||
albums_info = $ '<div class="albums"></div>'
|
|
||||||
$.each data.albums, (i, album) ->
|
|
||||||
if album.year?
|
|
||||||
album_info = $ '
|
|
||||||
<div class="album">
|
|
||||||
<h2 class="name" data-id="'+album.id+'">' +album.name+ ' (' +album.year+ ')</h2>
|
|
||||||
<div class="pic">
|
|
||||||
<img src="' +(if album.pic then album.pic else '/images/kitteh.png')+ '" alt="' +album.name+ ' by ' +data.artist.name+ '" width="250" height="250"/>
|
|
||||||
<div class="add-album-button-container">
|
|
||||||
<div class="add-album button gray">'+_beathaven.ls('ADD_TO_NOW_PLAYING')+'</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tracklist"><ul></ul></div>
|
|
||||||
</div>
|
|
||||||
<div class="kaboom"></div>'
|
|
||||||
|
|
||||||
$.each album.tracks.album, (i, track) ->
|
|
||||||
track_info = $ '
|
|
||||||
<li data-id="'+track.id+'">
|
|
||||||
<div class="add-track button gray">+</div>
|
|
||||||
<div class="track-container">
|
|
||||||
<div class="fade"></div>
|
|
||||||
<span class="index">' +(i+1)+ '</span>
|
|
||||||
<div class="trackname" title="' +track.name.htmlsafe()+ '">' +track.name+ '</div>
|
|
||||||
<div class="length">' +track.duration+ '</div>
|
|
||||||
</div>
|
|
||||||
</li>'
|
|
||||||
|
|
||||||
$(album_info).find('.tracklist ul').append(track_info)
|
|
||||||
|
|
||||||
$(albums_info).append(album_info)
|
|
||||||
|
|
||||||
$('.data-container').css backgroundImage: 'none'
|
|
||||||
$('.data-container .inner').html('').append(artist_info).append(albums_info)
|
|
||||||
|
|
||||||
yaCounter7596904.hit _ajax.getAnchor(), data.artist.name, _ajax.referer
|
yaCounter7596904.hit _ajax.getAnchor(), data.artist.name, _ajax.referer
|
||||||
_ajax.setTitle data.artist.name
|
_ajax.setTitle data.artist.name
|
||||||
_beathaven.redrawScrollbar()
|
|
||||||
false
|
false
|
||||||
|
|
||||||
renderSearch: (data) ->
|
renderSearch: (data) ->
|
||||||
|
|
|
||||||
|
|
@ -1,151 +1,33 @@
|
||||||
@import "alpha_gradient";
|
@import "alpha_gradient";
|
||||||
|
|
||||||
.artist-info {
|
.artist-info {
|
||||||
width: 100%;
|
margin-bottom: 20px;
|
||||||
float: left;
|
.pic {
|
||||||
margin: 0 0 25px 0;
|
height: 220px;
|
||||||
clear: both;
|
img {
|
||||||
|
max-width: 220px;
|
||||||
.pic {
|
max-height: 220px;
|
||||||
float: left;
|
}
|
||||||
width: 250px;
|
}
|
||||||
margin: 25px 0;
|
.desc {
|
||||||
|
height: 220px;
|
||||||
img {
|
}
|
||||||
margin-left: 25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
margin: 25px 0 0 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
margin: 0 17px 25px 300px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.albums {
|
.album {
|
||||||
width: 100%;
|
margin-bottom: 20px;
|
||||||
float: left;
|
.art {
|
||||||
clear: both;
|
img {
|
||||||
|
max-width: 220px;
|
||||||
.album {
|
}
|
||||||
clear: both;
|
.button-container {
|
||||||
|
text-align: center;
|
||||||
.pic {
|
margin-top: 10px;
|
||||||
float: left;
|
}
|
||||||
width: 250px;
|
}
|
||||||
|
.tracks {
|
||||||
> * {
|
td.song-duration {
|
||||||
margin-left: 25px;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
img {
|
|
||||||
width: 248px;
|
|
||||||
height: 248px;
|
|
||||||
border: #d0d0d0 1px solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-album-button-container {
|
|
||||||
position: relative;
|
|
||||||
margin: 10px -50px 0 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
display: block;
|
|
||||||
margin: 0 0 10px 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tracklist {
|
|
||||||
margin: 0 17px 30px 275px;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
li {
|
|
||||||
display: block;
|
|
||||||
height: 26px;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 25px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.track-container {
|
|
||||||
background-color: #fafafa;
|
|
||||||
.fade {
|
|
||||||
@include alpha_gradient(250, 250, 250, "fafafa");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.now {
|
|
||||||
.track-container {
|
|
||||||
background-color: #e0f0fa;
|
|
||||||
.fade {
|
|
||||||
@include alpha_gradient(224, 240, 250, "e0f0fa");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-track {
|
|
||||||
display: none;
|
|
||||||
float: left;
|
|
||||||
padding: 1px 5px;
|
|
||||||
margin: 3px 0 0 -22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.track-container {
|
|
||||||
height: 20px;
|
|
||||||
padding: 5px 0 0 0;
|
|
||||||
border-top: #e0e0e0 1px solid;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade {
|
|
||||||
right: 0px;
|
|
||||||
top: 6px;
|
|
||||||
width: 80px;
|
|
||||||
height: 16px;
|
|
||||||
z-index: 20;
|
|
||||||
@include alpha_gradient(255, 255, 255, "ffffff");
|
|
||||||
}
|
|
||||||
|
|
||||||
.index {
|
|
||||||
left: 22px;
|
|
||||||
top: 9px;
|
|
||||||
display: block;
|
|
||||||
width: 15px;
|
|
||||||
text-align: right;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #505050;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trackname {
|
|
||||||
left: 40px;
|
|
||||||
top: 6px;
|
|
||||||
width: 90%;
|
|
||||||
height: 16px;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.length {
|
|
||||||
right: 0px;
|
|
||||||
top: 6px;
|
|
||||||
height: 16px;
|
|
||||||
z-index: 30;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,18 +1,19 @@
|
||||||
/*
|
/*
|
||||||
|
|
||||||
* require common
|
*= require bootstrap
|
||||||
* require misc
|
|
||||||
* require header
|
|
||||||
|
|
||||||
* require albums
|
*= require header
|
||||||
* require player
|
* require common
|
||||||
|
*= require misc
|
||||||
|
|
||||||
|
*= require albums
|
||||||
|
*= require player
|
||||||
* require pulldown
|
* require pulldown
|
||||||
* require pulldown
|
* require pulldown
|
||||||
* require search
|
* require search
|
||||||
* require settings
|
* require settings
|
||||||
* require textpage
|
* require textpage
|
||||||
|
|
||||||
*= require bootstrap
|
|
||||||
*= require main
|
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
@ -1,78 +1,3 @@
|
||||||
.header-container {
|
#main {
|
||||||
.hello {
|
margin-top: 60px;
|
||||||
display: none;
|
|
||||||
float: right;
|
|
||||||
margin: 6px 10px 0 0;
|
|
||||||
color: #222;
|
|
||||||
|
|
||||||
.greating {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
margin-right: 8px;
|
|
||||||
|
|
||||||
span {
|
|
||||||
border-bottom: #202020 1px dotted;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-button {
|
|
||||||
float: right;
|
|
||||||
width: 15px;
|
|
||||||
height: 15px;
|
|
||||||
margin: 1px 0;
|
|
||||||
background-image: url(/images/icns/settings.png);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation {
|
|
||||||
background-color: #EEE;
|
|
||||||
background-image: url(/images/concrete_wall_2.png);
|
|
||||||
height: 30px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
width: auto;
|
|
||||||
height: 30px;
|
|
||||||
margin-left: 10px;
|
|
||||||
color: #222;
|
|
||||||
line-height: 30px;
|
|
||||||
text-shadow: #666 0px 0px 0.5px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
text-shadow: #666 0px 0px 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.logo {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 32px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: -3px 1px 0 10px;
|
|
||||||
|
|
||||||
.version {
|
|
||||||
float: right;
|
|
||||||
font-size: 9px;
|
|
||||||
font-weight: normal;
|
|
||||||
margin: 10px 0 0 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.vk_auth {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: inherit;
|
|
||||||
border-bottom: #a0a0a0 1px solid;
|
|
||||||
|
|
||||||
&.a {
|
|
||||||
border-bottom: #a0a0a0 1px dotted;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,93 +1,9 @@
|
||||||
#main {
|
|
||||||
margin-top: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.buttons {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.now-playing {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.progress {
|
|
||||||
width: 94%;
|
|
||||||
margin: 0 0 10px 3%;
|
|
||||||
height: 7px;
|
|
||||||
background-color: #e0e0e0;
|
|
||||||
}
|
|
||||||
.progress .loaded {
|
|
||||||
width: 66%;
|
|
||||||
height: 7px;
|
|
||||||
background-color: #70c0c0;
|
|
||||||
}
|
|
||||||
.progress .loaded .played {
|
|
||||||
width: 66%;
|
|
||||||
height: 7px;
|
|
||||||
background-color: #0090AA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.artist-info {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.artist-info .pic {
|
|
||||||
height: 220px;
|
|
||||||
}
|
|
||||||
.artist-info .pic img {
|
|
||||||
max-width: 220px;
|
|
||||||
}
|
|
||||||
.artist-info .desc {
|
|
||||||
height: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.album {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.album .art {
|
|
||||||
height: 220px;
|
|
||||||
}
|
|
||||||
.album .button-container {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.album .tracks {
|
|
||||||
|
|
||||||
}
|
|
||||||
td.song-duration {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlist .artist-name {
|
.playlist .artist-name {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #888;
|
color: #888;
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.small-round {
|
|
||||||
border-radius: 15px;
|
|
||||||
padding: 2px 9px !important;
|
|
||||||
font-size: 18px !important;
|
|
||||||
}
|
|
||||||
.large-round {
|
|
||||||
border-radius: 21px !important;
|
|
||||||
padding: 11px 11px 11px 15px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popover-wrapper {
|
|
||||||
position: fixed;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -280px;
|
|
||||||
top: 45px;
|
|
||||||
width: 210px;
|
|
||||||
height: 200px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.popover {
|
|
||||||
/* display: block;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.now-playing-item {
|
|
||||||
background-color: #f5fcff;
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,156 +1,18 @@
|
||||||
@import "rounded";
|
.small-round {
|
||||||
|
border-radius: 15px;
|
||||||
.fullscreen {
|
padding: 2px 9px !important;
|
||||||
position: absolute;
|
font-size: 18px !important;
|
||||||
z-index: 9999;
|
}
|
||||||
top: 0;
|
.large-round {
|
||||||
left: 0;
|
border-radius: 21px !important;
|
||||||
width: 100%;
|
padding: 11px 11px 11px 15px !important;
|
||||||
height: 100%;
|
|
||||||
background-color: #ffffff;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#e5ffffff, endColorstr=#e5ffffff);
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#e5ffffff, endColorstr=#e5ffffff)";
|
|
||||||
|
|
||||||
.inner {
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -50px;
|
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.popover-wrapper {
|
||||||
display: inline;
|
position: fixed;
|
||||||
width: auto;
|
left: 50%;
|
||||||
padding: 5px 10px;
|
margin-left: -280px;
|
||||||
border: 1px solid;
|
top: 45px;
|
||||||
cursor: pointer;
|
width: 210px;
|
||||||
@include rounded(3);
|
height: 200px;
|
||||||
|
|
||||||
&.gray {
|
|
||||||
background-color: #e0e0e0;
|
|
||||||
color: #404040;
|
|
||||||
text-shadow: #d0d0d0 0px 1px 1px;
|
|
||||||
border-color: #d0d0d0;
|
|
||||||
box-shadow: #c0c0c0 1px 1px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.red {
|
|
||||||
background-color: #fab0b0;
|
|
||||||
color: #e05050;
|
|
||||||
text-shadow: #c08080 0px 1px 1px;
|
|
||||||
border-color: #eaa0a0;
|
|
||||||
box-shadow: #da9090 1px 1px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.big {
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Scrollbars */
|
|
||||||
|
|
||||||
|
|
||||||
.data-container {
|
|
||||||
.scrollbar-pane {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-handle-container {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-handle {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
.scrollbar-handle-container {
|
|
||||||
background-color: #FFF;
|
|
||||||
}
|
|
||||||
.scrollbar-handle {
|
|
||||||
background-color: #CCC;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.move {
|
|
||||||
background-color: #AAA;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-container {
|
|
||||||
.scrollbar-pane {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-handle-container {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-handle {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
.scrollbar-handle-container {
|
|
||||||
background-color: #222;
|
|
||||||
}
|
|
||||||
.scrollbar-handle {
|
|
||||||
background-color: #444;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.move {
|
|
||||||
background-color: #888;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.error_page {
|
|
||||||
position: relative;
|
|
||||||
width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
top: 100px;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -300px;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.kaboom {
|
|
||||||
width: 100%;
|
|
||||||
height: 30px;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-notice {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
background-color: #60a0ff;
|
|
||||||
color: #ffffff;
|
|
||||||
top: 32px;
|
|
||||||
left: 290px;
|
|
||||||
line-height: 35px;
|
|
||||||
padding-right: 10px;
|
|
||||||
border: #4080dd 1px solid;
|
|
||||||
@include rounded(3);
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.arrow {
|
|
||||||
float: left;
|
|
||||||
margin: -5px 10px 0 10px;
|
|
||||||
font-size: 25px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,228 +1,30 @@
|
||||||
@import "alpha_gradient";
|
.player {
|
||||||
@import "rounded";
|
.buttons {
|
||||||
@import "opacity";
|
text-align: center;
|
||||||
$icons_dir: "/images/icns/";
|
}
|
||||||
|
.now-playing {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.progress {
|
||||||
|
width: 94%;
|
||||||
|
margin: 0 0 10px 3%;
|
||||||
|
height: 7px;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
.loaded {
|
||||||
|
width: 66%;
|
||||||
|
height: 7px;
|
||||||
|
background-color: #70c0c0;
|
||||||
|
.played {
|
||||||
|
width: 66%;
|
||||||
|
height: 7px;
|
||||||
|
background-color: #0090AA;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.player-container {
|
.playlist {
|
||||||
.player {
|
.song-duration {
|
||||||
.now-playing {
|
text-align: right;
|
||||||
position: relative;
|
}
|
||||||
height: 30px;
|
|
||||||
color: #FFF;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 30px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.fade {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
right: 0px;
|
|
||||||
width: 50px;
|
|
||||||
height: 30px;
|
|
||||||
z-index: 10;
|
|
||||||
@include alpha_gradient(32, 32, 32, '202020');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
width: 330px;
|
|
||||||
height: 5px;
|
|
||||||
background-color: #333;
|
|
||||||
margin: 0 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.loaded {
|
|
||||||
width: 0;
|
|
||||||
height: 5px;
|
|
||||||
background-color: #405050;
|
|
||||||
}
|
|
||||||
|
|
||||||
.played {
|
|
||||||
width: 0;
|
|
||||||
height: 5px;
|
|
||||||
background-color: #09A;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
width: 290px;
|
|
||||||
margin: 20px 95px;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
float: left;
|
|
||||||
margin-right: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prev {
|
|
||||||
background-image: url('#{$icons_dir}prev.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
.play {
|
|
||||||
background-image: url('#{$icons_dir}play.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
.pause {
|
|
||||||
background-image: url('#{$icons_dir}pause.png');
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next {
|
|
||||||
background-image: url('#{$icons_dir}next.png');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlist {
|
|
||||||
.playlist-tracks {
|
|
||||||
width: 343px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: block;
|
|
||||||
height: 26px;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 26px;
|
|
||||||
color: #FFF;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #444;
|
|
||||||
cursor: default;
|
|
||||||
|
|
||||||
.fade {
|
|
||||||
@include alpha_gradient(64, 64, 64, '404040');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dragbox {
|
|
||||||
position: absolute;
|
|
||||||
top: 1px;
|
|
||||||
left: 2px;
|
|
||||||
width: 15px;
|
|
||||||
height: 26px;
|
|
||||||
background-image: url('/images/drag.png');
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 19px;
|
|
||||||
z-index: 10;
|
|
||||||
width: 316px;
|
|
||||||
height: 26px;
|
|
||||||
line-height: 26px;
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.data.artist, .playtrack {
|
|
||||||
border-bottom: #555 1px dotted;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.duration {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 5px;
|
|
||||||
z-index: 30;
|
|
||||||
height: 26px;
|
|
||||||
line-height: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.remove {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 4px;
|
|
||||||
right: 5px;
|
|
||||||
z-index: 30;
|
|
||||||
height: 15px;
|
|
||||||
font-size: 11px;
|
|
||||||
background-color: #622;
|
|
||||||
color: #FFF;
|
|
||||||
border: #822 1px solid;
|
|
||||||
padding: 1px 2px 0 2px;
|
|
||||||
@include rounded(2);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 20;
|
|
||||||
width: 80px;
|
|
||||||
height: 26px;
|
|
||||||
@include alpha_gradient(32, 32, 32, '202020');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(odd) {
|
|
||||||
.item {
|
|
||||||
background-color: #2A2A2A;
|
|
||||||
|
|
||||||
.fade {
|
|
||||||
@include alpha_gradient(42, 42, 42, '2a2a2a');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.now {
|
|
||||||
.item {
|
|
||||||
color: #09A;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.additional-controls {
|
|
||||||
width: 350px;
|
|
||||||
height: 27px;
|
|
||||||
background-color: #333;
|
|
||||||
border-top: #444 1px solid;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
float: left;
|
|
||||||
margin-left: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 26px;
|
|
||||||
color: #FFF;
|
|
||||||
@include opacity(0.3);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@include opacity(1);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
@include opacity(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
float: left;
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.annotation {
|
|
||||||
float: left;
|
|
||||||
margin-left: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&#empty-playlist {
|
|
||||||
float: right;
|
|
||||||
margin-right: 10px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -8,7 +8,7 @@ class ArtistController < ApplicationController
|
||||||
render :json => {status: 'loading_failed', pics: []}
|
render :json => {status: 'loading_failed', pics: []}
|
||||||
return
|
return
|
||||||
end
|
end
|
||||||
name = params[:name].gsub('%20', ' ').gsub('+', ' ')
|
name = params[:name].gsub('%20', ' ').gsub('+', ' ').gsub('.html', '')
|
||||||
artist = Artist.find_by_name(name)
|
artist = Artist.find_by_name(name)
|
||||||
if artist and artist.status == 0
|
if artist and artist.status == 0
|
||||||
pics = []
|
pics = []
|
||||||
|
|
@ -46,8 +46,8 @@ class ArtistController < ApplicationController
|
||||||
return
|
return
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
data['artist'] = {id: artist.id, name: artist.name, desc: ActionController::Base.helpers.strip_tags(artist.desc), pic: artist.pic_url}
|
data[:artist] = {id: artist.id, name: artist.name, desc: ActionController::Base.helpers.strip_tags(artist.desc), pic: artist.pic_url}
|
||||||
data['albums'] = []
|
data[:albums] = []
|
||||||
albums = artist.albums
|
albums = artist.albums
|
||||||
albums.each do |album|
|
albums.each do |album|
|
||||||
if @@default_album_types.include? album.album_type
|
if @@default_album_types.include? album.album_type
|
||||||
|
|
@ -60,17 +60,21 @@ class ArtistController < ApplicationController
|
||||||
time = (track.length / 1000).round
|
time = (track.length / 1000).round
|
||||||
time_m = (time / 60).floor
|
time_m = (time / 60).floor
|
||||||
time_s = time - time_m * 60
|
time_s = time - time_m * 60
|
||||||
tmp_track['duration'] = time_m.to_s + ':' + (time_s < 10 ? '0' : '') + time_s.to_s
|
tmp_track[:duration] = time_m.to_s + ':' + (time_s < 10 ? '0' : '') + time_s.to_s
|
||||||
else
|
else
|
||||||
tmp_track['duration'] = '0:00'
|
tmp_track[:duration] = '0:00'
|
||||||
end
|
end
|
||||||
(track.bonus == 0 ? album_tracks : bonus_tracks) << tmp_track
|
(track.bonus == 0 ? album_tracks : bonus_tracks) << tmp_track
|
||||||
end
|
end
|
||||||
tmp_album['tracks'] = {album: album_tracks, bonus: bonus_tracks}
|
tmp_album[:tracks] = {album: album_tracks, bonus: bonus_tracks}
|
||||||
data['albums'] << tmp_album
|
data[:albums] << tmp_album
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
render :json => data
|
@data = data
|
||||||
|
respond_to do |format|
|
||||||
|
format.html { render :partial => 'data' }
|
||||||
|
format.json { render :json => @data }
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
def autocomplete
|
def autocomplete
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
.row.artist-info
|
||||||
|
.span4.columns.pic
|
||||||
|
%img{ :src => @data[:artist][:pic] }
|
||||||
|
.span7.columns.desc
|
||||||
|
%h2= @data[:artist][:name]
|
||||||
|
= @data[:artist][:desc]
|
||||||
|
|
||||||
|
- @data[:albums].each do |album|
|
||||||
|
.row.album
|
||||||
|
.span4.columns.art
|
||||||
|
%img{ :src => album[:pic] }
|
||||||
|
.button-container
|
||||||
|
%a.btn Add to playlist
|
||||||
|
.span7.columns.tracks
|
||||||
|
%h3= album[:name] + " (" + album[:year].to_s + ")"
|
||||||
|
%table.zebra-striped.tracklist
|
||||||
|
- album[:tracks][:album].each do |track|
|
||||||
|
%tr
|
||||||
|
%td.song-title= track[:name]
|
||||||
|
%td.song-duration= track[:duration]
|
||||||
|
|
@ -42,10 +42,39 @@
|
||||||
|
|
||||||
.container#main
|
.container#main
|
||||||
.row
|
.row
|
||||||
.span11.columns
|
.span11.columns#content
|
||||||
.row.artist-info
|
|
||||||
.span4.columns.pic
|
|
||||||
%img{ :src => "http://userserve-ak.last.fm/serve/_/33371/Foo+Fighters.jpg" }
|
.span5.columns
|
||||||
.span7.columns.desc
|
.player
|
||||||
%h2 Foo Fighters
|
%h5.now-playing Foo Fighters — Long Road to Ruin
|
||||||
Foo Fighters are an American rock band formed by singer/guitarist Dave Grohl in 1995 in Seattle, USA. Grohl formed the group as a one-man project after the dissolution of his previous band Nirvana in 1994. Prior to the release of Foo Fighters in 1995, Grohl drafted Nate Mendel (bass), William Goldsmith (drums) (both of Sunny Day Real Estate and The Fire Theft), and Pat Smear (guitar) to complete the group.
|
.progress
|
||||||
|
.loaded
|
||||||
|
.played
|
||||||
|
.buttons
|
||||||
|
%a.btn.small-round «
|
||||||
|
%a.btn.large.large-round ►
|
||||||
|
%a.btn.small-round »
|
||||||
|
|
||||||
|
.playlist
|
||||||
|
%table
|
||||||
|
%tr
|
||||||
|
%td.song-title
|
||||||
|
.artist-name Foo Fighters
|
||||||
|
The Pretender
|
||||||
|
%td.song-duration 4:29
|
||||||
|
%tr
|
||||||
|
%td.song-title
|
||||||
|
.artist-name Foo Fighters
|
||||||
|
Let It Die
|
||||||
|
%td.song-duration 4:29
|
||||||
|
%tr
|
||||||
|
%td.song-title
|
||||||
|
.artist-name Foo Fighters
|
||||||
|
Erase/Replace
|
||||||
|
%td.song-duration 4:29
|
||||||
|
%tr
|
||||||
|
%td.song-title
|
||||||
|
.artist-name Foo Fighters
|
||||||
|
Long Road to Ruin
|
||||||
|
%td.song-duration 4:29
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue