From b722dc911b0ee92c9cec2142cd0da1a101581e3d Mon Sep 17 00:00:00 2001 From: Shai Mor Date: Fri, 12 Sep 2014 11:45:53 -0400 Subject: [PATCH] help qr tutorials --- app/assets/javascripts/metamaps/Metamaps.js | 22 +++++++- app/assets/stylesheets/application.css | 61 +++++++++++++++++++-- app/views/shared/_cheatsheet.html.erb | 29 ++++++---- 3 files changed, 94 insertions(+), 18 deletions(-) diff --git a/app/assets/javascripts/metamaps/Metamaps.js b/app/assets/javascripts/metamaps/Metamaps.js index 9288d125..89909267 100644 --- a/app/assets/javascripts/metamaps/Metamaps.js +++ b/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 .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left"); + $('#cheatSheet').tabs(); + $('#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 diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index f852bea9..21fa9b64 100644 --- a/app/assets/stylesheets/application.css +++ b/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-left: none !important; - border-bottom: none !important; + border: 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 { diff --git a/app/views/shared/_cheatsheet.html.erb b/app/views/shared/_cheatsheet.html.erb index a774091b..361d615b 100644 --- a/app/views/shared/_cheatsheet.html.erb +++ b/app/views/shared/_cheatsheet.html.erb @@ -3,9 +3,16 @@ # The inner HTML of the cheatsheet #%> -

Quick Reference Guide

- +

HELP

+
+ + +
-

Topic View

Alt + click on topic icon: recenter topics around chosen topic
Right-click + 'center this topic': recenter topics around chosen topic
-

Creating Topics

Double-click on canvas: Bring up the metacode spinner
Scroll: change metacode spinner selection
Tab: rotate spinner counter-clockwise
@@ -35,7 +40,6 @@
-

Editing Topics

Open topic card: double-click on topic icon
@@ -67,7 +71,6 @@
-

Creating Synapses

Right-click & drag from one topic to another: open create synapse prompt
Enter: Create synapse
*You do not have to add a description
@@ -77,7 +80,6 @@
-

Editing Synapses

Open synapse card:double-click on synapse
Edit synapse description: click on current description text
Save synapse description: hit enter
@@ -88,14 +90,12 @@
-

Navigation

Click + drag: move around canvas
Scroll: zoom in/out
Refresh page: center map
-

Selection

Click on topic icon: select/deselect topic
Click on synapse: select/deselect synapse
Shift + click: select multiple topics / synapses
@@ -108,7 +108,6 @@
-

Search

Ctrl + /: open search prompt
Esc: close search prompt
Type into the search prompt: search for topics, maps, & mappers
@@ -122,4 +121,12 @@
-
+
+ +
1. GETTING STARTED
+
2. UP YOUR SKILLZ
+
3. ADVANCED MAPPING
+
+ + +
\ No newline at end of file