add browse functionality

This commit is contained in:
Andrew Karpow
2013-11-07 10:09:40 +01:00
parent bc39214dc4
commit 931e975d4e
7 changed files with 278 additions and 82 deletions
+16 -15
View File
@@ -14,7 +14,7 @@
<!-- Custom styles for this template -->
<link href="css/slider.css" rel="stylesheet">
<link href="css/starter-template.css" rel="stylesheet">
<link href="css/mpd.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
@@ -36,10 +36,10 @@
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Playlist</a></li>
<li><a href="#about">Browse</a></li>
<li><a href="#contact">About</a></li>
<ul id="nav_links" class="nav navbar-nav">
<li><a href="#">Playlist</a></li>
<li><a href="#browse">Browse database</a></li>
<li><a href="#about">About</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
@@ -64,11 +64,11 @@
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-toolbar btn-default">
<div class="btn btn-toolbar btn-default">
<span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
&nbsp;&nbsp;
<input type="text" class="span2" value="0" data-slider-min="0" data-slider-max="100" data-slider-step="5" id="volumeslider" data-slider-tooltip="hide">
</button>
</div>
</div>
</div>
</div><!--/.nav-collapse -->
@@ -80,12 +80,13 @@
<div class="col-md-10">
<div id="alert" class="alert hide"></div>
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Playlist</div>
<div id="panel-heading" class="panel-heading">Playlist</div>
<div class="panel-body">
<h2><span id="track-icon" class="glyphicon glyphicon-play"></span> Playing track xyz</h2>
<p class="text pull-right">&nbsp;&nbsp;2:13/4:12</p>
<h1><span id="track-icon" class="glyphicon glyphicon-play"></span><span id="currenttrack"></span></h1>
<p id="counter" class="text pull-right">&nbsp;&nbsp;</p>
<div class="progress progress-striped active">
<div id="progressbar" class="progress-bar navbar-left" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
@@ -94,7 +95,7 @@
</div>
<!-- Table -->
<table id="salamisandwich" class="table">
<table id="salamisandwich" class="table table-hover">
<thead>
<tr>
<th>#</th>
@@ -111,16 +112,16 @@
<div class="col-md-2" >
<div data-spy="affix">
<div class="btn-group-vertical btn-block btn-group-lg" data-toggle="buttons">
<button id="btnrandom" type="button" class="btn btn-default" onclick="toggleButton(this.id)">
<button id="btnrandom" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-random"></span> Random
</button>
<button id="btnconsume" type="button" class="btn btn-default" onclick="toggleButton(this.id)">
<button id="btnconsume" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-fire"></span> Consume
</button>
<button id="btnsingle" type="button" class="btn btn-default" onclick="toggleButton(this.id)">
<button id="btnsingle" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star"></span> Single
</button>
<button id="btnrepeat" type="button" class="btn btn-default" onclick="toggleButton(this.id)">
<button id="btnrepeat" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-repeat"></span> Repeat
</button>
</div>