From 013f259fa4e003c736572521b4da137b0c9e3ae5 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Tue, 7 Feb 2017 21:37:53 +1300
Subject: [PATCH] Responsive new layout; Fixing search on mobile

---
 src/scss/components/_grid.scss | 22 ++++++++++-
 src/scss/global/_core.scss     | 14 ++++++-
 src/scss/global/_forms.scss    | 12 ++----
 src/scss/views/_album.scss     | 26 +++++++++++-
 src/scss/views/_artist.scss    | 72 +++++-----------------------------
 src/scss/views/_playlist.scss  | 21 ++++++++++
 src/scss/views/_search.scss    | 13 ++++++
 7 files changed, 106 insertions(+), 74 deletions(-)

diff --git a/src/scss/components/_grid.scss b/src/scss/components/_grid.scss
index 6b65b4e3..65232aad 100755
--- a/src/scss/components/_grid.scss
+++ b/src/scss/components/_grid.scss
@@ -107,7 +107,7 @@
 		}
 	}
 
-	@include responsive( 1199px, 850px ){
+	@include responsive( 1199px, 800px ){
 		&.mini {
 			.grid-item {
 				@include grid_item( 2 )
@@ -120,11 +120,29 @@
 		}
 	}
 
-	@include responsive( 849px ){
+	@include responsive( 799px, 500px ){
+		&.mini{
+			.grid-item {
+				@include grid_item( 6 )
+			}	
+		}
 		&:not(.mini){
 			.grid-item {
 				@include grid_item( 3 )
 			}	
 		}
 	}
+
+	@include responsive( 499px ){
+		&.mini{
+			.grid-item {
+				@include grid_item( 3 )
+			}	
+		}
+		&:not(.mini){
+			.grid-item {
+				@include grid_item( 2 )
+			}	
+		}
+	}
 }
\ No newline at end of file
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 0c096288..742dceae 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -187,7 +187,7 @@ footer {
 
 		&:not(:first-child){
 			padding-left: 14px;
-			
+
 			&::before {
 				display: inline-block;
 				content: '•';
@@ -218,4 +218,16 @@ footer {
 	.right-padding {		padding-right: 20px; }
 	.left-padding {			padding-left: 20px; }
 
+	h1 {
+		font-size: 30px;
+	}
+
+	h2 {
+		font-size: 24px;
+	}
+
+	h3 {
+		font-size: 18px;
+	}
+
 }
\ No newline at end of file
diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss
index 0a1171de..eb9af659 100755
--- a/src/scss/global/_forms.scss
+++ b/src/scss/global/_forms.scss
@@ -46,20 +46,16 @@ input[type="submit"] {
 		background: darken( $light_grey, 6%);
 	}
 
-	&.large {
-		padding: 16px 24px;
-
-		@include responsive( $bp_medium ){
-			padding: 10px 20px;
-		}
-	}
-
 	&.rounded {
 		margin-right: 20px;
 		padding: 10px 20px;
 		text-align: center;
 		min-width: 140px;
 		border-radius: 20px;
+
+		@include responsive( $bp_medium ){
+			min-width: none;
+		}
 	}
 
 	&.outline {
diff --git a/src/scss/views/_album.scss b/src/scss/views/_album.scss
index 7e07cfad..85cb2dcc 100755
--- a/src/scss/views/_album.scss
+++ b/src/scss/views/_album.scss
@@ -1,6 +1,5 @@
 
 .album-view {
-
 	.title {
 		padding: 30px 40px;
 
@@ -21,9 +20,34 @@
 		@include clearfix();
 	}
 
+	.description {
+		padding-bottom: 5px;
+	}
+
 	.thumbnail {
 		float: left;
 		max-width: 230px;
 		margin: 0 30px 30px 0;
 	}
+
+	@include responsive( $bp_medium ){
+		.title {
+			padding: 20px 20px;
+		}
+
+		.thumbnail {
+			float: none;
+			max-width: none;
+			margin: 0 0 0 0;
+
+			.image {
+				padding-bottom: 70%;
+			}
+		}
+
+		.actions {
+			text-align: center;
+			padding-bottom: 20px;
+		}
+	}
 }
diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss
index 63e4cb15..6cb835f7 100755
--- a/src/scss/views/_artist.scss
+++ b/src/scss/views/_artist.scss
@@ -35,11 +35,12 @@
 
 			.sub-views {
 				color: #FFFFFF;
+				margin-left: -12px;
 
 				.option {
 					display: inline-block;
 					padding: 8px 0;
-					margin: 0 25px 0 0;
+					margin: 0 12px 0;
 					font-size: 18px;
 					font-weight: 400;
 					border-bottom: 4px solid transparent;
@@ -64,73 +65,20 @@
 
 	@include responsive( $bp_medium ){
 		.intro {
-			padding: 50px 30px 60px 30px;
+			.liner {
+				text-align: center;
+				padding-left: 20px;
+				padding-right: 20px;
 
-			.parallax {
-				height: 100%;
-				background: $darkest_grey;
-				canvas {
-					opacity: 0.2;
-					@include blur( 5px );
-				}
-			}
+				.sub-views {
+					margin-left: 0;
 
-			.thumbnail {
-				position: relative;
-				width: 180px;
-				margin: 0 auto 10px;
-				left: auto;
-				bottom: auto;
-			}
-
-			.heading-wrapper {
-				height: auto;
-				position: static;
-
-				.heading {
-					position: static;
-					bottom: auto;
-					left: auto;
-
-					h1 {
-						position: relative;
-						text-align: center;
-						padding: 15px 0;
+					.option {
+						margin: 0 8px;
 					}
-
-					.sub-views {
-						position: absolute;
-						bottom: 0;
-						left: 20px;
-						right: 20px;
-					}
-				}
-			}
-
-			.details-wrapper {
-				padding: 0;
-				position: relative;
-				left: 0;
-				right: 0;
-				padding: 20px 0;
-				z-index: 3;
-
-				.actions {
-					text-align: center;
-					margin: 0;
-					float: none;
-
-					button {
-						margin: 0 3px;
-					}
-				}
-
-				.details {
-					display: none;
 				}
 			}
 		}
-
 		.body {
 			&.overview {
 				.col.w70 {
diff --git a/src/scss/views/_playlist.scss b/src/scss/views/_playlist.scss
index e88fdd44..9477e0de 100755
--- a/src/scss/views/_playlist.scss
+++ b/src/scss/views/_playlist.scss
@@ -30,4 +30,25 @@
 		max-width: 230px;
 		margin: 0 30px 30px 0;
 	}
+
+	@include responsive( $bp_medium ){
+		.title {
+			padding: 20px 20px;
+		}
+
+		.thumbnail {
+			float: none;
+			max-width: none;
+			margin: 0 0 0 0;
+
+			.image {
+				padding-bottom: 70%;
+			}
+		}
+
+		.actions {
+			text-align: center;
+			padding-bottom: 20px;
+		}
+	}
 }
diff --git a/src/scss/views/_search.scss b/src/scss/views/_search.scss
index 0648d013..a82fa9e4 100755
--- a/src/scss/views/_search.scss
+++ b/src/scss/views/_search.scss
@@ -1,7 +1,9 @@
 
 .search-view {
+
 	.search-result-sections {
 		padding: 20px 20px 0;
+
 		section {
 			width: 33.3334%;
 			float: left;
@@ -11,4 +13,15 @@
 			}
 		}
 	}
+
+	@include responsive( $bp_medium ){
+		.search-result-sections {
+			padding: 20px 20px 0;
+			
+			section {
+				width: auto;
+				float: none;
+			}
+		}
+	}
 }
\ No newline at end of file