Added routes and views for both music player designs
This commit is contained in:
parent
6af63f4bdb
commit
969c1a850a
@ -1,6 +1,7 @@
|
||||
<?php
|
||||
|
||||
$app->get('/music', function() use($app) {
|
||||
// music design #1
|
||||
$app->get('/music1', function() use($app) {
|
||||
|
||||
$albums = $app->album->all()->sortByDesc('release_date')->values()->all();
|
||||
$songs = $albums[0]->songs;
|
||||
@ -10,4 +11,17 @@ $app->get('/music', function() use($app) {
|
||||
'songs' => $songs,
|
||||
]);
|
||||
|
||||
})->name('music');
|
||||
})->name('music1');
|
||||
|
||||
# music design #2
|
||||
$app->get('/music2', function() use($app) {
|
||||
|
||||
$albums = $app->album->all()->sortByDesc('release_date')->values()->all();
|
||||
$songs = $albums[0]->songs;
|
||||
|
||||
$app->render('music.twig', [
|
||||
'albums' => $albums,
|
||||
'songs' => $songs,
|
||||
]);
|
||||
|
||||
})->name('music2');
|
||||
|
@ -5,7 +5,7 @@
|
||||
<script type="text/javascript" src="/js/music.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block title %}Music{% endblock %}
|
||||
{% block title %}Music Design #1{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
71
app/views/music2.twig
Normal file
71
app/views/music2.twig
Normal file
@ -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 Design #2{% 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 %}
|
@ -29,7 +29,10 @@
|
||||
<a href="{{ urlFor('shows') }}">Shows</a>
|
||||
</li>
|
||||
<li class="nav_item">
|
||||
<a href="{{ urlFor('music') }}">Music</a>
|
||||
<a href="{{ urlFor('music1') }}">Music #1</a>
|
||||
</li>
|
||||
<li class="nav_item">
|
||||
<a href="{{ urlFor('music2') }}">Music #2</a>
|
||||
</li>
|
||||
<li class="nav_item">
|
||||
<a href="{{ urlFor('contact') }}">Contact</a>
|
||||
|
Loading…
Reference in New Issue
Block a user