0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

update help

Browse source
This commit is contained in:
rolux 2013-03-07 05:50:34 +00:00
parent d51202bad6
commit 088807202e
2 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
static/html/help.html
View file

@ -2,14 +2,16 @@
<p>To learn more about the various features of <b>{site.name}</b>, just select a topic on the left.</p> <p>To learn more about the various features of <b>{site.name}</b>, just select a topic on the left.</p>
<p>Please note that this help section is a work in progress.</p> <p>Please note that this help section is a work in progress.</p>
<p>For more information about <b>pan.do/ra</b>, the software behind this website, visit <a href="https://pan.do/ra" target="_blank">pan.do/ra</a>.</p> <p>For more information about <b>pan.do/ra</b>, the software behind this website, visit <a href="https://pan.do/ra" target="_blank">pan.do/ra</a>.</p>
<a href="https://pan.do/ra" target="_blank"><img src="/static/jpg/help.help.jpg"></a> <a href="https://pan.do/ra"><img src="/static/jpg/help.help.jpg"></a>
</div> </div>
<div id="accounts"> <div id="accounts">
<p>Help is coming soon...</p> <p>If you just want to explore <b>{site.name}</b>, watch {itemName.plural} and browse annotations, you can do so without a user account.</p>
<p>But in case you want to add your own annotations, create your own lists and make use of some of the site's more advanced features, please {signup}.</p>
<img src="/static/jpg/help.accounts.jpg"> <img src="/static/jpg/help.accounts.jpg">
</div> </div>
<div id="navigation"> <div id="navigation">
<p>{site.name} looks, feels and works more like a desktop application than like a usual website. It has a menu on top that shows most of the site's functionality, including keyboard shortcuts. Most other interface elements are resizable, or can be collapsed and expanded, dialogs can be moved around, and any list of {itemName.plural} or clips can be sorted in different ways. {site.name} remembers these settings &mdash; the next time you visit the site, everything will be just as you left it.</p> <p><b>{site.name}</b> looks, feels and works more like a desktop application than like a usual website. It has a menu on top that shows most of the site's functionality, including keyboard shortcuts. Most other interface elements are resizable, or can be collapsed and expanded, dialogs can be moved around, and any list of {itemName.plural} or clips can be sorted in different ways. <b>{site.name}</b> remembers these settings &mdash; the next time you visit the site, everything will be just as you left it.</p>
<p>You will also notice that the URLs are short and easy to make sense of, and that your browser's back and forward buttons work just as expected.</p>
<p> <p>
<h2>Mouse and Keyboard Shortcuts</h2><br> <h2>Mouse and Keyboard Shortcuts</h2><br>
<table> <table>
@ -67,7 +69,7 @@
<img src="/static/jpg/help.views.jpg"> <img src="/static/jpg/help.views.jpg">
</div> </div>
<div id="timelines"> <div id="timelines">
<p>A timeline is a visual signature of a {itemName.singular}. It provides an instant overview of what is happening in a {itemName.singular}, and can be used for navigation. You can switch between different types of timelines: anti-alias (average colors), slit-scan (see below), keyframes (full frames) and waveform (audio).</p> <p>A timeline is a visual signature of a {itemName.singular}. It provides an instant overview of its structure over time, and can be used for navigation. You can switch between different types of timelines: anti-alias (average colors), slit-scan (see below), keyframes (full frames) and waveform (audio).</p>
<img src="/static/jpg/help.timelines.jpg"> <img src="/static/jpg/help.timelines.jpg">
</div> </div>
<div id="clips"> <div id="clips">
@ -83,22 +85,24 @@
<img src="/static/jpg/help.calendars.jpg"> <img src="/static/jpg/help.calendars.jpg">
</div> </div>
<div id="find"> <div id="find">
<p>Help is coming soon...</p> <p>To search <b>{site.name}</b>, just type something in the find box in the upper right corner of the screen, and press enter. The site returns all exact matches, so there is no need to enclose multiple words in quotes.</p>
<p>The find box also includes a menu that lets you specify what exactly you're searching for &mdash; for example the title of a {itemName.singular}, a particular person, or a specific type of annotation.<p>
<p>From that menu, you can also access the advanced find options. Below, you can see how to search for "All {itemName.plural} from 1968 that were made in France, Italy, East Germany or West Germany". You can also save any search as a smart list that you can access at any time, and that will update dynamically.</p>
<img src="/static/jpg/help.find.jpg"> <img src="/static/jpg/help.find.jpg">
</div> </div>
<div id="filters"> <div id="filters">
<p>Help is coming soon...</p> <p>Often, the easiest way to instantly find what you're looking for is to use filters. Below, you can see how to find, with just three clicks, all German-language {itemName.plural} from either East Germany or West Germany. You can then narrow down you search even further, for example by picking a specific year.</p>
<img src="/static/jpg/help.filters.jpg"> <img src="/static/jpg/help.filters.jpg">
</div> </div>
<div id="lists"> <div id="lists">
<p>A list is simply a list of {itemName.plural}, and you can create as many lists as you want. These lists behave like folders &mdash; you can add {itemName.plural} to them, either via drag &amp; drop or via copy &amp; paste, and you can also remove any item from a list.</p> <p>A list is simply a list of {itemName.plural}, and you can create as many lists as you want. These lists behave like folders &mdash; you can add {itemName.plural} to them, either via drag &amp; drop or via copy &amp; paste, and you can also remove any item from a list.</p>
<p>Smart lists, on the other hand, are saved searches (like "all {itemName.plural} longer than one hour" or "all French {itemName.plural} from the 1960s"), and they will update dynamically.</p> <p>Smart lists, on the other hand, are saved searches (like "all {itemName.plural} longer than one hour" or "all French {itemName.plural} from the 1960s"), and they will update dynamically.</p>
<p>All personal lists you create are initially private, but you can share them by making them public, so that other users can find and browse them, and add them to their favorites. Your own favorite lists are initially empty, but if you click on "Manage Favorite Lists", you will see all public lists, and you can add the ones you like to your favorites.</p> <p>All personal lists you create are initially private, but you can share them by making them public, so that other users can find and browse them, and add them to their favorites. Your own favorite lists are initially empty, but if you click on "Manage Favorite Lists", you will see all public lists, and you can add the ones you like to your favorites.</p>
<p>Finally, there are featured lists, which are selected public lists, picked by {site.name}.</p> <p>Finally, there are featured lists, which are selected public lists, picked by <b>{site.name}</b>.</p>
<img src="/static/jpg/help.lists.jpg"> <img src="/static/jpg/help.lists.jpg">
</div> </div>
<div id="player"> <div id="player">
<p>Help is coming soon...</p> <p>In the player view, you'll get a video player, including a fullscreen mode, and various controls to set the video's volume, position or resolution. You can also search right in the player, and the results will be highlighted on the timeline. You don't even have to move your mouse &mdash; for what you see below, you can just type F road ENTER G G G SHIFT+G and so on.</p>
<img src="/static/jpg/help.player.jpg"> <img src="/static/jpg/help.player.jpg">
</div> </div>
<div id="editor"> <div id="editor">

12
static/js/pandora/helpDialog.js
View file

@ -62,9 +62,10 @@ pandora.ui.helpDialog = function() {
$list.size(); $list.size();
}, },
'pandora_help': function(data) { 'pandora_help': function(data) {
pandora.user.ui.page == 'help' && if (pandora.user.ui.page == 'help') {
that.select(data.value == '' ? 'help' : data.value); that.select(data.value == '' ? 'help' : data.value);
} }
}
}); });
Ox.get('/static/html/help.html', function(html) { Ox.get('/static/html/help.html', function(html) {
@ -72,12 +73,14 @@ pandora.ui.helpDialog = function() {
var $html = $('<div>'), var $html = $('<div>'),
strings = Ox.clone(pandora.site, true); strings = Ox.clone(pandora.site, true);
strings.itemName = Ox.map(strings.itemName, function(v) {
return v.toLowerCase();
});
strings.addAnnotationShortcuts = strings.layers.map(function(layer, index) { strings.addAnnotationShortcuts = strings.layers.map(function(layer, index) {
return '<tr><td>' + index + '</td><td>Add ' + layer.item.toLowerCase() + '</td></tr>'; return '<tr><td>' + index + '</td><td>Add ' + layer.item.toLowerCase() + '</td></tr>';
}).join('\n'); }).join('\n');
strings.itemName = Ox.map(strings.itemName, function(v) {
return v.toLowerCase();
});
strings.signup = pandora.user.level == 'guest'
? '<a href="/signup">sign up</a>' : 'sign up';
$html.html(Ox.formatString(html, strings)); $html.html(Ox.formatString(html, strings));
@ -150,6 +153,7 @@ pandora.ui.helpDialog = function() {
textAlign: 'right', textAlign: 'right',
whiteSpace: 'nowrap' whiteSpace: 'nowrap'
}); });
pandora.createLinks($text);
return that; return that;
} }