diff --git a/genome.css b/genome.css index 1d3a834014..e19eca9e1c 100644 --- a/genome.css +++ b/genome.css @@ -762,6 +762,13 @@ input.nav { font-size: 9px !important; } -div.helpDialog { +#help_dialog { font-size: 12px; + width: 70%; +} +#help_dialog dl { + width: 48%; +} +#help_dialog dt { + font-weight: bold; } diff --git a/js/Browser.js b/js/Browser.js index 12fc0cc6c8..28fbf16e99 100644 --- a/js/Browser.js +++ b/js/Browser.js @@ -667,23 +667,30 @@ Browser.prototype.makeHelpDialog = function () { // make a div containing our help text var helpdiv = document.createElement('div'); helpdiv.style.display = 'none'; - helpdiv.innerHTML = - '
' - + '

Mouse Commands

' - + '
' - + '
Track pane
' + helpdiv.className = "helpDialog"; + helpdiv.innerHTML = '' + + '
' + + '
Moving
' + '
    ' - + '
  • Click and drag in the main pane to move the view
  • ' - + '
  • Shift-click and drag to highlight a region to zoom to
  • ' - + '
' - + '
' - + '
Overview and scale bars
' + + '
  • Clicking and draging in the track area moves the view
  • ' + + '
  • Clicking on either the overview bar or the track scale bar centers the view there
  • ' + + '
  • Shift-clicking in the track area centers the view there
  • ' + + '' + + '
    Zooming
    ' + '
      ' - + '
    • Click to center the view at that region
    • ' - + '
    • Click and drag to highlight a region to zoom to
    • ' + + '
    • Clicking the "+" and "-" buttons in the navigation bar zooms the view in and out
    • ' + + '
    • Clicking and dragging in the overview or the track scale bar zooms to the region you select
    • ' + + '
    • Shift-clicking and dragging in the track area also zooms to the region you select
    • ' + '
    ' + '
    ' - + '
    ' + + '' + + '
    ' + + '
    Searching
    ' + + '
    ' + + '
    ' ; this.container.appendChild( helpdiv );