From faa0ed3464663bb2182c1bf141a432239acb9247 Mon Sep 17 00:00:00 2001
From: gballan1 <brotherballantine@gmail.com>
Date: Mon, 28 Nov 2016 20:09:37 -0500
Subject: [PATCH] Added album selection frontend stuff

---
 app/views/pages/music1.twig   |  2 +-
 assets/sass/pages/_music.sass | 16 ++++++++++++++++
 public/css/main.css           | 14 ++++++++++++++
 public/js/music.js            | 13 +++++++++++++
 4 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/app/views/pages/music1.twig b/app/views/pages/music1.twig
index 8e4083a..76d111c 100644
--- a/app/views/pages/music1.twig
+++ b/app/views/pages/music1.twig
@@ -56,7 +56,7 @@
   <section class="row">
     {% for album in albums %}
       <!-- 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">
           <img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}">
           <div class="caption">
diff --git a/assets/sass/pages/_music.sass b/assets/sass/pages/_music.sass
index 9dabee4..0ce62bc 100755
--- a/assets/sass/pages/_music.sass
+++ b/assets/sass/pages/_music.sass
@@ -61,3 +61,19 @@
 
 .album-art
   width: 100%
+
+.music-album
+  +transition(background, 200ms)
+
+  &:hover
+    background: #f0f0f0
+    cursor: pointer
+
+    a
+      color: $main-color
+
+  &.selected
+    background: #e0e0e0
+
+    a
+      color: $main-color
diff --git a/public/css/main.css b/public/css/main.css
index bff0703..ea05ff3 100755
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -680,6 +680,20 @@ body {
 .album-art {
   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 {
   margin-top: -20px;
   margin-bottom: 20px;
diff --git a/public/js/music.js b/public/js/music.js
index 0d6eceb..e8d99e1 100755
--- a/public/js/music.js
+++ b/public/js/music.js
@@ -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) {
   var oldSelected = $('.now-playing-list .music-track.selected');
   var newSelected = $(trackElem);