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 -->
<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">
<!-- left stuff -->
<div class="col-sm-6 col-xs-12">
<!-- now playing -->
<div class="thumbnail shadow-1">
<img id="album-artwork" class="image-responsive album-art" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
<div class="caption">
@ -29,10 +30,8 @@
{% endif %}
</div>
</div>
</article>
<!-- right album stuff -->
<div class="col-sm-7 col-xs-12">
<!-- music player -->
<article id="music-player-card" class="card">
<audio id="music-player" controls>
<source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" />
@ -40,6 +39,7 @@
</audio>
</article>
<!-- available songs -->
<article class="card">
<ul class="now-playing-list">
{% for song in songs %}
@ -50,21 +50,23 @@
</ul>
</article>
</div>
</section>
<!-- available albums -->
<section class="row">
{% for album in albums %}
<!-- album details -->
<div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-sm-3 col-xs-6" data-albumid="{{ album.id }}">
<div class="thumbnail shadow-1">
<img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}">
<div class="caption">
<h5>{{ album.title }}</h5>
<!-- right stuff -->
<div class="col-sm-6 col-xs-12">
<div class="row">
{% for album in albums %}
<!-- album details -->
<div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-sm-3 col-xs-6" data-albumid="{{ album.id }}">
<div class="thumbnail shadow-1">
<img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}">
<div class="caption">
<h5>{{ album.title }}</h5>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</section>
{% endblock %}