Playlist draft
This commit is contained in:
parent
e72aa5c292
commit
d1a5b11489
|
@ -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";
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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" }
|
||||||
|
|
|
@ -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
|
|
@ -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
|
||||||
|
|
|
@ -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();
|
||||||
|
|
Loading…
Reference in New Issue