help centered again, help rewritten

This commit is contained in:
Iam Naughton Phier 2015-02-21 17:04:28 +02:00
parent b1051c748f
commit 9d1d6c9f6f
3 changed files with 30 additions and 23 deletions

View file

@ -17,31 +17,33 @@
<meta charset='UTF-8' /> <meta charset='UTF-8' />
</head> </head>
<body> <body>
<h1 id='top' class='hidden'>Sahli Debug</h1>
<div id="outbox"> <div id="outbox">
<div id='sahliviewer'><hr></div> <div id='sahliviewer'><hr></div>
</div> </div>
<div class="help hidden"> <div align="center">
<h1>Sahli Key Help</h1> <div class="help hidden">
<ul class="keylist"> <h1>Sahli Key Help</h1>
<li><span class="key">F</span> Fullscreen</li> <ul class="keylist">
<li><span class="key">Space</span> Next Picture</li> <li><span class="key">F</span> Fullscreen</li>
<li><span class="key">S</span> Begin scroll | Reverse scroll direction</li> <li><span class="key">Space</span> Next Picture</li>
<li><span class="key">T</span> Ascii text rendered as text/graphics toggle</li> <li><span class="key">S</span> Start or Reverse scrolling</li>
<li><span class="key">U</span> Show picture info</li> <li><span class="key">X</span> Begin scrolling downward</li>
<li><span class="key">1</span><span class="key">2</span><span class="key">3</span><span class="key">4</span><span class="key">5</span> Alter scrollspeed (slow -> fast)</li> <li><span class="key">W</span> Begin scrolling upward</li>
<li><span class="key">.</span><span class="key">,</span> Double / Halve scrollspeed</li> <li><span class="key">A</span> Stop scrolling</li>
<li class='nodot'><b>Scrollspeed doesn't change while scrolling.</b></li>
<li><span class="key">I</span><span class="key">K</span> Double / Halve image size </li> <li><span class="key">T</span> Jump to Top of picture (resets zoom)</li>
<li><span class="key">O</span><span class="key">L</span> Full browser width / height</li> <li><span class="key">B</span> Jump to Bottom</li>
<li><span class="key">P</span> Reset size to original</li> <li><span class="key">1</span><span class="key">2</span><span class="key">3</span><span class="key">4</span><span class="key">5</span> Alter scrollspeed (fast -> slow)</li>
<li><span class="key">Backspace</span><span class="key">D</span> Cancel scrolling</li> <li><span class="key">Z</span> Zoom full width</li>
<li><span class="key">Up</span><span class="key">Down</span><span class="key">Pageup</span><span class="key">Pagedown</span> Move about by line/page</li> <li><span class="key">E</span><span class="key">R</span> Zoom in steps larger/smaller</li>
<li><span class="key">Home</span><span class="key">End</span> Move to top/bottom</li> <li><span class="key">C</span> "panel" view toggle</li>
<li><span class="key">H</span> This help (: <span class="key">Esc</span> Cancel fullscreen</li> <li><span class="key">Up</span><span class="key">Down</span><span class="key">Pageup</span><span class="key">Pagedown</span> Move about by line/page</li>
<li class='nodot'><b>Tab also works for "info" but browsers hate it, so use 'U'</b></li> <li><span class="key">Home</span><span class="key">End</span> Move to top/bottom (no zoom reset)</li>
</ul> <li><span class="key">H</span> This help (: <span class="key">Esc</span> Cancel fullscreen</li>
<li class='nodot'><b>Tab also works for "info" but browsers hate it, so use 'U'</b></li>
</ul>
</div>
</div> </div>
<div class="infobox hidden"> <div class="infobox hidden">

View file

@ -275,6 +275,9 @@ class @Sahli
@scroll_speed = 4 @scroll_speed = 4
when @keycode '5' when @keycode '5'
@changespeed 5 @changespeed 5
when @keycode 'h'
$('.help').css {'left':'33%'}
$('.help').toggle 'fast'
else else
console.log ev.which console.log ev.which
) )

View file

@ -44,7 +44,8 @@ h6 {
.help { .help {
position: fixed; position: fixed;
top: 1em; top: 1em;
left: 50em; left: '33%';
text-align: left;
background-color: lightgrey; background-color: lightgrey;
border: outset darkgray; border: outset darkgray;
-webkit-border-radius: 8; -webkit-border-radius: 8;
@ -52,6 +53,7 @@ h6 {
border-radius: 8; border-radius: 8;
font-family: topaz1200,mOsOul, Consolas, monospace; font-family: topaz1200,mOsOul, Consolas, monospace;
opacity: .85; opacity: .85;
width: '33%'
} }
.keylist { .keylist {
@ -200,4 +202,4 @@ p.infobox {
.blockzone, .pcansifont { .blockzone, .pcansifont {
font-family: 'blockzone'; font-family: 'blockzone';
text-align: left; text-align: left;
} }