Преглед изворни кода

Add hotkey help. Close #47.

Add:
    templates/index.html, static/(sass/index.sass, js/index.js)
        -Add hotkey help div, which fades in whenever the `?` hotkey is pressed.
tags/v1.0^2
Severyn Kozak пре 10 година
родитељ
комит
5cb118954b
4 измењених фајлова са 77 додато и 1 уклоњено
  1. +14
    -1
      static/js/index.js
  2. +48
    -0
      static/sass/index.sass
  3. +12
    -0
      templates/index.html
  4. +3
    -0
      templates/layout.html

+ 14
- 1
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){


+ 48
- 0
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



+ 12
- 0
templates/index.html Прегледај датотеку

@@ -99,3 +99,15 @@
{{ assets.tag("index.js") }}
{{ assets.tag("index.advanced-search-form.js") }}
= endblock

= block after_body
<div id="hotkey-help" class="hidden">
<div>Hotkeys</div>
<ul>
<li><span class="hotkey">k</span> <span class="seperator">:</span> move window up to the previous result</li>
<li><span class="hotkey">j</span> <span class="seperator">:</span> move window down to the next result</li>
<li><span class="hotkey">h</span> <span class="seperator">:</span> move to the previous symbol match</li>
<li><span class="hotkey">l</span> <span class="seperator">:</span> move to the next symbol match</li>
</ul>
</div>
= endblock

+ 3
- 0
templates/layout.html Прегледај датотеку

@@ -33,6 +33,9 @@
</div>
</div>

= block after_body
= endblock

<div id="footer">
<a href="/">home</a>
<a href="/about">about</a>


Loading…
Откажи
Сачувај