better markup on layouts modal

2 files changed, 25 insertions, 17 deletions

diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index 1bfc6cb..8eaf081 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -22,10 +22,16 @@ var LayoutsIndex = View.extend({
 		this.$templates.empty()
 		data.forEach(function(room){
 			var $span = $("<span>")
-			// $span.html(JSON.stringify(room))
 			$span.data("slug", room.slug)
-			$span.css("background-image", "url(" + room.photo + ")")
-			$span.attr("data-name", room.name)
+			
+			var $label = $("<label>")
+			$label.html( room.name )
+			
+			var $image = $("<span>")
+			$image.addClass("image").css("background-image", "url(" + room.photo + ")")
+			
+      $span.append( $image )
+      $span.append( $label )
 			
 			this.$templates.append($span)
 		}.bind(this))
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 93645e1..b91c02d 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -647,36 +647,38 @@ iframe.embed {
 }
 
 .templates span {
+  display: block;
+  float: left;
+  background: white;
+  margin: 2vw;
+  padding: 2vw;
+  cursor:pointer;
+}
+.templates span .image {
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   background-color: #fff;
   width: 20vw;
-  height: 20vw;
-  display: inline-block;
-  margin: 4vw;
+  height: 15vw;
+  display: block;
   background-color: #ddd;
-  position: relative;
 }
 
-.templates span:after {
-	content: attr(data-name);
-	position: absolute;
-	top: 100%;
+.templates span label {
 	width: 100%;
 	left: 0;
-	background: #fff;
-	padding: 5px;
+  display: block;
 	font-weight: 300;
 }
 
-.templates span:hover {
+.templates span:hover,
+.templates span:hover .image {
   background-color: #f00;
   cursor:pointer;
 }
-
-.templates span:hover:after {
-  color: #f00;
+.templates span:hover label {
+  color: white;
 }
 
 .templates h1 {