From 14281de2629b068b4bebbe1eb7a51aa93052d384 Mon Sep 17 00:00:00 2001
From: Steve Howell <steve@zulip.com>
Date: Tue, 18 Feb 2014 11:40:18 -0500
Subject: [PATCH] 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)
---
 static/styles/zulip.css                  |   7 +-
 templates/zerver/keyboard_shortcuts.html | 202 ++++++++++++-----------
 2 files changed, 109 insertions(+), 100 deletions(-)

diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index d9535c3b87..5409288971 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -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 {
diff --git a/templates/zerver/keyboard_shortcuts.html b/templates/zerver/keyboard_shortcuts.html
index c821eb7314..ed7afd0f64 100644
--- a/templates/zerver/keyboard_shortcuts.html
+++ b/templates/zerver/keyboard_shortcuts.html
@@ -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>