Fix jkyuusai#13 make tracking buttons vertically aligned block buttons

Collapse feelingItem into feelingSection file

Add panel to tracking section to give more structure to view

Adjust breadcrumb spacing to account for use of large buttons

Generalise styles for emotions so colors can be used throughout app

Activate bootstrap panels component

Activate bootstrap component-animations so mobile displays correctly

client/feelings/currentFeelings.html

@@ -1,12 +1,12 @@
 <template name="currentFeelings">	
 	<div class="btn-group btn-breadcrumb">
-		<a href="#" class="btn btn-default reset"><i class="glyphicon glyphicon-user"></i></a>
+		<a href="#" class="btn btn-info btn-lg reset"><i class="glyphicon glyphicon-user"></i></a>
 		{{#each currentFeelings}}
 			{{> currentFeeling}}
 		{{/each}}
 	</div>
 </template>
 
 <template name="currentFeeling"> 	
- 	<a id="{{name}}" href="#" class="btn btn-default">{{upperName}}</a> 		  
+ 	<a id="{{name}}" href="#" class="btn btn-info btn-lg">{{upperName}}</a> 		  
 </template>

client/feelings/feelingSection.html

@@ -1,7 +1,14 @@
 <template name="feelingSection">	
-	<div class="feelings btn-group btn-lg {{justifyIfNotPhone}}" data-toggle="buttons">
+	<div class="feelings">    
 	    {{#each feelings}}
 	      {{> feelingItem}}
-	    {{/each}}	
-	</div>	
+	    {{/each}}		
+	</div>
+	{{#unless feelings}}	
+		<button type="submit" class="btn btn-primary btn-lg btn-block">Track Feelings</button>
+	{{/unless}}
+</template>
+
+<template name="feelingItem">  	
+  	<button type="button" class="btn btn-lg btn-block select-feeling" id="{{.}}">{{name}} </button>
 </template>

client/feelings/feelingSection.js

@@ -12,4 +12,10 @@ Template.feelingSection.helpers({
 			return 'row';
 		}
 	}   
+});
+
+Template.feelingItem.helpers({
+  name: function() {
+  	return upperCase(this);
+  }
 });

client/feelings/trackFeelings.html

@@ -2,11 +2,13 @@
 	{{#unless currentUser}}
   		<div class="jumbotron">Please log in or create an account to continue!</div>
   	{{else}}
-	  	{{> currentFeelings }}
-		<form role="form">
-			{{> feelingSection }}			
-			<br/>
-			<input type="submit" value="Track Feelings" class="btn btn-primary btn-lg pull-right {{disableIfNotDone}}"/>
-		</form>
+  		<div class="panel panel-default">
+		  	<div class="panel-heading">{{> currentFeelings }}</div>
+			 <div class="panel-body">
+				<form role="form">
+					{{> feelingSection }}
+				</form>
+			</div>
+		</div>
 	{{/unless}}
 </template>

client/feelings/trackFeelings.js

@@ -1,10 +1,10 @@
 Template.trackFeelings.events({
-	'change input:radio': function(e, template) {
+	'click button.select-feeling': function(e, template) {
     	e.preventDefault();
         Session.set('currentFeeling', e.target.id);
     	var feeling = {
     		name: e.target.id
-		};	
+		};
 
 		Meteor.call('trackFeeling', feeling, function(error, feeling) {
 			if(error) {
@@ -16,7 +16,7 @@ Template.trackFeelings.events({
 			Session.set('currentFeelings', currentFeelings);
 		});
     },
-    'submit': function(e, template) {
+    'submit': function(e, template) {            
     	e.preventDefault();
     	var currentFeelings = Session.get('currentFeelings');
 
@@ -42,11 +42,5 @@ Template.trackFeelings.events({
 });
 
 Template.trackFeelings.helpers({
-	disableIfNotDone: function() {
-		if(Session.get('currentFeelings') && Session.get('currentFeelings').length === 3) {
-			return;
-		}
 
-		return 'disabled';
-	}
 });

client/vendor/custom.bootstrap.import.less

@@ -864,27 +864,27 @@
 //
 //##
 
-tr.feeling-fear {
+.feeling-fear {
 	background-color: @fear
 }
 
-tr.feeling-happy {
+.feeling-happy {
 	background-color: @happy
 }
 
-tr.feeling-surprise {
+.feeling-surprise {
 	background-color: @surprise
 }
 
-tr.feeling-disgust {
+.feeling-disgust {
 	background-color: @disgust
 }
 
-tr.feeling-sad {
+.feeling-sad {
 	background-color: @sad
 }
 
-tr.feeling-anger {
+.feeling-anger {
 	background-color: @anger
 }
 
@@ -923,25 +923,25 @@ tr.feeling-anger {
 
 /** The Spacing **/
 .btn-breadcrumb .btn {
-  padding:6px 12px 6px 24px;
+  padding:6px 12px 8px 24px;
 }
 .btn-breadcrumb .btn:first-child {
-  padding:6px 6px 6px 10px;
+  padding:6px 6px 7px 10px;
 }
 .btn-breadcrumb .btn:last-child {
-  padding:6px 18px 6px 24px;
+  padding:6px 18px 8px 24px;
 }
 
-/** Default button **/
-.btn-breadcrumb .btn.btn-default:not(:last-child):after {
-  border-left: 10px solid #fff;
+/** Info button **/
+.btn-breadcrumb .btn.btn-info:not(:last-child):after {
+  border-left: 10px solid #5bc0de;
 }
-.btn-breadcrumb .btn.btn-default:not(:last-child):before {
-  border-left: 10px solid #ccc;
+.btn-breadcrumb .btn.btn-info:not(:last-child):before {
+  border-left: 10px solid #46b8da;
 }
-.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
-  border-left: 10px solid #ebebeb;
+.btn-breadcrumb .btn.btn-info:hover:not(:last-child):after {
+  border-left: 10px solid #39b3d7;
 }
-.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
-  border-left: 10px solid #adadad;
+.btn-breadcrumb .btn.btn-info:hover:not(:last-child):before {
+  border-left: 10px solid #269abc;
 }

client/vendor/custom.bootstrap.json

@@ -26,11 +26,11 @@
   "progress-bars":        false,
   "media":                true,
   "list-group":           false,
-  "panels":               false,
+  "panels":               true,
   "wells":                false,
   "close":                false,
 
-  "component-animations": false,
+  "component-animations": true,
   "dropdowns":            true,
   "modals":               true,
   "tooltip":              false,