glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

help qr tutorials

Browse source
This commit is contained in:
Shai Mor 2014-09-12 11:45:53 -04:00
parent f49f45e856
commit b722dc911b
3 changed files with 94 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/javascripts/metamaps/Metamaps.js
View file

@ -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

61
app/assets/stylesheets/application.css
View file

@ -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 {

29
app/views/shared/_cheatsheet.html.erb
View file

@ -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>