From ad474019f1ad20b07a7d6bc15c27de3052b474f9 Mon Sep 17 00:00:00 2001
From: bklaing2 <bklaing2@gmail.com>
Date: Fri, 1 Jul 2022 15:45:55 -0700
Subject: [PATCH] Fixes #6: Cleaned up how playlists are displayed

---
 app/static/css/styles.css  | 56 +++++++++++++++++++++++++++++++-------
 app/static/js/playlists.js |  2 +-
 app/templates/index.html   |  2 +-
 3 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/app/static/css/styles.css b/app/static/css/styles.css
index c39f2a5..e6c1819 100644
--- a/app/static/css/styles.css
+++ b/app/static/css/styles.css
@@ -57,7 +57,7 @@
 
 body {
   width: 100%;
-  max-width: 750px;
+  max-width: 1024px;
   min-height: 100%;
 
   display: grid;
@@ -364,27 +364,28 @@ input[type="checkbox"]:checked+.button {
 [invisible] { visibility: hidden; }
 
 
-.playlist {
-  width: 100%;
-  height: 15rem;
 
-  min-width: 200px;
-  max-width: 300px;
 
-  margin: 20px;
+#my-playlists {
+  columns: 1;
+  column-gap: 2rem;
+}
 
-  border: none;
+.playlist_container {
+  width: min-content;
+  margin: 0 0 2rem 0;
   border-radius: var(--border-radius);
+  overflow: hidden;
 }
 
-.playlist.loading {
+.playlist_container.loading {
   width: 2rem;
   height: 2rem;
 
   min-width: unset;
   max-width: unset;
 
-  margin: 30px;
+  /* margin: 30px; */
 
   border: 10px solid var(--secondary-color);
   border-top: 10px solid var(--spotify-green);
@@ -393,6 +394,19 @@ input[type="checkbox"]:checked+.button {
   animation: spin 2s linear infinite;
 }
 
+.playlist {
+  width: 15rem;
+  height: 20rem;
+
+  /* min-width: 200px;
+  max-width: 300px; */
+
+  /* margin: 20px; */
+
+  border: none;
+  /* border-radius: var(--border-radius); */
+}
+
 
 
 
@@ -414,4 +428,26 @@ input[type="checkbox"]:checked+.button {
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
+}
+
+
+
+
+
+
+
+
+/* Small only */
+/* @media screen and (max-width: 40rem) {
+  #my-playlists { columns: 1; }
+} */
+
+/* Medium and up */
+@media screen and (min-width: 43rem) {
+  #my-playlists { columns: 2; }
+}
+
+/* Large and up */
+@media screen and (min-width: 64rem) {
+  #my-playlists { columns: 3; }
 }
\ No newline at end of file
diff --git a/app/static/js/playlists.js b/app/static/js/playlists.js
index 054cdd2..e2bdf49 100644
--- a/app/static/js/playlists.js
+++ b/app/static/js/playlists.js
@@ -32,7 +32,7 @@ function getPlaylists() {
       if (parent_element === null) {
         parent_element = document.createElement('div')
         parent_element.id = playlist.id
-        parent_element.classList.add('playlist')
+        parent_element.classList.add('playlist_container')
         parent_element.classList.add('loading')
 
         PLAYLISTS_CONTAINER.appendChild(parent_element)
diff --git a/app/templates/index.html b/app/templates/index.html
index 46c8529..f567a3b 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -9,7 +9,7 @@ <h2 style="color: var(--primary-color);">My Playlists</h2>
       <button class="add-button" onclick="showOverlay()">+</button>
     </div>
 
-    <div id="my-playlists" class="row"></div>
+    <div id="my-playlists"></div>
 
   </main>