Merge pull request #43 from kyan/tracklist_size

Update tracklist size for played items
kyan · Feb 6, 2018 · b9b3f5a · b9b3f5a
2 parents 56e0ca5 + e268c4f
commit b9b3f5a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/frontend/src/components/tracklist/__snapshots__/index.spec.js.snap b/frontend/src/components/tracklist/__snapshots__/index.spec.js.snap
@@ -17,7 +17,9 @@ exports[`Tracklist render renders the as expected 1`] = `
         ui={true}
       />
     </span>
-    <ListContent>
+    <ListContent
+      className=""
+    >
       <ListHeader
         as="h3"
       >
@@ -67,7 +69,9 @@ exports[`Tracklist render renders the as expected 1`] = `
         </RevealContent>
       </Reveal>
     </a>
-    <ListContent>
+    <ListContent
+      className=""
+    >
       <ListHeader
         as="h5"
       >

diff --git a/frontend/src/components/tracklist/index.css b/frontend/src/components/tracklist/index.css
@@ -1,4 +1,12 @@
 .current-track {
-  border-left: 4px solid #21ba45;
-  padding-left: 3px;
+  padding-left: 5px;
+}
+
+.track-info {
+  font-size: 80%;
+}
+
+.ui.list>.item .track-info .header {
+  font-size: 1.2em;
+  margin-bottom: 0.2em;
 }
diff --git a/frontend/src/components/tracklist/index.js b/frontend/src/components/tracklist/index.js
@@ -68,6 +68,16 @@ const trackStartTime = (time, isCurrent) => {
   return <List.Header as='h5'>{dateformat(new Date(time), 'h:MM')}</List.Header>
 }
 
+const trackHeading = (track) => (
+  <List.Header as='h3'>{track.name}</List.Header>
+)
+
+const trackDescription = (track) => (
+  <List.Description>
+    {track.artist.name} <small>({millisToMinutesAndSeconds(track.length)})</small>
+  </List.Description>
+)
+
 const listItems = (tracks, images, currentTrack, onRemoveTrack) => {
   let time
 
@@ -81,10 +91,12 @@ const listItems = (tracks, images, currentTrack, onRemoveTrack) => {
         key={`${index}-${track.uri}`}
       >
         {imageChooser(track, images, isCurrent, onRemoveTrack)}
-        <List.Content>
+        <List.Content
+          className={classnames({'track-info': !time})}
+        >
           {trackStartTime(time, isCurrent)}
-          <List.Header as='h3'>{track.name}</List.Header>
-          <List.Description>{track.artist.name} <small>({millisToMinutesAndSeconds(track.length)})</small></List.Description>
+          {trackHeading(track)}
+          {trackDescription(track)}
         </List.Content>
       </List.Item>
     )