From 656589f71f547622d981d5c4cf28d6a833c2687c Mon Sep 17 00:00:00 2001
From: psychobunny <rodrigues.andrew@gmail.com>
Date: Wed, 19 Aug 2015 15:43:19 -0400
Subject: [PATCH] acp skins first pass

---
 public/less/admin/appearance/themes.less | 14 +++++++++++-
 src/views/admin/appearance/skins.tpl     | 29 ++++++++----------------
 src/views/admin/partials/theme_list.tpl  |  2 +-
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/public/less/admin/appearance/themes.less b/public/less/admin/appearance/themes.less
index 8766832626..f121f2a766 100644
--- a/public/less/admin/appearance/themes.less
+++ b/public/less/admin/appearance/themes.less
@@ -28,9 +28,21 @@
 		}
 	}
 
+	[data-type="bootswatch"] {
+		.mdl-card__title {
+			height: 195px;
+		}
+
+		.mdl-card__title-text {
+			display: none;
+		}
+	}
 	.theme-card {
+		margin-bottom: 30px;
+
 		.mdl-card__title {
-			height: 250px;
+			height: 223px;
+			background-size: contain;
 
 			.mdl-card__title-text {
 				background: rgba(0,0,0,0.65);
diff --git a/src/views/admin/appearance/skins.tpl b/src/views/admin/appearance/skins.tpl
index 10211893f5..fad2a8d7a2 100644
--- a/src/views/admin/appearance/skins.tpl
+++ b/src/views/admin/appearance/skins.tpl
@@ -1,24 +1,15 @@
 <div id="skins" class="row skins">
-	<div class="col-lg-9">
-		<div class="panel panel-default">
-			<div class="panel-heading">Bootswatch Themes</div>
-			<div class="panel-body">
-				<p>
-					NodeBB's skins are powered by Bootswatch, a repository containing themes built with Bootstrap as a base theme. Currently, the Vanilla theme is best optimized for use with Bootswatch.
-				</p>
-				<ul class="directory" id="bootstrap_themes">
-					<li><i class="fa fa-refresh fa-spin"></i> Loading Themes</li>
-				</ul>
-			</div>
-		</div>
+	<div class="directory row" id="bootstrap_themes">
+		<i class="fa fa-refresh fa-spin"></i> Loading Themes
 	</div>
-	<div class="col-lg-3 acp-sidebar">
-		<div class="panel panel-default">
-			<div class="panel-heading">Revert to Default</div>
-			<div class="panel-body">
-				<p>This will remove any custom Bootswatch skin applied to your NodeBB, and restore the base theme.</p>
-				<button class="btn btn-warning btn-md" id="revert_theme">Revert to Default</button>
-			</div>
+</div>
+
+<div class="col-lg-3 acp-sidebar">
+	<div class="panel panel-default">
+		<div class="panel-heading">Revert to Default</div>
+		<div class="panel-body">
+			<p>This will remove any custom Bootswatch skin applied to your NodeBB, and restore the base theme.</p>
+			<button class="btn btn-warning btn-md" id="revert_theme">Revert to Default</button>
 		</div>
 	</div>
 </div>
diff --git a/src/views/admin/partials/theme_list.tpl b/src/views/admin/partials/theme_list.tpl
index 27bef4dfa2..930141f806 100644
--- a/src/views/admin/partials/theme_list.tpl
+++ b/src/views/admin/partials/theme_list.tpl
@@ -1,7 +1,7 @@
 <!-- BEGIN themes -->
 <div class="col-xs-4" data-type="{themes.type}" data-theme="{themes.id}"<!-- IF themes.css --> data-css="{themes.css}"<!-- ENDIF themes.css -->>
 	<div class="theme-card mdl-card mdl-shadow--2dp">
-		<div class="mdl-card__title mdl-card--expand" style="background: url('{themes.screenshot_url}');">
+		<div class="mdl-card__title mdl-card--expand" style="background-image: url('{themes.screenshot_url}');">
 			<h2 class="mdl-card__title-text">{themes.name}</h2>
 		</div>
 		<div class="mdl-card__supporting-text">