Reorganized music player design #2
This commit is contained in:
parent
ed8d98ba16
commit
1901ac7320
@ -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,10 +50,10 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- available albums -->
|
<!-- right stuff -->
|
||||||
<section class="row">
|
<div class="col-sm-6 col-xs-12">
|
||||||
|
<div class="row">
|
||||||
{% for album in albums %}
|
{% for album in albums %}
|
||||||
<!-- album details -->
|
<!-- album details -->
|
||||||
<div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-sm-3 col-xs-6" data-albumid="{{ album.id }}">
|
<div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-sm-3 col-xs-6" data-albumid="{{ album.id }}">
|
||||||
@ -65,6 +65,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
Loading…
Reference in New Issue
Block a user