danbarber/mpd-client
1
0
Fork 0
mirror of https://github.com/danbee/mpd-client synced 2025-03-04 08:39:09 +00:00
Code Issues Releases Wiki Activity

Start work on Library browser.

Browse Source
This commit is contained in:
Dan Barber 2013-12-10 17:59:47 +00:00
parent 637054ad44
commit d3a76ecd47
10 changed files with 64 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/css/common.css.sass
View File

@ -1,28 +1,29 @@
* *
@include box-sizing(border-box) @include box-sizing(border-box)
html
height: 100%
body body
font: 1em "Helvetica Neue", sans-serif font: 1em "Helvetica Neue", sans-serif
margin: 0 margin: 0
height: 100%
#app #app
position: relative
height: 100%
max-width: 320px max-width: 320px
margin: 0 auto margin: 0 auto
padding-top: 2.5em
padding-bottom: 5.625em
header #content
height: 100%
.header
position: fixed position: fixed
top: 0 top: 0
width: 100% width: 100%
background: rgba(248, 248, 248, 0.95) background: rgba(248, 248, 248, 0.95)
border-bottom: 1px solid rgba(0, 0, 0, 0.1) border-bottom: 1px solid rgba(0, 0, 0, 0.1)
z-index: 1
#library
position: absolute
left: 10px
top: 8px
@include button
h1 h1
text-align: center text-align: center
font-size: 1em font-size: 1em

10
assets/css/library.css.sass Normal file
View File

@ -0,0 +1,10 @@
#library
background: white
display: none
position: absolute
top: 0
height: 100%
width: 100%
z-index: 2
header
@extend .header

1
assets/css/mpd-client.css.sass
View File

@ -6,3 +6,4 @@
@import 'common' @import 'common'
@import 'transport' @import 'transport'
@import 'queue' @import 'queue'
@import 'library'

11
assets/css/queue.css.sass
View File

@ -1,4 +1,15 @@
#queue #queue
height: 100%
overflow: auto
padding: 2.5em 0 5.625em
header
z-index: 1
@extend .header
button.library
position: absolute
left: 10px
top: 8px
@include button
ol ol
list-style: none list-style: none
margin: 0 margin: 0

2
assets/js/application.js
View File

@ -11,6 +11,8 @@ $(document).ready(function() {
status: status status: status
}), }),
library: new Library('#library'),
events: new Events(queueSongs, status), events: new Events(queueSongs, status),
queue: new Queue('#queue', { queue: new Queue('#queue', {

9
assets/js/controls/library.js Normal file
View File

@ -0,0 +1,9 @@
var Library = can.Control.extend({
init: function(element, options) {
element.html(
can.view( 'views/library.ejs')
);
}
});

8
public/views/library.ejs Normal file
View File

@ -0,0 +1,8 @@
<header>
<h1>Library</h1>
</header>
<ol class="list">
<li>Artists</li>
<li>Albums</li>
<li>Songs</li>
</ol>

4
public/views/queue.ejs
View File

@ -1,8 +1,8 @@
<header> <header>
<button id="library">Library</button> <button class="library">Library</button>
<h1>Queue</h1> <h1>Queue</h1>
</header> </header>
<ol id="queue"> <ol class="queue">
<% list(queueSongs, function(song) { %> <% list(queueSongs, function(song) { %>
<li id="<%= song.attr('id') %>" data-pos="<%= song.attr('pos') %>" <%= song.attr('playing') ? 'class="playing"' : '' %>> <li id="<%= song.attr('id') %>" data-pos="<%= song.attr('pos') %>" <%= song.attr('playing') ? 'class="playing"' : '' %>>
<p class="title"><%= song.attr('title') %></p> <p class="title"><%= song.attr('title') %></p>

15
public/views/transport.ejs
View File

@ -1,12 +1,17 @@
<% if (status.attr('state') == 'play' || status.attr('state') == 'pause') { %> <div class="scrubber">
<div class="scrubber"> <% if (status.attr('state') == 'play' || status.attr('state') == 'pause') { %>
<div class="time elapsed"><%= formatLength(status.attr('time')[0]) %></div> <div class="time elapsed"><%= formatLength(status.attr('time')[0]) %></div>
<div class="time total">-<%= formatLength(status.attr('time')[1] - status.attr('time')[0]) %></div> <div class="time total">-<%= formatLength(status.attr('time')[1] - status.attr('time')[0]) %></div>
<div class="track"> <% } else { %>
<div class="time elapsed">--:--</div>
<div class="time total">--:--</div>
<% } %>
<div class="track">
<% if (status.attr('state') == 'play' || status.attr('state') == 'pause') { %>
<div class="marker" style="left: <%= (status.attr('time')[0] / status.attr('time')[1]) * 100 %>%"></div> <div class="marker" style="left: <%= (status.attr('time')[0] / status.attr('time')[1]) * 100 %>%"></div>
</div> <% } %>
</div> </div>
<% } %> </div>
<nav class="controls"> <nav class="controls">
<button data-command="previous">previous</button> <button data-command="previous">previous</button>
<% if (status.attr('state') == 'play') { %> <% if (status.attr('state') == 'play') { %>

1
views/index.erb
View File

@ -10,6 +10,7 @@
<body> <body>
<div id="app"> <div id="app">
<div id="content"> <div id="content">
<div id="library"></div>
<div id="queue"></div> <div id="queue"></div>
</div> </div>
<div id="transport"></div> <div id="transport"></div>