Merge branch 'development' of Halftone/halftone into master

app/routes.php

@@ -5,4 +5,5 @@ require 'routes/index.php';
 require 'routes/about.php';
 require 'routes/contact.php';
 require 'routes/home.php';
+require 'routes/music.php';
 require 'routes/shows.php';

app/start.php

@@ -27,7 +27,7 @@ require INC_ROOT . '/vendor/autoload.php';
 
 // Time to create our app
 $app = new Slim([
-	'mode' => file_get_contents(INC_ROOT . '/mode.php'),
+	'mode' => trim(file_get_contents(INC_ROOT . '/mode.php')),
 	'view' => new Twig(),
 	'templates.path' => INC_ROOT . '/app/views'
 ]);

app/views/music.twig

@@ -0,0 +1,71 @@
+{% extends 'templates/default.twig' %}
+
+{% block javascripts %}
+  <script type="text/javascript" src="/js/modules/music-player.js"></script>
+  <script type="text/javascript" src="/js/music.js"></script>
+{% endblock %}
+
+{% block title %}Music{% endblock %}
+
+{% block content %}
+
+  <header id="music-header" class="row">
+    <h1>Music</h1>
+  </header>
+
+  <!-- music player -->
+  <section class="row">
+    <!-- no javascript warning -->
+    <noscript class="card">Woah there, lassy! You will need to enable Javascript to use this page!</noscript>
+
+    <!-- left album stuff -->
+    <article class="col-sm-5 col-xs-12">
+      <div class="thumbnail shadow-1">
+        <img class="image-responsive" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
+        <div class="caption">
+          <h3>{{ albums[0].title }}</h3>
+          {% if albums[0].description %}
+            <hr />
+            <p>{{ albums[0].description }}</p>
+          {% endif %}
+        </div>
+      </div>
+    </article>
+
+    <!-- right album stuff -->
+    <div class="col-sm-7 col-xs-12">
+      <article id="music-player-card" class="card">
+        <audio id="music-player" controls>
+          <source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" />
+          <source src="{{ songs[0].audio_file }}.mp3" type="audio/mpeg" />
+        </audio>
+      </article>
+
+      <article class="card">
+        <ul class="now-playing-list">
+          {% for song in songs %}
+            <li class="music-track" data-title="{{ song.title }}" data-album="{{ song.album_id }}" data-order="{{ song.track_order }}" data-path="{{ song.audio_file }}">
+              <span>{{ song.track_order }}. {{ song.title }}</span>
+            </li>
+          {% endfor %}
+        </ul>
+      </article>
+    </div>
+  </section>
+
+  <!-- available albums -->
+  <section class="row">
+    {% for album in albums %}
+      <!-- album details -->
+      <div class="music-album col-sm-3 col-xs-6">
+        <div class="thumbnail shadow-1">
+          <img src="{{ album.album_art }}" alt="{{ album.title }}">
+          <div class="caption">
+            <h5>{{ album.title }}</h5>
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </section>
+
+{% endblock %}

app/views/templates/partials/header.twig

@@ -12,26 +12,29 @@
   <div class="container-fluid">
     <div class="navbar-header">
       <button id="navbar-collapse-button" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
-  	    <span class="sr-only">Toggle navigation</span>
+        <span class="sr-only">Toggle navigation</span>
-  	    <i class="fa fa-bars" aria-hidden="true"></i>
+        <i class="fa fa-bars" aria-hidden="true"></i>
-  	  </button>
+      </button>
     </div>
 
-	  <div class="collapse navbar-collapse" id="navbar-collapse">
+    <div class="collapse navbar-collapse" id="navbar-collapse">
-	    <ul class="nav navbar-nav">
+      <ul class="nav navbar-nav">
-	      <li class="nav_item">
+        <li class="nav_item">
-	        <a href="{{ urlFor('home') }}">Home</a>
+          <a href="{{ urlFor('home') }}">Home</a>
-	      </li>
+        </li>
-	      <li class="nav_item">
+        <li class="nav_item">
-	        <a href="{{ urlFor('about') }}">About</a>
+          <a href="{{ urlFor('about') }}">About</a>
-	      </li>
+        </li>
-	      <li class="nav_item">
+        <li class="nav_item">
-	        <a href="{{ urlFor('shows') }}">Shows</a>
+          <a href="{{ urlFor('shows') }}">Shows</a>
-	      </li>
+        </li>
-	      <li class="nav_item">
+        <li class="nav_item">
-	        <a href="{{ urlFor('contact') }}">Contact</a>
+          <a href="{{ urlFor('music') }}">Music</a>
-	      </li>
+        </li>
-	    </ul>
+        <li class="nav_item">
-	  </div>
+          <a href="{{ urlFor('contact') }}">Contact</a>
+        </li>
+      </ul>
+    </div>
   </div>
 </nav>