update help

static/html/help.html

@@ -1,9 +1,11 @@
 <div id="help">
-    <p>To learn more about the various features of {site.name}, just select a topic on the left.</p>
-    <p>(Please note that this help section is a work in progress.)</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>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>
 </div>
 <div id="accounts">
-    <p>Coming soon...</p>
+    <p>Help is coming soon...</p>
 </div>
 <div id="navigation">
     <p>
@@ -65,26 +67,28 @@
     <img src="/static/jpg/help.timelines.jpg">
 </div>
 <div id="clips">
-    <p>Some views don't show lists of {itemName.plural}, but lists of video clips &mdash; for example clips matching your query, or related to a specific location on a map. Each clip is a video player. The video will load once you've selected it, and you can then simply click to play. If you doubleclick, you'll get to the {itemName.singular} itself, and its video player will be at the very position of the clip.</p>
+    <p>Some views don't show lists of {itemName.plural}, but lists of video clips &mdash; for example clips matching your query, or related to a specific location on a map. These clips can be sorted by various properties (like saturation, see below), and each clip is a video player. The video will load once you've selected it, and you can then simply click to play. If you doubleclick, you'll get to the {itemName.singular} itself, and its video player will be at the very position of the clip.</p>
+    <img src="/static/jpg/help.clips.jpg">
 </div>
 <div id="maps">
-    <p>Coming soon...</p>
+    <p>Help is coming soon...</p>
     <img src="/static/jpg/help.maps.jpg">
 </div>
 <div id="calendars">
-    <p>Coming soon...</p>
+    <p>Help is coming soon...</p>
 </div>
 <div id="find">
-    <p>Coming soon...</p>
+    <p>Help is coming soon...</p>
 </div>
 <div id="filters">
-    <p>Coming soon...</p>
+    <p>Help is coming soon...</p>
 </div>
 <div id="lists">
-    <p>Coming soon...</p>
+    <p>Help is coming soon...</p>
 </div>
 <div id="player">
-    <p>Coming soon...</p>
+    <p>Help is coming soon...</p>
+    <img src="/static/jpg/help.player.jpg">
 </div>
 <div id="editor">
     <p>In the editor view, you can add and edit time-based annotations. Just set an in point and an out point, and pick one of the different types of annotations to add.</p>
@@ -130,14 +134,14 @@
     </p>
 </div>
 <div id="edits">
-    <p>Coming soon...</p>
+    <p>Help is coming soon...</p>
 </div>
 <div id="texts">
-    <p>Coming soon...</p>
+    <p>Help is coming soon...</p>
 </div>
 <div id="embeds">
-    <p>Coming soon...</p>
+    <p>Help is coming soon...</p>
 </div>
 <div id="urls">
-    <p>Coming soon...</p>
+    <p>Help is coming soon...</p>
 </div>

static/js/pandora/helpDialog.js

@@ -96,7 +96,7 @@ pandora.ui.helpDialog = function() {
                     {
                         id: 'title',
                         visible: true,
-                        width: 192 - Ox.UI.SCROLLBAR_SIZE
+                        width: 128 - Ox.UI.SCROLLBAR_SIZE
                     }
                 ],
                 items: pandora.site.help.map(function(value, index) {
@@ -128,7 +128,7 @@ pandora.ui.helpDialog = function() {
 
         $panel = Ox.SplitPanel({
             elements: [
-                {element: $list, size: 192},
+                {element: $list, size: 128},
                 {element: $text}
             ],
             orientation: 'horizontal'
@@ -143,13 +143,15 @@ pandora.ui.helpDialog = function() {
         $text.html(text[id]);
         $text.find('img')
             .css({
-                width: '100%'
+                width: '100%',
+                borderRadius: '8px'
             });
         $text.find('td:first-child')
             .css({
                 height: '16px',
                 paddingRight: '8px',
-                textAlign: 'right'
+                textAlign: 'right',
+                whiteSpace: 'nowrap'
             });
         return that;
     }