Font Awesome, jbuilder templates, getting rid of beatparser

2012-09-09 17:48:24 +04:00
parent be5a643b55
commit 9cb145f0d7
42 changed files with 520 additions and 233 deletions
@@ -0,0 +1,36 @@
+.artist-page
+  %h1 {{ artist_title }}
+  .artist-info
+    .pic
+      %img{ src: "{{ artist_pic }}", alt: "{{ artist_title }}" }
+    .bio {{& artist_bio}}
+
+  .albums
+  {{#artist_albums}}
+    .album
+      .pic
+        %img{ src: "{{ album_pic }}", alt: "{{ album_title }}" }
+        %br
+        .bh-underlay-blue
+          %a.btn.btn-bh-dark.album-add{ href: "" }
+            %i.icon-plus.icon-white
+            Add to playlist
+        .bh-underlay-green
+          %a.btn.btn-bh-dark.album-play{ href: "" }
+            %i.icon-play.icon-white
+            Play
+
+      %h2.title {{ album_title }} ({{ album_year }})
+      %ul.tracks
+      {{# album_tracks }}
+        %li{ "data-id" => "{{ track_id }}" }
+          %a.btn.btn-round.track-play{ href: "" }
+            %i.icon-play
+          %a.btn.btn-round.track-pause{ href: "" }
+            %i.icon-pause
+          .title
+            .inner
+              %a.track-link{ href: "{{track_url}}" } {{ track_title }}
+          %span.length {{ track_length }}
+          %a.btn.btn-round.track-add{ href: "" }
+            %i.icon-plus
@@ -12,7 +12,7 @@
      <div class="pic">
        <img src="{{album_pic}}" alt="{{album_title}}"><br>
        <div class="bh-underlay-blue">
-          <a href="" class="btn btn-bh-dark album-add"><i class="icon-plus icon-white"></i> Add to playlist</a>
+          <a href="" class="btn btn-bh-dark album-add"><i class="icon-plus"></i> Add to playlist</a>
        </div>
        <div class="bh-underlay-green">
          <a href="" class="btn btn-bh-dark album-play"><i class="icon-play icon-white"></i> Play</a>
@@ -0,0 +1,63 @@
+<div class="hero-unit popup step step-1">
+  <h1>Привет!</h1>
+  <p></p>
+  <p>Это Битхейвен, сайт с музыкой. Наверное, ты у нас первый раз, так что давай я в двух словах расскажу что к чему.</p>
+  <p>Битхейвен не содержит музыки как таковой, он просто умеет хорошо и удобно ее проигрывать. А саму музыку он специально для тебя ищет на <strong>VK.com</strong>. Поэтому прошу тебя для начала авторизоваться через <strong>VK.com</strong>, а потом я покажу что делать дальше.</p>
+  <p>Авторизуемся?</p>
+  <p></p>
+  <p><a href="" class="btn btn-primary btn-large">Хорошо</a></p>
+</div>
+<div class="hero-unit popup step step-1a">
+  <h1>Ой!</h1>
+  <p></p>
+  <p>Авторизация не сработала.</p>
+  <p>Скорее всего так вышло из-за того, что ты не стал авторизовываться или разрешать приложению доступ. Напрасно, оно абсолютно безобидное и в принципе не может сделать тебе ничего плохого.</p>
+  <p>К сожалению, без авторизации <strong>VK.com</strong> я не смогу играть для тебя музыку, извини.</p>
+  <p>Попробуем еще раз или заглянешь позже?</p>
+  <p></p>
+  <p><a href="" class="btn btn-primary btn-large again">Еще раз</a></p>
+</div>
+<div class="hero-unit popup step step-2">
+  <h1>Отлично!</h1>
+  <p></p>
+  <p>Добро пожаловать домой, <span class="your-name-here"></span>!</p>
+  <p>Я заглянул в твои музыкальные записи и обратил внимание, что тебе нравится <strong class="your-favorite-artist-here"></strong>. Давай перейдем на страницу этого исполнителя и я покажу тебе куда нажимать.</p>
+  <p></p>
+  <p><a href="" class="btn btn-primary btn-large">Пошли!</a></p>
+</div>
+<div class="step step-3">
+  <div class="title">Это поиск</div>
+  <div class="content">
+    <p>Он твой лучший друг.</p>
+    <p>Начни вписывать в него название группы или альбома и он с первой же буквы постарается угадать что ты хочешь послушать.</p>
+    <p></p>
+    <a href="" class="btn btn-primary tour-step-3">Дальше!</a>
+  </div>
+</div>
+<div class="step step-4">
+  <div class="title">Музыка!</div>
+  <div class="content">
+    <p>Чтобы начать слушать музыку достаточно нажать на кнопку слева от любимой песни</p>
+    <p>Послушаем?</p>
+    <p></p>
+    <a href="" class="btn btn-primary tour-step-4">Давай!</a>
+  </div>
+</div>
+<div class="step step-5">
+  <div class="title">Прогресс-бар</div>
+  <div class="content">
+    <p>На нем всегда отображается название песни, которая играет в данный момент.</p>
+    <p>Еще с его помощью можно перематывать песню.</p>
+    <p></p>
+    <a href="" class="btn btn-primary tour-step-5">Понял</a>
+  </div>
+</div>
+<div class="step step-6">
+  <div class="title">Кнопочки</div>
+  <div class="content">
+    <p>Предыдущая и следующая песня, плей/пауза, все как обычно.</p>
+    <p>Думаю, ты уже достаточно освоился. Наслаждайся музыкой!</p>
+    <p></p>
+    <a href="" class="btn btn-primary tour-step-6">Спасибо!</a>
+  </div>
+</div>