From 3c3dc803c5ff55dcf8cdb1c4d08d0ba3b99d75ea Mon Sep 17 00:00:00 2001
From: Nathan Leniz <terakilobyte@gmail.com>
Date: Sat, 24 Jan 2015 20:49:59 -0500
Subject: [PATCH] Show long/short form instructions based on user input

---
 controllers/bonfire.js  |  6 ++++--
 public/css/main.less    | 10 ++++++----
 public/js/main.js       | 11 +++++++++++
 views/bonfire/show.jade | 20 +++++++++++++++++---
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/controllers/bonfire.js b/controllers/bonfire.js
index 495a27e1d2..d88a9d4c45 100644
--- a/controllers/bonfire.js
+++ b/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,
diff --git a/public/css/main.less b/public/css/main.less
index 0630a4e272..2938ac72dd 100644
--- a/public/css/main.less
+++ b/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
diff --git a/public/js/main.js b/public/js/main.js
index c04ee6e31c..bd96ace1ac 100644
--- a/public/js/main.js
+++ b/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']);
diff --git a/views/bonfire/show.jade b/views/bonfire/show.jade
index 9100cd6575..51d88fe64e 100644
--- a/views/bonfire/show.jade
+++ b/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
-                            for sentence in description
-                                p.bonfire-instructions!= sentence
+                        .row.text-center
+                            row.text-center
+                                .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)