Spacing out hint stuff better

Author: lax4mike

app/js/hint/HintView.js

@@ -24,14 +24,14 @@ var HintView = module.exports = Backbone.View.extend({
         this.$el = $('<div></div>').attr('class', 'hint');
 
         // if the user has found a set, remove the hint
-        Backbone.on("setFound", function(){
+        Backbone.on('setFound', function(){
             this.$el.fadeOut(function(){
                 this.$el.empty();
             }.bind(this));
         }.bind(this));
 
         // if the cards are finished dealing, show hint
-        Backbone.on("cardsDealt", function(){
+        Backbone.on('cardsDealt', function(){
             this.renderHintLink();
         }.bind(this));
     },
@@ -60,23 +60,28 @@ var HintView = module.exports = Backbone.View.extend({
         if (e){ e.preventDefault(); }
 
         var sets = this.cards.findSets();
-        
-        this.$el.html(setCountTemplate({
-            setCountText: this.getCountText(sets)
-        }));
 
+        this.$el.fadeOut(function(){
+            this.$el.html(setCountTemplate({
+                setCountText: this.getCountText(sets)
+            }));
+            this.$el.fadeIn();
+        }.bind(this));    
     },
 
     renderSets: function(e){
 
         if (e){ e.preventDefault(); }
 
+        // make mini cards
         var sets = this.cards.findSets().map(function(set){
-            // return new CardView()   
+            
             return set.map(function(card){
                 // make sure we clone the model so it doesn't interfer with the real card
                 var cv = new CardView({model: card.clone()});
                 cv.$el.addClass('card--mini');
+
+                // return html string
                 return cv.$el.prop('outerHTML');
             });
         });

app/js/hint/templates/hint.handlebars

@@ -1 +1,3 @@
-<a href="#" class="get-hint">hint</a>
+<div class="hint__title">
+	<a href="#" class="get-hint">hint</a>
+</div>

app/js/hint/templates/setCount.handlebars

@@ -1,2 +1,4 @@
-<div>{{setCountText}}</div>
+<div class="hint__title">
+{{setCountText}}<br>
 (<a href="#" class="show-me">show me</a>)
+</div>

app/js/hint/templates/showSets.handlebars

@@ -1,8 +1,11 @@
-<div>{{setCountText}}</div>
+<div class="hint__title">{{setCountText}}</div>
+
+<div class="hint__sets">
 {{#each sets}}
-    <div class="hint__set-holder">
+    <div class="hint__set">
     {{#each this}}
-		{{{this}}}
+        {{{this}}}
     {{/each}}
     </div>
 {{/each}}
+</div>

app/styl/hint.styl

@@ -3,6 +3,8 @@
 	text-align: right;
 	color: #999;
 
+	padding: 16px 0;
+	
 	a,
 	a:link,
 	a:visited
@@ -13,18 +15,31 @@
 	}
 }
 
-.hint__set-holder {
-	display: inline-flex;
-	vertical-align: middle;
-	flex-direction: row;
-	margin: 0 5px 5px;
+.hint__sets {
+	display: flex;
+	flex-direction: row-reverse;
+	flex-wrap: wrap;
+}
+.hint__set {
+	flex: 0 0 25%;
+	padding: 0 10px 10px;
+	
+	display: flex;
+	justify-content: center;
+}
+
+.hint__title {
+	padding: 0 10px 10px;
 }
 
 .card.card--mini {
     width: 30px;
     height: 45px;
     position: relative;
     margin: 1px;
+    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.3);
+    border-radius: 3px;
+    cursor: default;
 
     .shape {
         margin: 1px 0;