1
0
Fork 0

Playlist draft

This commit is contained in:
Gregory Eremin 2012-09-09 21:20:41 +04:00
parent e72aa5c292
commit d1a5b11489
7 changed files with 100 additions and 3 deletions

View File

@ -8,6 +8,7 @@
@import "artist"; @import "artist";
@import "album-track"; @import "album-track";
@import "player"; @import "player";
@import "playlist";
@import "auth"; @import "auth";
@import "popup"; @import "popup";
@import "tour"; @import "tour";

View File

@ -3,11 +3,11 @@
.controls { .controls {
float: left; float: left;
margin: 3px 0 0 -86px; margin: 3px 0 0 -96px;
a { a {
@include inline-block; @include inline-block;
margin: 11px 5px 0 0; margin: 11px 2px 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);

View File

@ -0,0 +1,33 @@
.playlist {
display: block;
position: absolute;
top: 50px;
right: 50%;
width: 618px;
margin-right: -430px;
padding: 5px 0;
background-color: red;
li {
display: block;
overflow: hidden;
.inner {
width: 10000px;
margin-left: 5px;
height: 20px;
position: relative;
.artists {
&:after {
content: ""
}
}
.length {
position: absolute;
left: 580px;
}
}
}
}

View File

@ -4,6 +4,7 @@
%a.icon-play.play{ "href" => "", "data-translate-title" => "header.player.play" } %a.icon-play.play{ "href" => "", "data-translate-title" => "header.player.play" }
%a.icon-pause.pause{ "href" => "", "data-translate-title" => "header.player.pause" } %a.icon-pause.pause{ "href" => "", "data-translate-title" => "header.player.pause" }
%a.icon-forward.next{ "href" => "", "data-translate-title" => "header.player.next" } %a.icon-forward.next{ "href" => "", "data-translate-title" => "header.player.next" }
%a.icon-list.playlist-toggle{ "href" => "", "data-translate-title" => "header.player.playlist" }
.progress-bar .progress-bar
.bar .bar
.title{ "data-translate-contents" => "header.player.waiting" } .title{ "data-translate-contents" => "header.player.waiting" }

View File

@ -0,0 +1,61 @@
%ul.playlist
%li
.inner
%span.artists Foo Fighters
%span.title This Is a Call
%span.length 3:53
%li
.inner
%span.artists Foo Fighters
%span.title I'll Stick Around
%span.length 3:53
%li
.inner
%span.artists Foo Fighters
%span.title Big Me
%span.length 2:12
%li
.inner
%span.artists Foo Fighters
%span.title Alone + Easy Target
%span.length 4:05
%li
.inner
%span.artists Foo Fighters
%span.title Good Grief
%span.length 4:01
%li
.inner
%span.artists Foo Fighters
%span.title Floaty
%span.length 4:30
%li
.inner
%span.artists Foo Fighters
%span.title Weenie Beenie
%span.length 2:45
%li
.inner
%span.artists Foo Fighters
%span.title Oh, George
%span.length 3:00
%li
.inner
%span.artists Foo Fighters
%span.title For All the Cows
%span.length 4:13
%li
.inner
%span.artists Foo Fighters
%span.title X-Static
%span.length 4:01
%li
.inner
%span.artists Foo Fighters
%span.title Wattershed
%span.length 2:15
%li
.inner
%span.artists Foo Fighters
%span.title Exhausted
%span.length 5:47

View File

@ -20,6 +20,7 @@
.preferences .preferences
%a.icon-cog.toggle-button{ "href" => "/preferences", "data-translate-title" => "header.preferences" } %a.icon-cog.toggle-button{ "href" => "/preferences", "data-translate-title" => "header.preferences" }
= render partial: "player" = render partial: "player"
= render partial: "playlist"
.container#main You can't steal what's free .container#main You can't steal what's free
.fullscreen .fullscreen

View File

@ -89,7 +89,7 @@
if (!this.options.width) { this.options.width = this.el.width(); } if (!this.options.width) { this.options.width = this.el.width(); }
this.mainContainerId = 'AutocompleteContainter_' + uid; this.mainContainerId = 'AutocompleteContainter_' + uid;
$('<div id="' + this.mainContainerId + '" style="position:absolute;z-index:9999;"><div class="autocomplete-w1"><div class="autocomplete" id="' + autocompleteElId + '" style="display:none; width:300px;"></div></div></div>').appendTo('body'); $('<div id="' + this.mainContainerId + '" style="position:fixed;z-index:9999;"><div class="autocomplete-w1"><div class="autocomplete" id="' + autocompleteElId + '" style="display:none; width:300px;"></div></div></div>').appendTo('body');
this.container = $('#' + autocompleteElId); this.container = $('#' + autocompleteElId);
this.fixPosition(); this.fixPosition();