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.init()
|
||||
|
||||
$(window).resize ->
|
||||
_beathaven.adjustSizes()
|
||||
_beathaven.redrawScrollbar()
|
||||
false
|
||||
window.setTimeout ->
|
||||
window._beathaven.checkRedrawScrollbar()
|
||||
false
|
||||
, 500
|
||||
|
||||
class BeatHaven
|
||||
|
||||
|
|
@ -31,10 +22,6 @@ class BeatHaven
|
|||
lang: 'ru'
|
||||
|
||||
init: ->
|
||||
this.adjustSizes()
|
||||
this.checkRedrawScrollbar()
|
||||
|
||||
# if document.location.host == 'beathaven.org' then 2335068 else 2383163
|
||||
window._vkontakte = new Vkontakte(2335068)
|
||||
window._vkontakte.init()
|
||||
|
||||
|
|
|
|||
|
|
@ -1,55 +1,10 @@
|
|||
class window.Pages
|
||||
|
||||
renderArtist: (data) ->
|
||||
artist_info = $ '
|
||||
<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)
|
||||
$('#content').html(data)
|
||||
|
||||
yaCounter7596904.hit _ajax.getAnchor(), data.artist.name, _ajax.referer
|
||||
_ajax.setTitle data.artist.name
|
||||
_beathaven.redrawScrollbar()
|
||||
false
|
||||
|
||||
renderSearch: (data) ->
|
||||
|
|
|
|||
|
|
@ -1,151 +1,33 @@
|
|||
@import "alpha_gradient";
|
||||
|
||||
.artist-info {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin: 0 0 25px 0;
|
||||
clear: both;
|
||||
|
||||
.pic {
|
||||
float: left;
|
||||
width: 250px;
|
||||
margin: 25px 0;
|
||||
|
||||
img {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin: 25px 0 0 300px;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 0 17px 25px 300px;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
.pic {
|
||||
height: 220px;
|
||||
img {
|
||||
max-width: 220px;
|
||||
max-height: 220px;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.albums {
|
||||
width: 100%;
|
||||
float: left;
|
||||
clear: both;
|
||||
|
||||
.album {
|
||||
clear: both;
|
||||
|
||||
.pic {
|
||||
float: left;
|
||||
width: 250px;
|
||||
|
||||
> * {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.album {
|
||||
margin-bottom: 20px;
|
||||
.art {
|
||||
img {
|
||||
max-width: 220px;
|
||||
}
|
||||
.button-container {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.tracks {
|
||||
td.song-duration {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,19 @@
|
|||
/*
|
||||
|
||||
* require common
|
||||
* require misc
|
||||
* require header
|
||||
*= require bootstrap
|
||||
|
||||
* require albums
|
||||
* require player
|
||||
*= require header
|
||||
* require common
|
||||
*= require misc
|
||||
|
||||
*= require albums
|
||||
*= require player
|
||||
* require pulldown
|
||||
* require pulldown
|
||||
* require search
|
||||
* require settings
|
||||
* require textpage
|
||||
|
||||
*= require bootstrap
|
||||
*= require main
|
||||
|
||||
|
||||
*/
|
||||
|
|
@ -1,78 +1,3 @@
|
|||
.header-container {
|
||||
.hello {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#main {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
margin-bottom: 4px;
|
||||
font-size: 11px;
|
||||
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";
|
||||
|
||||
.fullscreen {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline;
|
||||
width: auto;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
@include rounded(3);
|
||||
|
||||
&.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;
|
||||
}
|
||||
.popover-wrapper {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
margin-left: -280px;
|
||||
top: 45px;
|
||||
width: 210px;
|
||||
height: 200px;
|
||||
}
|
||||
|
|
@ -1,228 +1,30 @@
|
|||
@import "alpha_gradient";
|
||||
@import "rounded";
|
||||
@import "opacity";
|
||||
$icons_dir: "/images/icns/";
|
||||
.player {
|
||||
.buttons {
|
||||
text-align: center;
|
||||
}
|
||||
.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 {
|
||||
.player {
|
||||
.now-playing {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.playlist {
|
||||
.song-duration {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ class ArtistController < ApplicationController
|
|||
render :json => {status: 'loading_failed', pics: []}
|
||||
return
|
||||
end
|
||||
name = params[:name].gsub('%20', ' ').gsub('+', ' ')
|
||||
name = params[:name].gsub('%20', ' ').gsub('+', ' ').gsub('.html', '')
|
||||
artist = Artist.find_by_name(name)
|
||||
if artist and artist.status == 0
|
||||
pics = []
|
||||
|
|
@ -46,8 +46,8 @@ class ArtistController < ApplicationController
|
|||
return
|
||||
end
|
||||
end
|
||||
data['artist'] = {id: artist.id, name: artist.name, desc: ActionController::Base.helpers.strip_tags(artist.desc), pic: artist.pic_url}
|
||||
data['albums'] = []
|
||||
data[:artist] = {id: artist.id, name: artist.name, desc: ActionController::Base.helpers.strip_tags(artist.desc), pic: artist.pic_url}
|
||||
data[:albums] = []
|
||||
albums = artist.albums
|
||||
albums.each do |album|
|
||||
if @@default_album_types.include? album.album_type
|
||||
|
|
@ -60,17 +60,21 @@ class ArtistController < ApplicationController
|
|||
time = (track.length / 1000).round
|
||||
time_m = (time / 60).floor
|
||||
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
|
||||
tmp_track['duration'] = '0:00'
|
||||
tmp_track[:duration] = '0:00'
|
||||
end
|
||||
(track.bonus == 0 ? album_tracks : bonus_tracks) << tmp_track
|
||||
end
|
||||
tmp_album['tracks'] = {album: album_tracks, bonus: bonus_tracks}
|
||||
data['albums'] << tmp_album
|
||||
tmp_album[:tracks] = {album: album_tracks, bonus: bonus_tracks}
|
||||
data[:albums] << tmp_album
|
||||
end
|
||||
end
|
||||
render :json => data
|
||||
@data = data
|
||||
respond_to do |format|
|
||||
format.html { render :partial => 'data' }
|
||||
format.json { render :json => @data }
|
||||
end
|
||||
end
|
||||
|
||||
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
|
||||
.row
|
||||
.span11.columns
|
||||
.row.artist-info
|
||||
.span4.columns.pic
|
||||
%img{ :src => "http://userserve-ak.last.fm/serve/_/33371/Foo+Fighters.jpg" }
|
||||
.span7.columns.desc
|
||||
%h2 Foo Fighters
|
||||
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.
|
||||
.span11.columns#content
|
||||
|
||||
|
||||
.span5.columns
|
||||
.player
|
||||
%h5.now-playing Foo Fighters — Long Road to Ruin
|
||||
.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