Two-col albums and playlists; Context menu trigger dots

src/js/components/ContextMenuTrigger.js

@@ -15,7 +15,9 @@ export default class ContextMenuTrigger extends React.Component{
 		}
 		return (
 			<span className={className} onClick={e => this.props.onTrigger(e)}>
-				<FontAwesome name="ellipsis-h" />
+				<span className="dot"></span>
+				<span className="dot"></span>
+				<span className="dot"></span>
 			</span>
 		);
 	}

src/js/views/Album.js

@@ -123,7 +123,9 @@ class Album extends React.Component{
 
 		        <SidebarToggleButton />
 
-				<Thumbnail size="large" canZoom images={ this.props.album.images } />
+				<div className="thumbnail-wrapper">
+					<Thumbnail size="large" canZoom images={ this.props.album.images } />
+				</div>
 
 				<div className="title">
 					<div className="source grey-text">

src/js/views/Playlist.js

@@ -163,7 +163,9 @@ class Playlist extends React.Component{
 				
 					<SidebarToggleButton />
 
-					<Thumbnail size="large" canZoom images={ this.props.playlist.images } />
+					<div className="thumbnail-wrapper">
+						<Thumbnail size="large" canZoom images={ this.props.playlist.images } />
+					</div>
 
 					<div className="title">
 						<div className="source grey-text">

src/scss/components/_context-menu.scss

@@ -262,15 +262,30 @@
 }
 
 .context-menu-trigger {
+	@include animate();
 	display: inline-block;
-	padding: 9px 10px 7px;
-	font-size: 18px;
+	padding: 14px 12px;
 	cursor: pointer;
 	vertical-align: top;
-	margin-left: 10px;
+	margin-top: -1px;
 	position: relative;
 	border-radius: 3px;
 
+	.dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 5px;
+		background: $black;
+		display: inline-block;
+		margin: 1px;
+	}
+
+	&.white {
+		.dot {
+			background: $white;
+		}
+	}
+
 	&:before {
 		@include animate();
 		content: '';

src/scss/components/_lists.scss

@@ -43,7 +43,7 @@
 		}
 
 		:root .notouch:not(.dragging) &:not(.header):not(.no-click):hover {
-			background: rgba(150,150,150,0.1);
+			background: lighten($yellow, 10%);
 			cursor: pointer;
 		}
 

src/scss/components/_sidebar.scss

@@ -74,7 +74,7 @@ aside{
 			@include animate();
 			@include feature_font();
 			font-weight: 800;
-			font-size: 16px;
+			font-size: 15px;
 			color: $black;
 			text-decoration: none;
 			display: block;
@@ -107,7 +107,7 @@ aside{
 		}
 
 		section {
-			padding: 15px 0;
+			padding-bottom: 20px;
 
 			title {
 				display: block;

src/scss/global/_forms.scss

@@ -76,7 +76,7 @@ input[type="submit"] {
 
 	&:hover{
 		cursor: pointer;
-		box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
+		box-shadow: 1px 2px 6px rgba(0,0,0,0.2);
 
 		&:before {
 			opacity: 0.15;
@@ -158,45 +158,6 @@ input[type="submit"] {
 		}
 	}
 
-	&.context-menu-trigger {
-		border-color: transparent;
-		padding: 6px;
-		margin-bottom: 8px;
-		font-size: 20px;
-		min-width: 0;
-		line-height: 20px;
-		color: #000000;
-		vertical-align: bottom;
-
-		.fa {
-			pointer-events: none;
-		}
-
-		&:hover {
-			border-color: transparent;
-			background: rgba(0,0,0,0.1);
-		}
-
-		&:active {
-			color: #FFFFFF;
-			background: #000000;
-		}
-
-		&.white {
-			color: #FFFFFF;
-
-			&:hover {
-				border-color: transparent;
-				background: rgba(255,255,255,0.1);
-			}
-
-			&:active {
-				color: #000000;
-				background: #FFFFFF;
-			}
-		}
-	}
-
 	&[disabled],
 	&[disabled="disabled"]{
 		opacity: 0.5;
@@ -230,14 +191,6 @@ input[type="submit"] {
 	}
 }
 
-.actions {
-
-	.button:last-of-type,
-	button:last-of-type {
-		margin-right: 0;
-	}
-}
-
 .field {
 	display: block;
 	padding-bottom: 8px;

src/scss/views/_album.scss

@@ -1,6 +1,7 @@
 
 main .album-view {
-	padding-left: 400px;
+	padding-left: 30%;
+	position: relative;
 
 	.title {
 		padding-bottom: 30px;
@@ -26,11 +27,17 @@ main .album-view {
 		padding-bottom: 5px;
 	}
 
-	.thumbnail {
+	.thumbnail-wrapper {
 		position: absolute;
-		max-width: 320px;
-		top: 40px;
-		left: 40px;
+		padding: 40px;
+		width: 30%;
+		top: 0;
+		left: 0;
+		box-sizing: border-box;
+
+		.thumbnail {
+			max-width: 100%;
+		}
 	}
 
 	@include responsive( $bp_medium ){

src/scss/views/_playlist.scss

@@ -1,6 +1,7 @@
 
 main .playlist-view {
-	padding-left: 400px;
+	padding-left: 30%;
+	position: relative;
 
 	.title {
 		padding-bottom: 30px;
@@ -26,11 +27,17 @@ main .playlist-view {
 		padding-bottom: 5px;
 	}
 
-	.thumbnail {
+	.thumbnail-wrapper {
 		position: absolute;
-		max-width: 320px;
-		top: 40px;
-		left: 40px;
+		padding: 40px;
+		width: 30%;
+		top: 0;
+		left: 0;
+		box-sizing: border-box;
+
+		.thumbnail {
+			max-width: 100%;
+		}
 	}
 
 	@include responsive( $bp_medium ){