- playing around with the spotify API

Author: TobiasMue91

tools/spotify_test.html

@@ -27,11 +27,11 @@
             background: white;
             padding: 10px;
             margin: 10px;
-            page-break-inside: avoid;
         }
 
         .page {
-            page-break-after: always;
+            page-break-after: always !important;
+            page-break-before: always !important;
         }
 
         .card-container {
@@ -70,10 +70,7 @@
         }
 
         #printArea {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 20px;
-            padding: 20px;
+            display: block;
         }
 
         .hidden {
@@ -228,28 +225,32 @@ <h3 class="title">${track.name}</h3>
             const printArea = document.getElementById('printArea');
             printArea.innerHTML = '';
 
-            // First page with QR codes
+            // Create wrapper divs
             const qrPage = document.createElement('div');
             qrPage.className = 'page';
             const qrContainer = document.createElement('div');
             qrContainer.className = 'card-container';
-            qrPage.appendChild(qrContainer);
 
-            tracks.slice(0, 21).forEach(track => {
+            // Create QR codes page
+            const selectedTracks = tracks.slice(0, 21);
+            selectedTracks.forEach(track => {
                 qrContainer.appendChild(createQRCard(track, true));
             });
+
+            qrPage.appendChild(qrContainer);
             printArea.appendChild(qrPage);
 
-            // Second page with metadata
+            // Create metadata page
             const metadataPage = document.createElement('div');
             metadataPage.className = 'page';
             const metadataContainer = document.createElement('div');
             metadataContainer.className = 'card-container';
-            metadataPage.appendChild(metadataContainer);
 
-            tracks.slice(0, 21).forEach(track => {
+            selectedTracks.forEach(track => {
                 metadataContainer.appendChild(createQRCard(track, false));
             });
+
+            metadataPage.appendChild(metadataContainer);
             printArea.appendChild(metadataPage);
 
             setTimeout(() => {