Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix brittle layout for "Keyboard shortcuts" help. 

Adding one row to the Navigation table made the
Keyboard shortcuts dialog look ridiculous, and it
was caused by a design based around float-left-ing
that broke down when the size of the "Navigation" box
was bigger than the "Composing messages" box.

Now we use a div to enclose the top two boxes in
the modal.

(imported from commit 90288ec288d4cf3d50ed7f5bcb48c8bb3d033f19)
This commit is contained in:
Steve Howell 2014-02-18 11:40:18 -05:00
parent 2c6d7e8e18
commit 14281de262
2 changed files with 109 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
static/styles/zulip.css
View File

@ -2105,10 +2105,15 @@ div.floating_recipient {
}
.hotkeys_table {
float: left;
width: 245px;
margin-right: 10px;
font-size: 90%;
display: inline-block;
vertical-align: top;
}
.hotkeys_table th {
width: 245px;
}
.hotkeys_table .hotkey {

202
templates/zerver/keyboard_shortcuts.html
View File

@ -5,117 +5,121 @@
<h3 id="keyboard-shortcuts-label">Keyboard shortcuts</h3>
</div>
<div class="modal-body">
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<div>
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<tr>
<th colspan="2">Navigation</th>
</tr>
</thead>
<tr>
<th colspan="2">Navigation</th>
<td class="hotkey">/</td>
<td class="definition">Initiate a search</td>
</tr>
</thead>
<tr>
<td class="hotkey">/</td>
<td class="definition">Initiate a search</td>
</tr>
<tr>
<td class="hotkey">q</td>
<td class="definition">Search people</td>
</tr>
<tr>
<td class="hotkey">Up or k</td>
<td class="definition">Previous message</td>
</tr>
<tr>
<td class="hotkey">Down or j</td>
<td class="definition">Next message</td>
</tr>
<tr>
<td class="hotkey">PgUp, K</td>
<td class="definition">Scroll up</td>
</tr>
<tr>
<td class="hotkey">PgDn, J, Spacebar</td>
<td class="definition">Scroll down</td>
</tr>
<tr>
<td class="hotkey">End</td>
<td class="definition">Last message</td>
</tr>
</table>
<tr>
<td class="hotkey">q</td>
<td class="definition">Search people</td>
</tr>
<tr>
<td class="hotkey">Up or k</td>
<td class="definition">Previous message</td>
</tr>
<tr>
<td class="hotkey">Down or j</td>
<td class="definition">Next message</td>
</tr>
<tr>
<td class="hotkey">PgUp, K</td>
<td class="definition">Scroll up</td>
</tr>
<tr>
<td class="hotkey">PgDn, J, Spacebar</td>
<td class="definition">Scroll down</td>
</tr>
<tr>
<td class="hotkey">End</td>
<td class="definition">Last message</td>
</tr>
</table>
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<tr>
<th colspan="2">Composing messages</th>
</tr>
</thead>
<tr>
<th colspan="2">Composing messages</th>
<td class="hotkey">Enter or r</td>
<td class="definition">Reply to message</td>
</tr>
</thead>
<tr>
<td class="hotkey">Enter or r</td>
<td class="definition">Reply to message</td>
</tr>
<tr>
<td class="hotkey">R</td>
<td class="definition">Reply to author</td>
</tr>
<tr>
<td class="hotkey">c</td>
<td class="definition">New stream message</td>
</tr>
<tr>
<td class="hotkey">C</td>
<td class="definition">New private message</td>
</tr>
<tr>
<td class="hotkey">Tab then Enter</td>
<td class="definition">Send message</td>
</tr>
<tr>
<td class="hotkey">Esc</td>
<td class="definition">Cancel compose</td>
</tr>
</table>
<tr>
<td class="hotkey">R</td>
<td class="definition">Reply to author</td>
</tr>
<tr>
<td class="hotkey">c</td>
<td class="definition">New stream message</td>
</tr>
<tr>
<td class="hotkey">C</td>
<td class="definition">New private message</td>
</tr>
<tr>
<td class="hotkey">Tab then Enter</td>
<td class="definition">Send message</td>
</tr>
<tr>
<td class="hotkey">Esc</td>
<td class="definition">Cancel compose</td>
</tr>
</table>
</div>
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<div>
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<tr>
<th colspan="2">Narrowing</th>
</tr>
</thead>
<tr>
<th colspan="2">Narrowing</th>
<td class="hotkey">s</td>
<td class="definition">Narrow by stream</td>
</tr>
</thead>
<tr>
<td class="hotkey">s</td>
<td class="definition">Narrow by stream</td>
</tr>
<tr>
<td class="hotkey">S</td>
<td class="definition">Narrow by topic</td>
<tr>
<td class="hotkey">S</td>
<td class="definition">Narrow by topic</td>
</tr>
<tr>
<td class="hotkey">v</td>
<td class="definition">Narrow to all private messages</td>
</tr>
<tr>
<td class="hotkey">v</td>
<td class="definition">Narrow to all private messages</td>
</tr>
<tr>
<td class="hotkey">Esc</td>
<td class="definition">Return to home view</td>
</tr>
</table>
<tr>
<td class="hotkey">Esc</td>
<td class="definition">Return to home view</td>
</tr>
</table>
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<tr>
<th colspan="2">Menus</th>
</tr>
</thead>
<tr>
<th colspan="2">Menus</th>
<td class="hotkey">i</td>
<td class="definition">Open message actions menu</td>
</tr>
</thead>
<tr>
<td class="hotkey">i</td>
<td class="definition">Open message actions menu</td>
</tr>
<tr id="edit-message-hotkey-help">
<td class="hotkey">i then Enter</td>
<td class="definition">Edit a message you sent</td>
</tr>
<tr>
<td class="hotkey">?</td>
<td class="definition">Show these keyboard shortcuts</td>
</tr>
</table>
<tr id="edit-message-hotkey-help">
<td class="hotkey">i then Enter</td>
<td class="definition">Edit a message you sent</td>
</tr>
<tr>
<td class="hotkey">?</td>
<td class="definition">Show these keyboard shortcuts</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>