Added a 'Now playing' identifier to currently playing track

This commit is contained in:
gballan1 2016-11-29 17:06:18 -05:00
parent a816144a8c
commit 64167ae208
5 changed files with 8 additions and 3 deletions

View File

@ -22,7 +22,7 @@
<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">
<h3 id="album-title">{{ albums[0].title }}</h3> <h3 id="album-title">Now playing: <span>{{ albums[0].title }}</span></h3>
<h5 id="album-release">Released on <span>{{ albums[0].releaseDate }}</span></h5> <h5 id="album-release">Released on <span>{{ albums[0].releaseDate }}</span></h5>
{% if albums[0].description %} {% if albums[0].description %}
<hr /> <hr />

View File

@ -23,7 +23,7 @@
<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">
<h3 id="album-title">{{ albums[0].title }}</h3> <h3 id="album-title">Now playing: <span>{{ albums[0].title }}</span></h3>
<h5 id="album-release">Released on <span>{{ albums[0].releaseDate }}</span></h5> <h5 id="album-release">Released on <span>{{ albums[0].releaseDate }}</span></h5>
{% if albums[0].description %} {% if albums[0].description %}
<hr /> <hr />

View File

@ -56,6 +56,9 @@
#track-title #track-title
+padding(null 10px null 10px) +padding(null 10px null 10px)
span
text-decoration: underline
.album-art .album-art
width: 100% width: 100%

View File

@ -676,6 +676,8 @@ body {
#track-title { #track-title {
padding-right: 10px; padding-right: 10px;
padding-left: 10px; } padding-left: 10px; }
#track-title span {
text-decoration: underline; }
.album-art { .album-art {
width: 100%; } width: 100%; }

View File

@ -50,7 +50,7 @@ function getAlbumInfo(albumElem) {
// change album artwork // change album artwork
$('#album-artwork').attr('src', json.album_art); $('#album-artwork').attr('src', json.album_art);
// change album title // change album title
$('#album-title').text(json.title); $('#album-title span').text(json.title);
// change album release date // change album release date
$('#album-release span').text(formatReleaseDate(json.release_date)); $('#album-release span').text(formatReleaseDate(json.release_date));
// change album description // change album description