From 1901ac73208fce4c0c0f38379b319fb3ecb3f378 Mon Sep 17 00:00:00 2001
From: gballan1 <brotherballantine@gmail.com>
Date: Tue, 29 Nov 2016 11:34:38 -0500
Subject: [PATCH] Reorganized music player design #2

---
 app/views/pages/music2.twig | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/app/views/pages/music2.twig b/app/views/pages/music2.twig
index 7a38731..a6659a3 100644
--- a/app/views/pages/music2.twig
+++ b/app/views/pages/music2.twig
@@ -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 %}