Added album selection frontend stuff

This commit is contained in:
gballan1 2016-11-28 20:09:37 -05:00
parent 363ed2923a
commit faa0ed3464
4 changed files with 44 additions and 1 deletions

View File

@ -56,7 +56,7 @@
<section class="row"> <section class="row">
{% for album in albums %} {% for album in albums %}
<!-- album details --> <!-- album details -->
<div class="music-album 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 }}">
<div class="thumbnail shadow-1"> <div class="thumbnail shadow-1">
<img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}"> <img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}">
<div class="caption"> <div class="caption">

View File

@ -61,3 +61,19 @@
.album-art .album-art
width: 100% width: 100%
.music-album
+transition(background, 200ms)
&:hover
background: #f0f0f0
cursor: pointer
a
color: $main-color
&.selected
background: #e0e0e0
a
color: $main-color

View File

@ -680,6 +680,20 @@ body {
.album-art { .album-art {
width: 100%; } width: 100%; }
.music-album {
-webkit-transition: background, 200ms;
-moz-transition: background, 200ms;
transition: background, 200ms; }
.music-album:hover {
background: #f0f0f0;
cursor: pointer; }
.music-album:hover a {
color: #e51400; }
.music-album.selected {
background: #e0e0e0; }
.music-album.selected a {
color: #e51400; }
.shows-header { .shows-header {
margin-top: -20px; margin-top: -20px;
margin-bottom: 20px; margin-bottom: 20px;

View File

@ -9,6 +9,19 @@ $(document).ready(function() {
}); });
}); });
function changeSelectedAlbum(albumElem) {
var oldSelected = $('.music-album.selected');
var newSelected = $(albumElem);
if (oldSelected.data('albumid') != newSelected.data('albumid')) {
// remove selected class from the old element and add it to the new one
oldSelected.removeClass('selected');
newSelected.addClass('selected');
// change available songs
}
}
function changeSelectedTrack(trackElem) { function changeSelectedTrack(trackElem) {
var oldSelected = $('.now-playing-list .music-track.selected'); var oldSelected = $('.now-playing-list .music-track.selected');
var newSelected = $(trackElem); var newSelected = $(trackElem);