Show long/short form instructions based on user input

controllers/bonfire.js

@@ -77,7 +77,8 @@ exports.returnBonfire = function(req, res, next) {
             name: bonfire[bonfireNumber].name,
             number: bonfire[bonfireNumber].bonfireNumber,
             difficulty: bonfire[bonfireNumber].difficulty,
-            description: bonfire[bonfireNumber].description,
+            brief: bonfire[bonfireNumber].description[0],
+            details: bonfire[bonfireNumber].description.slice(1),
             tests:  bonfire[bonfireNumber].tests,
             challengeSeed:  bonfire[bonfireNumber].challengeSeed,
             challengeEntryPoint: bonfire[bonfireNumber].challengeEntryPoint,
@@ -131,7 +132,8 @@ exports.returnIndividualBonfire = function(req, res, next) {
             name: bonfire[bonfireNumber].name,
             number: bonfire[bonfireNumber].bonfireNumber,
             difficulty: bonfire[bonfireNumber].difficulty,
-            description: bonfire[bonfireNumber].description,
+            brief: bonfire[bonfireNumber].description[0],
+            details: bonfire[bonfireNumber].description.slice(1),
             tests:  bonfire[bonfireNumber].tests,
             challengeSeed:  bonfire[bonfireNumber].challengeSeed,
             challengeEntryPoint: bonfire[bonfireNumber].challengeEntryPoint,

public/css/main.less

@@ -205,6 +205,11 @@ ul {
   animation-duration: 0.5s;
 }
 
+.slow-animation {
+  -webkit-animation-duration: 1.5s;
+  animation-duration: 1.5s;
+}
+
 .disabled {
   pointer-events: none;
   cursor: default;
@@ -569,11 +574,8 @@ div.CodeMirror-scroll {
   text-size: 250px;
 }
 
-.bonfire-instructions p {
-  padding: 0;
-}
 .bonfire-instructions {
-  margin-bottom: 2px;
+  margin-bottom: 5px;
 }
 
 //uncomment this to see the dimensions of all elements outlined in red

public/js/main.js

@@ -77,6 +77,17 @@ $(document).ready(function() {
         l = location.pathname.split('/');
         window.location = '/bonfires/' + (parseInt(l[l.length - 1]) + 1);
     });
+
+    // Bonfire instructions functions
+    $('#more-info').on('click', function() {
+        $('#brief-instructions').hide();
+        $('#long-instructions').show().removeClass('hide');
+
+    });
+    $('#less-info').on('click', function() {
+        $('#brief-instructions').show();
+        $('#long-instructions').hide();
+    });
 });
 
 var profileValidation = angular.module('profileValidation',['ui.bootstrap']);

views/bonfire/show.jade

@@ -23,9 +23,23 @@ block content
                 .panel-heading.text-center #{name} (Level #{difficulty} bonfire)
                 .panel.panel-body
                     .well
-                        .text-left.bonfire-instructions
+                        .row.text-center
-                            for sentence in description
+                            row.text-center
-                                p.bonfire-instructions!= sentence
+                                .col-xs-12
+                                    .bonfire-instructions
+                                        = brief
+                                #brief-instructions.col-xs-12
+                                    button#more-info.btn.btn-info
+                                        span.ion-help-circled
+                                        | More information
+                            #long-instructions.row.text-center.hide
+                                .col-xs-12
+                                    .bonfire-instructions
+                                        for sentence in details
+                                            p!= sentence
+                                    button#less-info.btn.btn-info
+                                        span.ion-help-circled
+                                        | Less information
                     form.code
                         .form-group.codeMirrorView
                             textarea#codeEditor(autofocus=true)