Added music page back to beta site

This commit is contained in:
Gregory Ballantine 2016-11-18 12:49:21 -05:00
parent d251662c2e
commit 3eb6bc6340
3 changed files with 94 additions and 19 deletions

View File

@ -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';

71
app/views/music.twig Normal file
View File

@ -0,0 +1,71 @@
{% extends 'templates/default.php' %}
{% 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 %}

View File

@ -28,6 +28,9 @@
<li class="nav_item">
<a href="{{ urlFor('shows') }}">Shows</a>
</li>
<li class="nav_item">
<a href="{{ urlFor('music') }}">Music</a>
</li>
<li class="nav_item">
<a href="{{ urlFor('contact') }}">Contact</a>
</li>