Popularity component

src/scss/components/_lists.scss

@@ -57,7 +57,7 @@
 			color: $mid_grey;
 			position: absolute;
 			top: 16px;
-			right: 36px;
+			right: 40px;
 		}
 
 		:root .notouch:not(.dragging) &:not(.header):not(.no-click).hover {
@@ -95,7 +95,7 @@
 
 			.col {
 				&.name { 
-					width: 40%;
+					width: 38%;
 				}
 				&.artists,
 				&.album { 
@@ -104,6 +104,9 @@
 				&.duration {
 					width: 5%;
 				}
+				&.popularity {
+					width: 3%;
+				}
 			}
 
 			:root .dragging &.hover,

src/scss/components/_popularity.scss

@@ -0,0 +1,19 @@
+
+.popularity-diagram {
+	display: block;
+	margin: 0.15em -2px;
+	text-align: center;
+
+	.bar {
+		display: inline-block;
+		width: 2px;
+		height: 0.5em;
+		margin: 0.25em 1px;
+		background: $white;
+		opacity: 0.25;
+
+		&.filled {
+			opacity: 1;
+		}
+	}
+}