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 #%> -
Topic View
Creating Topics
Editing Topics
Creating Synapses
Editing Synapses
Selection
Search