Fixes #6: Cleaned up how playlists are displayed

bklaing2 · Jul 1, 2022 · ad47401 · ad47401
1 parent afc435c
commit ad47401
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git 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; }
 }
diff --git 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
@@ -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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@