Merge branch 'develop' of https://github.com/Connoropolous/metamaps_gen002 into new

app/assets/javascripts/metamaps/Metamaps.js

@@ -3112,8 +3112,26 @@ Metamaps.Map = {
 Metamaps.Map.CheatSheet = {
     init: function () {
         // tab the cheatsheet
-        $('#cheatSheet').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
+        $('#cheatSheet').tabs();
-        $("#cheatSheet .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left");
+        $('#quickReference').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
+        $("#quickReference .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left");
+        
+        // id = the id of a vimeo video
+        var switchVideo = function (element, id) {
+            $('.tutorialItem').removeClass("active");
+            $(element).addClass("active");
+            $('#tutorialVideo').attr('src','//player.vimeo.com/video/'+id);
+        };
+
+        $('#gettingStarted').click(function() {
+            switchVideo(this,'88334167');
+        });
+        $('#upYourSkillz').click(function() {
+            switchVideo(this,'100118167');
+        });
+        $('#advancedMapping').click(function() {
+            switchVideo(this,'88334167');
+        });
     }
 }; // end Metamaps.Map.CheatSheet
 

app/assets/stylesheets/application.css

@@ -1374,7 +1374,7 @@ float: left;
     display: none !important;
 }
 .ui-tabs-vertical {
-    width: 55em;
+  
 }
 .ui-tabs-vertical .ui-tabs-nav {
     float: left;
@@ -1387,16 +1387,14 @@ float: left;
 .ui-tabs-vertical .ui-tabs-nav li {
     clear: left;
     width: 100%;
-    border-top: none !important;
+    border: none !important;
-    border-left: none !important;
-    border-bottom: none !important;
     background: none !important;
     margin: 0 0 .2em 0 !important;
     white-space: normal !important;
 }
 .ui-tabs-vertical .ui-tabs-nav li.ui-state-active,
 .ui-tabs-vertical .ui-tabs-nav li.ui-state-hover {
-    border-right: 1px solid #000;
+    border-right: none;
 }
 .ui-tabs-vertical .ui-tabs-nav li a {
     display: block;
@@ -1684,6 +1682,8 @@ float: left;
     font-size: 17px;
     line-height: 21px;
     border: none;
+    background: none;
+    padding: 0;
 }
 #cheatSheet .sectionTitle {
     font-weight: bold;
@@ -1703,6 +1703,57 @@ float: left;
 #cheatSheet .indented {
     margin-left: 15px;
 }
+
+#helpWrapper {
+    background: none;
+    border: none;
+    border-bottom: 1px solid #BDBDBD;
+    border-radius: 0;
+}
+#helpWrapper li {
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0 30px 0 0;
+    border-bottom: 2px solid rgba(0,0,0,0);
+}
+#helpWrapper li:hover, #helpWrapper li.ui-state-active {
+    border-bottom: 2px solid #00BCD4;
+}
+#helpWrapper li a {
+    padding: 0;
+    font-family: 'din-medium', helvetica, sans-serif;
+    font-size: 14px;
+}
+#quickReference {
+    padding: 32px 0 0 0;
+}
+#quickReference ul {
+    width: 150px;
+}
+#quickReference li.ui-state-active a {
+    color: #00BCD4;
+}
+#tutorials {
+    padding: 16px 0 0 0;
+}
+.tutorialItem {
+    margin-top: 16px;
+    display: inline-block;
+    font-size: 14px;
+    font-family: 'din-medium', helvetica, sans-serif;
+    cursor: pointer;
+    color: #757575;
+}
+.tutorialItem:hover {
+    color: #424242;
+}
+.tutorialItem.active {
+    color: #00bcd4;
+}
+#upYourSkillz {
+    margin: 0 70px;
+}
 /* Admin Pages */
 
 #wrapper > div.blackBox {

app/views/shared/_cheatsheet.html.erb

@@ -3,9 +3,16 @@
   # The inner HTML of the cheatsheet
   #%>
 
-<h3>Quick Reference Guide</h3>
+<h3>HELP</h3>
-
+ 
 <div id="cheatSheet">
+<ul id="helpWrapper">
+    <li><a href="#quickReference">QUICK REFERENCES</a></li>
+    <li><a href="#tutorials">TUTORIALS</a></li>
+    <li><a href="#moreResources">MORE RESOURCES</a></li>
+</ul>
+    
+<div id="quickReference">
   <ul>
     <li><a href="#csTopicView">Topic View</a></li>
     <li><a href="#csCreatingTopics">Creating Topics</a></li>
@@ -18,13 +25,11 @@
   </ul>
 
   <div id="csTopicView">    
-    <p class="sectionTitle">Topic View</p>
     <div class="csItem"><span class="csTitle">Alt + click on topic icon:</span> recenter topics around chosen topic</div>
     <div class="csItem"><span class="csTitle">Right-click + 'center this topic':</span> recenter topics around chosen topic</div> 
   </div>
   
   <div id="csCreatingTopics">    
-    <p class="sectionTitle">Creating Topics</p>
     <div class="csItem"><span class="csTitle">Double-click on canvas:</span> Bring up the metacode spinner</div>
     <div class="csItem indented"><span class="csTitle">Scroll:</span> change metacode spinner selection</div>
     <div class="csItem indented"><span class="csTitle">Tab:</span> rotate spinner counter-clockwise</div>
@@ -35,7 +40,6 @@
   </div>
 
   <div id="csEditingTopics">    
-    <p class="sectionTitle">Editing Topics</p>
     <div class="csItem">
             <span class="csTitle">Open topic card:</span> double-click on topic icon
     </div>
@@ -67,7 +71,6 @@
   </div>
 
   <div id="csCreatingSynapses">    
-    <p class="sectionTitle">Creating Synapses</p>
     <div class="csItem"><span class="csTitle">Right-click & drag from one topic to another:</span> open create synapse prompt</div>
     <div class="csItem indented"><span class="csTitle">Enter:</span> Create synapse</div>
     <div class="csItem indented">*You do not have to add a description</div>
@@ -77,7 +80,6 @@
   </div>
 
   <div id="csEditingSynapses">    
-    <p class="sectionTitle">Editing Synapses</p>
     <div class="csItem"><span class="csTitle">Open synapse card:</span>double-click on synapse </div>
     <div class="csItem indented"><span class="csTitle">Edit synapse description:</span> click on current description text</div>
     <div class="csItem indented"><span class="csTitle">Save synapse description:</span> hit enter</div>
@@ -88,14 +90,12 @@
   </div>
 
   <div id="csNavigation">    
-    <p class="sectionTitle">Navigation</p>
     <div class="csItem"><span class="csTitle">Click + drag:</span> move around canvas</div>
     <div class="csItem"><span class="csTitle">Scroll:</span> zoom in/out</div>
     <div class="csItem"><span class="csTitle">Refresh page:</span> center map</div>
   </div>
 
   <div id="csSelection">    
-    <p class="sectionTitle">Selection</p>
     <div class="csItem"><span class="csTitle">Click on topic icon:</span> select/deselect topic</div>
     <div class="csItem"><span class="csTitle">Click on synapse:</span> select/deselect synapse</div>
     <div class="csItem"><span class="csTitle">Shift + click:</span> select multiple topics / synapses</div>
@@ -108,7 +108,6 @@
   </div>
 
   <div id="csSearch">    
-    <p class="sectionTitle">Search</p>
     <div class="csItem"><span class="csTitle">Ctrl + /:</span> open search prompt</div>
     <div class="csItem"><span class="csTitle">Esc:</span> close search prompt</div>  
     <div class="csItem"><span class="csTitle">Type into the search prompt:</span> search for topics, maps, & mappers</div>
@@ -122,4 +121,12 @@
   </div>
 </div>
 
-<div class="clearfloat"></div>
+<div id="tutorials">
+    <iframe id="tutorialVideo" src="//player.vimeo.com/video/88334167" width="552" height="326" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+    <div class="tutorialItem active" id="gettingStarted">1. GETTING STARTED</div>
+    <div class="tutorialItem" id="upYourSkillz">2. UP YOUR SKILLZ</div>
+    <div class="tutorialItem" id="advancedMapping">3. ADVANCED MAPPING</div>
+</div>
+
+
+</div>