diff --git a/static/js/index.js b/static/js/index.js index f73a640..c49794c 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -106,11 +106,24 @@ var searchResultsPage = 1; }); }; + var displayHotkeyHelp = function(){ + var help = $("div#hotkey-help"); + console.log("H"); + if(help.hasClass("hidden")) + help.fadeIn(420); + else + help.fadeOut(420); + + $("div#body").toggleClass("faded"); + help.toggleClass("hidden"); + } + var hotkeyActions = { "k" : previousResult, "j" : nextResult, "h" : previousSymbolMatch, - "l" : nextSymbolMatch + "l" : nextSymbolMatch, + "?" : displayHotkeyHelp }; $(window).keypress(function(key){ diff --git a/static/sass/index.sass b/static/sass/index.sass index 0a5fcd5..2a90900 100644 --- a/static/sass/index.sass +++ b/static/sass/index.sass @@ -22,6 +22,54 @@ $hiddenInfoWidth: 250px >li.ui-menu-item a.ui-state-focus @include vendor(transition, background-color 0.3s ease-out) +div#body + @extend .t3 + + &.faded + @include opaque(0.8) + +div#hotkey-help + $width: 40% + + background-color: white + border: 1px solid $baseColor3 + left: 50% - $width / 2 + min-width: 400px + padding: 35px + position: fixed + top: 30% + width: $width + z-index: 200 + + &.hidden + display: none + + div + border-bottom: 1px solid $baseColor2 + color: $baseColor1 + font-size: 130% + padding-bottom: 8px + text-align: center + + ul + list-style: none + margin-left: auto + margin-right: auto + position: relative + width: 300px + + li + margin-bottom: 4px + + span.hotkey + color: $baseColor1 + font-family: monospace + font-size: 130% + font-weight: bold + + span.seperator + color: $baseColor2 + div#search-field @extend .t2 diff --git a/templates/index.html b/templates/index.html index 425355b..67ba677 100644 --- a/templates/index.html +++ b/templates/index.html @@ -99,3 +99,15 @@ {{ assets.tag("index.js") }} {{ assets.tag("index.advanced-search-form.js") }} = endblock + += block after_body +