From 1b02272d8130b3f8164f52e0b958bc19e1274f2f Mon Sep 17 00:00:00 2001 From: magnolia-fan Date: Thu, 8 Sep 2011 05:48:33 +0400 Subject: [PATCH] Haml templates, artist page renderer --- app/assets/javascripts/beathaven.coffee | 13 - app/assets/javascripts/pages.coffee | 47 +--- app/assets/stylesheets/albums.scss | 172 ++---------- app/assets/stylesheets/application.css | 15 +- app/assets/stylesheets/header.scss | 79 +----- app/assets/stylesheets/main.css | 84 ------ app/assets/stylesheets/misc.scss | 168 ++---------- app/assets/stylesheets/player.scss | 254 ++---------------- app/controllers/artist_controller.rb | 20 +- .../{index.html.erb => index.html.haml} | 0 app/views/artist/_data.html.haml | 20 ++ app/views/layouts/application.html.haml | 43 ++- 12 files changed, 149 insertions(+), 766 deletions(-) rename app/views/application/{index.html.erb => index.html.haml} (100%) create mode 100644 app/views/artist/_data.html.haml diff --git a/app/assets/javascripts/beathaven.coffee b/app/assets/javascripts/beathaven.coffee index 90b3fc0..0e98075 100644 --- a/app/assets/javascripts/beathaven.coffee +++ b/app/assets/javascripts/beathaven.coffee @@ -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() diff --git a/app/assets/javascripts/pages.coffee b/app/assets/javascripts/pages.coffee index defba83..a54967f 100644 --- a/app/assets/javascripts/pages.coffee +++ b/app/assets/javascripts/pages.coffee @@ -1,55 +1,10 @@ class window.Pages renderArtist: (data) -> - artist_info = $ ' -
-
- ' +data.artist.name+ ' -
-

' +data.artist.name+ '

-
- ' +data.artist.desc+ ' -
-
' - - albums_info = $ '
' - $.each data.albums, (i, album) -> - if album.year? - album_info = $ ' -
-

' +album.name+ ' (' +album.year+ ')

-
- ' +album.name+ ' by ' +data.artist.name+ ' -
-
'+_beathaven.ls('ADD_TO_NOW_PLAYING')+'
-
-
-
    -
    -
    ' - - $.each album.tracks.album, (i, track) -> - track_info = $ ' -
  • -
    +
    -
    -
    - ' +(i+1)+ ' -
    ' +track.name+ '
    -
    ' +track.duration+ '
    -
    -
    • ' - - $(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) -> diff --git a/app/assets/stylesheets/albums.scss b/app/assets/stylesheets/albums.scss index 25ac893..f26edbe 100644 --- a/app/assets/stylesheets/albums.scss +++ b/app/assets/stylesheets/albums.scss @@ -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; + } + } } \ No newline at end of file diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index d865070..7611fcd 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -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 + */ \ No newline at end of file diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/header.scss index 46a7d60..a105a8b 100644 --- a/app/assets/stylesheets/header.scss +++ b/app/assets/stylesheets/header.scss @@ -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; } \ No newline at end of file diff --git a/app/assets/stylesheets/main.css b/app/assets/stylesheets/main.css index a2442c7..380b0fc 100644 --- a/app/assets/stylesheets/main.css +++ b/app/assets/stylesheets/main.css @@ -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; } \ No newline at end of file diff --git a/app/assets/stylesheets/misc.scss b/app/assets/stylesheets/misc.scss index e8a43c2..3375ba3 100644 --- a/app/assets/stylesheets/misc.scss +++ b/app/assets/stylesheets/misc.scss @@ -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; } \ No newline at end of file diff --git a/app/assets/stylesheets/player.scss b/app/assets/stylesheets/player.scss index 5752ca2..1e0de0e 100644 --- a/app/assets/stylesheets/player.scss +++ b/app/assets/stylesheets/player.scss @@ -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; + } } \ No newline at end of file diff --git a/app/controllers/artist_controller.rb b/app/controllers/artist_controller.rb index c6023a3..d8a9e8a 100644 --- a/app/controllers/artist_controller.rb +++ b/app/controllers/artist_controller.rb @@ -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 diff --git a/app/views/application/index.html.erb b/app/views/application/index.html.haml similarity index 100% rename from app/views/application/index.html.erb rename to app/views/application/index.html.haml diff --git a/app/views/artist/_data.html.haml b/app/views/artist/_data.html.haml new file mode 100644 index 0000000..a9e32ab --- /dev/null +++ b/app/views/artist/_data.html.haml @@ -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] \ No newline at end of file diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index e1a35c0..4ec1e51 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -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