Nicer home grids

johanbrook · Jun 3, 2024 · e87287b · e87287b
1 parent 53de0db
commit e87287b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/src/_includes/css/home.css b/src/_includes/css/home.css
@@ -24,7 +24,7 @@
     .item-grid {
         li {
             display: grid;
-            grid-template-columns: 1fr 0.75fr 70px;
+            grid-template-columns: 40% 0.75fr minmax(70px, 0.3fr);
             column-gap: 0.5rlh;
 
              > * {
@@ -34,4 +34,11 @@
              }
         }
     }
+
+    /* TODO Why no nesting? */
+    .item-grid--equal {
+        li {
+            grid-template-columns: 40% 0.75fr 0.75fr;
+        }
+    }
 }
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
@@ -91,23 +91,27 @@ home: true
             <h1>Listening</h1>
             <p class="font-sans f5 fw4 mb0 muted" id="music-loading">Tracks I've listened to recently.</p>
     	</header>
-    	<ol role="list" id="music-target" class="TracksList">
+    	<ol role="list" id="music-target" class="item-grid item-grid--equal">
 
     	</ol>
     </section>
 </main>
 
 <template id="music-tmpl">
-	<li class="mb2 leading-tight">
-		<span class="music-title block fw6"></span>
-		<small class="font-sans f6">
-			<span class="music-subtitle muted"></span>
-		</small>
+	<li class="mb1">
+		<span class="music-title fw5"></span>
+		<span class="music-artist"></span>
+		<span class="music-album"></span>
 	</li>
 </template>
 
 <script type="module">
 	const ENDPOINT = 'https://brookie.pages.dev';
+	
+	const clean = (str) => {
+	   const idx = str.search(/[-\(]/g);
+	   return str.slice(0, idx).trim();
+	}
 
 	const render = (target, tracks) => {
 		const tmpl = document.getElementById('music-tmpl');
@@ -117,10 +121,14 @@ home: true
 			const clone = tmpl.content.cloneNode(true);
 			const container = clone.querySelector('li')
 			const title = clone.querySelector('.music-title')
-			const subtitle = clone.querySelector('.music-subtitle');
-
-			title.textContent = track.name;
-			subtitle.textContent = `${track.artist['#text']} — ${track.album['#text']}`;
+			const artist = clone.querySelector('.music-artist');
+			const album = clone.querySelector('.music-album');
+
+			title.textContent = clean(track.name);
+			title.title = track.name;
+			artist.textContent = track.artist['#text'];
+			album.textContent = clean(track.album['#text']);
+			album.title = track.album['#text'];
 
 			if (track['@attr']?.nowplaying == 'true') {
 				title.classList.add('fw7');