Artist import, page

2012-08-27 03:53:30 +04:00
parent 235c0b809e
commit b5f616a9d9
36 changed files with 1268 additions and 312 deletions
@@ -12,4 +12,11 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require mustache
+//= require hogan
+//= require underscore
+//= require backbone
+//= require backbone_rails_sync
+//= require backbone_datalink
+//= require backbone/beat_haven
 //= require_tree .
@@ -0,0 +1,18 @@
+#= require_self
+#= require_tree ./templates
+#= require_tree ./models
+#= require_tree ./views
+#= require_tree ./routers
+
+window.BeatHaven =
+  Models: {}
+  Collections: {}
+  Routers: {}
+  Views: {}
+
+  init: ->
+    new BeatHaven.Routers.Artist()
+    Backbone.history.start();
+
+$ ->
+  BeatHaven.init()
@@ -0,0 +1,2 @@
+class BeatHaven.Models.Artist extends Backbone.Model
+  urlRoot: "/api/artists"
@@ -0,0 +1,9 @@
+class BeatHaven.Routers.Artist extends Backbone.Router
+  routes:
+    "artist/:name": "show"
+
+  show: (name) ->
+    artist = new BeatHaven.Models.Artist(id: name)
+    artist.fetch()
+    view = new BeatHaven.Views.ArtistShow(model: artist)
+    $("#main").html(view.render().el)
@@ -0,0 +1,39 @@
+<div class="artist-page">
+  <h1>{{name}}</h1>
+  <div class="artist-info">
+    <div class="pic">
+      <img src="{{pic}}" alt="{{name}}">
+    </div>
+    <div class="bio">{{bio}}</div>
+  </div>
+  <div class="albums">
+  {{#albums}}
+    <div class="album">
+      <div class="pic">
+        <img src="{{pic_safe}}" alt="{{title}}"><br>
+        <a href="" class="btn btn-success play-all"><i class="icon-plus icon-white"></i> Add to playlist</a>
+        <a href="" class="btn btn-info play-all"><i class="icon-play icon-white"></i> Play</a>
+      </div>
+      <h2 class="title">{{title}} ({{year}})</h2>
+      <div class="tracks">
+        <table class="table">
+          <tbody>
+          {{#tracks}}
+            <tr>
+              <td class="title">
+                <a href="" class="btn btn-round track-play"><i class="icon-play"></i></a>
+                <a href="" class="track-link">{{title}}</a>
+              </td>
+              <td class="length">
+                <span class="length">{{length}}</span>
+                <a href="" class="btn btn-round track-add"><i class="icon-plus"></i></a>
+              </td>
+            </tr>
+          {{/tracks}}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  {{/albums}}
+  </div>
+</div>
@@ -0,0 +1,10 @@
+class BeatHaven.Views.ArtistShow extends Backbone.View
+  template: HoganTemplates["backbone/templates/artists/show"]
+
+  initialize: ->
+    @model.on("change", @render, this)
+
+  render: ->
+    return this if typeof @model.attributes.id is "string"
+    $(@el).html(@template.render(@model.toJSON()))
+    this
@@ -1,13 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the top of the
- * compiled file, but it's generally better to create a new file per style scope.
- *
- *= require_self
- *= require_tree .
- */
@@ -0,0 +1,132 @@
+.artist-page {
+  h1 {
+    font-family: Lobster, Georgia, serif;
+    font-size: 42px;
+    line-height: 64px;
+    letter-spacing: 1px;
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
+  }
+
+  .artist-info {
+    min-height: 250px;
+    margin-bottom: 50px;
+
+    .pic {
+      float: left;
+
+      img {
+        width: 250px;
+        height: 250px;
+        border-size: 1px;
+        border-style: solid;
+        border-color: rgba(255, 255, 255, .2);
+        border-radius: 5px;
+        box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
+      }
+    }
+    .bio {
+      margin-left: 270px;
+      font-family: "Source Sans Pro", Helvetica, sans-serif;
+      font-size: 22px;
+      line-height: 26px;
+      text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
+    }
+  }
+
+  .album {
+    min-height: 250px;
+    margin-bottom: 30px;
+
+    h2 {
+      font-family: Lobster, Georgia, Serif;
+      font-size: 26px;
+      text-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
+    }
+    .pic {
+      float: left;
+      height: 300px;
+      text-align: center;
+
+      img {
+        background-color: #a0a0a0;
+        width: 250px;
+        height: 250px;
+        border-size: 1px;
+        border-style: solid;
+        border-color: rgba(255, 255, 255, .2);
+        border-radius: 5px;
+        box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
+        margin-bottom: 10px;
+      }
+    }
+    .title {
+      margin-left: 270px;
+      margin-bottom: 10px;
+    }
+    .tracks {
+      margin-left: 270px;
+
+      tr:hover {
+        td {
+          background-color: rgba(200, 200, 200, .3);
+
+          .track-play i {
+            opacity: 1;
+          }
+          &.length {
+            .track-add {
+              display: block;
+            }
+            .length {
+              display: none;
+            }
+          }
+        }
+      }
+
+      td {
+        position: relative;
+        font-family: "Source Sans Pro", Helvetica, sans-serif;
+        font-size: 20px;
+        line-height: 28px;
+        text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
+
+        .btn-round {
+          width: 10px;
+          height: 22px;
+          border-radius: 50px;
+
+          i {
+            margin: 3px 0 0 -1px;
+          }
+        }
+      }
+
+      td.title {
+        padding-left: 40px;
+        .track-play {
+          position: absolute;
+          margin: -2px 0 0 -40px;
+
+          i {
+            opacity: .3;
+          }
+        }
+        .track-link {
+          color: #303030;
+        }
+      }
+
+      td.length {
+        text-align: right;
+
+        .track-add {
+          position: absolute;
+          right: 8px;
+          margin: -2px 0 0 0;
+          display: none;
+        }
+      }
+    }
+  }
+}