1
0
Fork 0

Boostrap 2.1

This commit is contained in:
Gregory Eremin 2012-09-10 20:45:17 +04:00
parent baa680e7b5
commit a29f4433ca
15 changed files with 104 additions and 118 deletions

View File

@ -14,7 +14,7 @@ group :assets do
gem "rails-backbone" gem "rails-backbone"
gem "hogan_assets" gem "hogan_assets"
gem "bourbon" gem "bourbon"
gem "bootstrap-sass", "~> 2.0.4.0" gem "bootstrap-sass", "~> 2.1.0.0"
gem "soundmanager-rails" gem "soundmanager-rails"
gem "font-awesome-rails" gem "font-awesome-rails"
end end
@ -29,5 +29,5 @@ end
gem "jbuilder" gem "jbuilder"
gem "haml" gem "haml"
gem "lastfm-client"
gem "robbie", path: "../robbie" gem "robbie", path: "../robbie"
gem "beatparser", path: "../beatparser"

View File

@ -1,11 +1,3 @@
PATH
remote: ../beatparser
specs:
beatparser (0.0.1)
lastfm-client
musicbrainz
robbie
PATH PATH
remote: ../robbie remote: ../robbie
specs: specs:
@ -45,12 +37,12 @@ GEM
multi_json (~> 1.0) multi_json (~> 1.0)
arel (3.0.2) arel (3.0.2)
awesome_print (1.0.2) awesome_print (1.0.2)
blankslate (2.1.2.4) blankslate (3.1.2)
bootstrap-sass (2.0.4.0) bootstrap-sass (2.1.0.0)
bourbon (2.1.1) bourbon (2.1.1)
sass (>= 3.1) sass (>= 3.1)
builder (3.0.0) builder (3.0.3)
capistrano (2.12.0) capistrano (2.13.3)
highline highline
net-scp (>= 1.0.0) net-scp (>= 1.0.0)
net-sftp (>= 2.0.0) net-sftp (>= 2.0.0)
@ -66,27 +58,27 @@ GEM
daemons (1.1.9) daemons (1.1.9)
ejs (1.0.0) ejs (1.0.0)
erubis (2.7.0) erubis (2.7.0)
eventmachine (0.12.10) eventmachine (1.0.0)
execjs (1.4.0) execjs (1.4.0)
multi_json (~> 1.0) multi_json (~> 1.0)
font-awesome-rails (0.4.0) font-awesome-rails (0.4.0)
railties (~> 3.1) railties (~> 3.1)
haml (3.1.7) haml (3.1.7)
highline (1.6.13) highline (1.6.14)
hike (1.2.1) hike (1.2.1)
hogan_assets (1.3.2) hogan_assets (1.3.2)
execjs (>= 1.2.9) execjs (>= 1.2.9)
sprockets (>= 2.0.3) sprockets (>= 2.0.3)
tilt (>= 1.3.3) tilt (>= 1.3.3)
httparty (0.8.3) httparty (0.9.0)
multi_json (~> 1.0) multi_json (~> 1.0)
multi_xml multi_xml
i18n (0.6.0) i18n (0.6.1)
jbuilder (0.4.0) jbuilder (0.5.0)
activesupport (>= 3.0.0) activesupport (>= 3.0.0)
blankslate (>= 2.1.2.4) blankslate (>= 2.1.2.4)
journey (1.0.4) journey (1.0.4)
jquery-rails (2.1.1) jquery-rails (2.1.2)
railties (>= 3.1.0, < 5.0) railties (>= 3.1.0, < 5.0)
thor (~> 0.14) thor (~> 0.14)
json (1.7.5) json (1.7.5)
@ -100,8 +92,6 @@ GEM
mime-types (1.19) mime-types (1.19)
multi_json (1.3.6) multi_json (1.3.6)
multi_xml (0.5.1) multi_xml (0.5.1)
musicbrainz (0.7.0)
nokogiri
net-scp (1.0.4) net-scp (1.0.4)
net-ssh (>= 1.99.1) net-ssh (>= 1.99.1)
net-sftp (2.0.5) net-sftp (2.0.5)
@ -109,9 +99,8 @@ GEM
net-ssh (2.5.2) net-ssh (2.5.2)
net-ssh-gateway (1.1.0) net-ssh-gateway (1.1.0)
net-ssh (>= 1.99.1) net-ssh (>= 1.99.1)
nokogiri (1.5.5)
oj (1.3.4) oj (1.3.4)
pg (0.14.0) pg (0.14.1)
polyglot (0.3.3) polyglot (0.3.3)
rack (1.4.1) rack (1.4.1)
rack-cache (1.2) rack-cache (1.2)
@ -164,17 +153,16 @@ GEM
polyglot polyglot
polyglot (>= 0.3.1) polyglot (>= 0.3.1)
tzinfo (0.3.33) tzinfo (0.3.33)
uglifier (1.2.7) uglifier (1.3.0)
execjs (>= 0.3.0) execjs (>= 0.3.0)
multi_json (~> 1.3) multi_json (~> 1.0, >= 1.0.2)
PLATFORMS PLATFORMS
ruby ruby
DEPENDENCIES DEPENDENCIES
awesome_print awesome_print
beatparser! bootstrap-sass (~> 2.1.0.0)
bootstrap-sass (~> 2.0.4.0)
bourbon bourbon
capistrano capistrano
coffee-rails (~> 3.2.1) coffee-rails (~> 3.2.1)
@ -183,6 +171,7 @@ DEPENDENCIES
hogan_assets hogan_assets
jbuilder jbuilder
jquery-rails jquery-rails
lastfm-client
pg pg
rails (= 3.2.8) rails (= 3.2.8)
rails-backbone rails-backbone

View File

@ -2,7 +2,11 @@
#= require jquery_ujs #= require jquery_ujs
#= require jquery.autocomplete #= require jquery.autocomplete
# require soundmanager #= require bootstrap-dropdown
#= require bootstrap-tooltip
#= require bootstrap-popover
#= require soundmanager
#= require vk_music #= require vk_music
#= require hogan #= require hogan
@ -14,10 +18,4 @@
#= require backbone/beat_haven #= require backbone/beat_haven
#= require locale/en #= require locale/en
#= require locale/ru #= require locale/ru
#= require_tree ./bindings
#= require bootstrap-dropdown
#= require bootstrap-tooltip
#= require bootstrap-popover
#= require_tree .

View File

@ -5,7 +5,6 @@
#= require_tree ./collections #= require_tree ./collections
#= require_tree ./views #= require_tree ./views
#= require_tree ./routers #= require_tree ./routers
#= require ./i18n
window.BeatHaven = window.BeatHaven =
Modules: {} Modules: {}
@ -29,7 +28,7 @@ window.BeatHaven =
@VK = new BeatHaven.Models.VK() @VK = new BeatHaven.Models.VK()
@I18n = new BeatHaven.Modules.I18n() @I18n = new BeatHaven.Modules.I18n()
# @VK.init() @VK.init()
Backbone.history.start(pushState: true); Backbone.history.start(pushState: true);
$("a").live "click", (e) -> $("a").live "click", (e) ->

View File

@ -15,9 +15,9 @@ class BeatHaven.Models.Track extends Backbone.Model
artists: @.get("artists") artists: @.get("artists")
track: @.get("title") track: @.get("title")
) )
# unless @.get("sm_obj")? unless @.get("sm_obj")?
# this.add_to_library(autoload: true, autoplay: false) this.add_to_library(autoload: true, autoplay: false)
# BH.Player.play(this) BH.Player.play(this)
$(".artist-page .tracks li[data-id]").removeClass("now-playing").removeClass("paused") $(".artist-page .tracks li[data-id]").removeClass("now-playing").removeClass("paused")
this.node().addClass("now-playing") this.node().addClass("now-playing")

View File

@ -9,12 +9,12 @@
<span data-translate-contents="artist.album.add">{{i18n_add}}</span> <span data-translate-contents="artist.album.add">{{i18n_add}}</span>
</a> </a>
</div> </div>
<div class="bh-underlay-green"> <!-- <div class="bh-underlay-green">
<a href="" class="btn btn-bh-dark album-play"> <a href="" class="btn btn-bh-dark album-play">
<i class="icon-play icon-white"></i> <i class="icon-play icon-white"></i>
<span data-translate-contents="artist.album.play">{{i18n_play}}</span> <span data-translate-contents="artist.album.play">{{i18n_play}}</span>
</a> </a>
</div> </div> -->
</div> </div>
<ul class="tracks"> <ul class="tracks">
{{#album_tracks}} {{#album_tracks}}

View File

@ -1,15 +1,15 @@
<div class="artist-page"> <div class="artist-page">
<h1>{{artist_title}}</h1> <h1>{{artist_title}}</h1>
<div class="artist-info"> <div class="row artist-info">
<div class="pic"> <div class="span4 pic">
<img src="{{artist_pic}}" alt="{{artist_title}}"> <img src="{{artist_pic}}" alt="{{artist_title}}">
</div> </div>
<div class="bio">{{& artist_bio}}</div> <div class="span8 bio">{{& artist_bio}}</div>
</div> </div>
<div class="albums"> <div class="albums">
{{#artist_albums}} {{#artist_albums}}
<div class="album"> <div class="row album">
<div class="pic"> <div class="span4 pic">
<img src="{{album_pic}}" alt="{{album_title}}"><br> <img src="{{album_pic}}" alt="{{album_title}}"><br>
<div class="bh-underlay-blue"> <div class="bh-underlay-blue">
<a href="" class="btn btn-bh-dark album-add"> <a href="" class="btn btn-bh-dark album-add">
@ -17,35 +17,37 @@
<span data-translate-contents="artist.album.add">{{i18n_add}}</span> <span data-translate-contents="artist.album.add">{{i18n_add}}</span>
</a> </a>
</div> </div>
<div class="bh-underlay-green"> <!-- <div class="bh-underlay-green">
<a href="" class="btn btn-bh-dark album-play"> <a href="" class="btn btn-bh-dark album-play">
<i class="icon-play icon-white"></i> <i class="icon-play icon-white"></i>
<span data-translate-contents="artist.album.play">{{i18n_play}}</span> <span data-translate-contents="artist.album.play">{{i18n_play}}</span>
</a> </a>
</div> </div> -->
</div> </div>
<h2 class="title">{{album_title}} ({{album_year}})</h2> <div class="span8">
<ul class="tracks"> <h2 class="title">{{album_title}} ({{album_year}})</h2>
{{#album_tracks}} <ul class="tracks">
<li data-id="{{track_id}}"> {{#album_tracks}}
<a href="" class="btn btn-round track-play" data-translate-title="artist.album.track.play" title="{{i18n_play}}"> <li data-id="{{track_id}}">
<i class="icon-play"></i> <a href="" class="btn btn-round track-play" data-translate-title="artist.album.track.play" title="{{i18n_play}}">
</a> <i class="icon-play"></i>
<a href="" class="btn btn-round track-pause" data-translate-title="artist.album.track.pause" title="{{i18n_pause}}"> </a>
<i class="icon-pause"></i> <a href="" class="btn btn-round track-pause" data-translate-title="artist.album.track.pause" title="{{i18n_pause}}">
</a> <i class="icon-pause"></i>
<div class="title"> </a>
<div class="inner"> <div class="title">
<a href="{{track_url}}" class="track-link">{{track_title}}</a> <div class="inner">
<a href="{{track_url}}" class="track-link">{{track_title}}</a>
</div>
</div> </div>
</div> <span class="length">{{track_length}}</span>
<span class="length">{{track_length}}</span> <a href="" class="btn btn-round track-add" data-translate-title="artist.album.track.add" title="{{i18n_add}}">
<a href="" class="btn btn-round track-add" data-translate-title="artist.album.track.add" title="{{i18n_add}}"> <i class="icon-plus"></i>
<i class="icon-plus"></i> </a>
</a> </li>
</li> {{/album_tracks}}
{{/album_tracks}} </ul>
</ul> </div>
</div> </div>
{{/artist_albums}} {{/artist_albums}}
</div> </div>

View File

@ -1,10 +1,10 @@
$ -> $ ->
$(".navbar-search input").focus -> $(".navbar-search input").focus ->
$(this).animate(width: 249) $(this).animate(width: 244)
$(".player").animate(width: 368) $(".player").animate(width: 368)
$(".navbar-search input").blur -> $(".navbar-search input").blur ->
$(this).animate(width: 99) $(this).animate(width: 133)
$(".player").animate(width: 518) $(".player").animate(width: 467)
window.desired = $(".navbar-search input").autocomplete window.desired = $(".navbar-search input").autocomplete
serviceUrl: "/api/search/complete.json" serviceUrl: "/api/search/complete.json"

View File

@ -1,10 +1,11 @@
.artist-page .album .tracks { .artist-page .album .tracks {
margin-left: 265px; margin: 0 0 10px 0;
& > li { & > li {
position: relative; position: relative;
display: block; display: block;
width: 100%; margin: 0 0 0 -5px;
width: 625px;
height: 38px; height: 38px;
list-style: none; list-style: none;
font-family: "Source Sans Pro", $helvetica; font-family: "Source Sans Pro", $helvetica;
@ -15,7 +16,7 @@
&:after { &:after {
content: ""; content: "";
display: block; display: block;
width: 627px; width: 578px;
float: right; float: right;
border-bottom: #e0e0e0 1px solid; border-bottom: #e0e0e0 1px solid;
margin: 0 5px 0 0; margin: 0 5px 0 0;
@ -54,12 +55,12 @@
} }
.btn-round { .btn-round {
width: 10px; width: 2px;
height: 22px; height: 22px;
border-radius: 50px; border-radius: 50px;
i { i {
margin: 6px 0 0 -2px; margin: 5px 0 0 -6px;
} }
} }
@ -82,11 +83,11 @@
top: 5px; top: 5px;
left: 42px; left: 42px;
height: 28px; height: 28px;
max-width: 580px; max-width: 530px;
overflow: hidden; overflow: hidden;
.inner { .inner {
width: 1000px; width: 10000px;
.track-link { .track-link {
color: #303030; color: #303030;
@ -135,7 +136,7 @@
display: none; display: none;
i { i {
margin-left: -3px; margin-left: -7px;
} }
} }

View File

@ -9,7 +9,7 @@
@import "album-track"; @import "album-track";
@import "player"; @import "player";
@import "playlist"; @import "playlist";
@import "auth"; @import "preferences";
@import "popup"; @import "popup";
@import "tour"; @import "tour";
@ -27,6 +27,7 @@ body {
.navbar { .navbar {
background-color: #0a3a82; background-color: #0a3a82;
background: url($blue_noise); background: url($blue_noise);
@include box-shadow(0 0 5px rgba(0, 0, 0, .5));
.navbar-inner { .navbar-inner {
background: none; background: none;
@ -37,10 +38,11 @@ body {
} }
} }
a.brand { a.brand {
margin-top: 1px; margin-top: -1px;
font-family: "Lobster Two", $helvetica; font-family: "Lobster Two", $helvetica;
font-style: italic; font-style: italic;
font-size: 24px; font-size: 24px;
line-height: 24px;
color: #fafafa; color: #fafafa;
letter-spacing: 1px; letter-spacing: 1px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, .2); text-shadow: 1px 1px 0 rgba(255, 255, 255, .2);
@ -51,11 +53,12 @@ body {
} }
} }
.navbar-search { .navbar-search {
margin-top: 8px; margin: 6px;
input { input {
width: 99px; width: 133px;
line-height: 16px; line-height: 16px;
color: #ffffff;
border-color: rgba(0, 0, 0, .4); border-color: rgba(0, 0, 0, .4);
background-color: rgba(0, 0, 0, .3); background-color: rgba(0, 0, 0, .3);

View File

@ -5,20 +5,19 @@
weight: 700; weight: 700;
size: 42px; size: 42px;
} }
line-height: 64px; line-height: 48px;
letter-spacing: 1px; letter-spacing: 1px;
text-shadow: 0 0 1px rgba(0, 0, 0, .3); text-shadow: 0 0 1px rgba(0, 0, 0, .3);
} }
.artist-info { .artist-info {
min-height: 250px; min-height: 300px;
margin-bottom: 20px; margin-bottom: 20px;
.pic { .pic {
float: left;
img { img {
width: 250px; width: 100%;
margin-top: 5px; margin-top: 5px;
border: { border: {
size: 1px; size: 1px;
@ -30,7 +29,6 @@
} }
} }
.bio { .bio {
margin-left: 270px;
font-family: "Source Sans Pro", $helvetica; font-family: "Source Sans Pro", $helvetica;
font-size: 22px; font-size: 22px;
line-height: 26px; line-height: 26px;
@ -46,19 +44,17 @@
font: { font: {
family: "Lobster Two", $helvetica; family: "Lobster Two", $helvetica;
weight: 700; weight: 700;
size: 26px; size: 28px;
} }
margin: 5px 0;
text-shadow: 0 0 1px rgba(0, 0, 0, .3); text-shadow: 0 0 1px rgba(0, 0, 0, .3);
} }
.pic { .pic {
float: left;
height: 300px;
text-align: center; text-align: center;
img { img {
background-color: #a0a0a0; background-color: #a0a0a0;
width: 250px; width: 100%;
height: 250px;
margin-top: 5px; margin-top: 5px;
border: { border: {
size: 1px; size: 1px;

View File

@ -1,25 +1,24 @@
.autocomplete-w1 { .autocomplete-w1 {
margin: 10px 0 0 0; margin: 8px 0 0 0;
width: 268px; width: 274px;
background: { background: {
color: #f0f0f0; color: #124ba8;
color: rgba(240, 243, 246, .95); color: rgba(18, 75, 158, .95);
} }
@include box-shadow(5px 14px 5px rgba(0, 0, 0, .15)); @include box-shadow(5px 14px 5px rgba(0, 0, 0, .15));
.autocomplete { .autocomplete {
max-height: 330px !important;
div { div {
width: 258px; width: 264px;
padding: 5px 5px; padding: 5px 5px;
border: { border: {
color: transparent; color: transparent;
style: solid; style: solid;
width: 1px; width: 1px;
} }
background: { color: #f0f0f0;
color: #f0f0f0;
color: rgba(240, 243, 246, .95);
}
&:last-child { &:last-child {
border-bottom: { border-bottom: {
@ -30,8 +29,7 @@
&.selected { &.selected {
color: #ffffff; color: #ffffff;
background-color: #49AFCD; background-color: rgba(255, 255, 255, .3);
background-color: rgba(73, 175, 205, .95);
border-radius: 5px; border-radius: 5px;
} }
} }

View File

@ -1,13 +1,13 @@
.player { .player {
width: 518px; width: 467px;
.controls { .controls {
float: left; float: left;
margin: 3px 0 0 -96px; margin: 1px 0 0 -109px;
a { a {
@include inline-block; @include inline-block;
margin: 11px 2px 0 0; margin: 11px 6px 0 0;
font-size: 22px; font-size: 22px;
color: #e0e0e0; color: #e0e0e0;
text-shadow: 0 0 2px rgba(255, 255, 255, .6); text-shadow: 0 0 2px rgba(255, 255, 255, .6);
@ -26,8 +26,8 @@
.progress-bar { .progress-bar {
position: relative; position: relative;
width: 100%; width: 100%;
height: 26px; height: 28px;
margin: 8px 0 0; margin: 6px 0 0;
background-color: rgba(0, 0, 0, .3); background-color: rgba(0, 0, 0, .3);
border: { border: {
style: solid; style: solid;
@ -40,7 +40,7 @@
.bar { .bar {
position: absolute; position: absolute;
width: 0%; width: 0%;
height: 26px; height: 28px;
background-color: rgba(255, 255, 255, .1); background-color: rgba(255, 255, 255, .1);
@include box-shadow(inset 0 0 2px rgba(255, 255, 255, .2)); @include box-shadow(inset 0 0 2px rgba(255, 255, 255, .2));
@include border-radius(4px 0px 0px 4px); @include border-radius(4px 0px 0px 4px);
@ -52,7 +52,7 @@
family: "Source Sans Pro", $helvetica; family: "Source Sans Pro", $helvetica;
size: 14px; size: 14px;
} }
line-height: 24px; line-height: 26px;
color: #ffffff; color: #ffffff;
text-shadow: 1px 1px 0 rgba(80, 80, 80, .4); text-shadow: 1px 1px 0 rgba(80, 80, 80, .4);
} }

View File

@ -1,9 +1,9 @@
.playlist { .playlist {
display: none; display: none;
position: absolute; position: fixed;
top: 41px; top: 41px;
right: 50%; right: 50%;
width: 618px; width: 578px;
margin-right: -430px; margin-right: -430px;
padding: 7px 0 3px 0; padding: 7px 0 3px 0;
background-color: #124ba8; background-color: #124ba8;
@ -45,7 +45,7 @@
} }
.length { .length {
position: absolute; position: absolute;
right: 9391px; right: 9431px;
} }
} }
} }

View File

@ -1,6 +1,6 @@
.navbar { .navbar {
.preferences { .preferences {
margin: 14px 10px 0 15px; margin: 12px 10px 0 15px;
.toggle-button { .toggle-button {
@include inline-block; @include inline-block;