HalfTone/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reorganized music player design #2

Browse Source
This commit is contained in:
gballan1 2016-11-29 11:34:38 -05:00
parent ed8d98ba16
commit 1901ac7320
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/views/pages/music2.twig
View File

@ -17,8 +17,9 @@
<!-- no javascript warning --> <!-- no javascript warning -->
<noscript class="card">Woah there, lassy! You will need to enable Javascript to use this page!</noscript> <noscript class="card">Woah there, lassy! You will need to enable Javascript to use this page!</noscript>
<!-- left album stuff --> <!-- left stuff -->
<article class="col-sm-5 col-xs-12"> <div class="col-sm-6 col-xs-12">
<!-- now playing -->
<div class="thumbnail shadow-1"> <div class="thumbnail shadow-1">
<img id="album-artwork" class="image-responsive album-art" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}"> <img id="album-artwork" class="image-responsive album-art" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
<div class="caption"> <div class="caption">
@ -29,10 +30,8 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
</article>
<!-- right album stuff --> <!-- music player -->
<div class="col-sm-7 col-xs-12">
<article id="music-player-card" class="card"> <article id="music-player-card" class="card">
<audio id="music-player" controls> <audio id="music-player" controls>
<source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" /> <source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" />
@ -40,6 +39,7 @@
</audio> </audio>
</article> </article>
<!-- available songs -->
<article class="card"> <article class="card">
<ul class="now-playing-list"> <ul class="now-playing-list">
{% for song in songs %} {% for song in songs %}
@ -50,21 +50,23 @@
</ul> </ul>
</article> </article>
</div> </div>
</section>
<!-- available albums --> <!-- right stuff -->
<section class="row"> <div class="col-sm-6 col-xs-12">
{% for album in albums %} <div class="row">
<!-- album details --> {% for album in albums %}
<div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-sm-3 col-xs-6" data-albumid="{{ album.id }}"> <!-- album details -->
<div class="thumbnail shadow-1"> <div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-sm-3 col-xs-6" data-albumid="{{ album.id }}">
<img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}"> <div class="thumbnail shadow-1">
<div class="caption"> <img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}">
<h5>{{ album.title }}</h5> <div class="caption">
<h5>{{ album.title }}</h5>
</div>
</div>
</div> </div>
</div> {% endfor %}
</div> </div>
{% endfor %} </div>
</section> </section>
{% endblock %} {% endblock %}