#15 Hotkeys

Author: pkafel

css/style.css

@@ -37,6 +37,33 @@
     resize: vertical;
 }
 
-.min-height-200 {
-    min-height:200px;
+.min-height-400 {
+    min-height:400px;
 }
+
+.hide-when-small{
+    vertical-align: middle;display: table-cell;
+}
+
+@media(max-width: 800px){
+    .hide-when-small {
+        display: none;
+    }
+}
+
+.shortcut {
+    margin-left: 20px;
+    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+    font-style: italic;
+    color:#428BCA;
+    font-size: 12px;
+}
+
+.shortcut-description {
+    margin-left: 5px;
+    font-size: 12px;
+}
+
+.shortcut-title {
+    font-size: 13px;
+}

index.html

@@ -42,38 +42,43 @@ <h1>
             <form id="compare-form">
                 <div class="row clearfix">
                     <div class="col-md-6 column form-group">
-                        <label class="control-label" for="json1">First json:</label>
-                        <textarea id="json1" name="json1" class="form-control vresize min-height-200" rows="12">{"a": 1}</textarea>
+                        <label class="control-label" for="json1">First JSON</label>
+                        <textarea id="json1" name="json1" class="form-control vresize min-height-400" rows="12">{"a": 1}</textarea>
                     </div>
                     <div class="col-md-6 column form-group">
-                        <label class="control-label" for="json2">Second json:</label>
-                        <textarea id="json2" name="json2" class="form-control vresize min-height-200" rows="12">{"a": "1"}</textarea>
+                        <label class="control-label" for="json2">Second JSON</label>
+                        <textarea id="json2" name="json2" class="form-control vresize min-height-400" rows="12">{"a": "1"}</textarea>
                     </div>
                 </div>
-                    <div class="pull-right btn-toolbar">
-                        <div class="btn-group">
-                            <button class="btn btn-default" type="button">
-                              <span id="strategy">Compare by Value</span>
-                            </button>
-                            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                              <span class="caret"></span>
-                              <span class="sr-only">dupa</span>
-                            </button>
-                            <ul id="strategy-list" class="dropdown-menu">
-                                <li value='0'><a href="#">Compare by Value</a></li>
-                                <li value='1'><a href="#">Compare by Key</a></li>
-                            </ul>
-                        </div>
-                        <div class="btn-group">
-                          <button type="submit" class="btn btn-primary">Submit</button>
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="well well-sm" style="display: table;vertical-align: middle;width: 100%;">
+                            <span class="hide-when-small">
+                                <span class="shortcut-title">Shortcuts</span>
+                                <span class="shortcut">ctrl+m</span>
+                                <span class="shortcut-description">change mode</span>
+                                <span class="shortcut">ctrl+enter</span>
+                                <span class="shortcut-description">compare JSONs</span>
+                            </span>
+                            <div class="btn-toolbar pull-right" style="vertical-align: middle;display: table-cell">
+                                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
+                                    <span id="strategy">Compare by Key and Value</span>
+                                    <span class="caret"></span></button>
+                                <ul id="strategy-list" class="dropdown-menu">
+                                    <li value='0'><a href="#">Compare by Key and Value</a></li>
+                                    <li value='1'><a href="#">Compare by Key</a></li>
+                                </ul>
+                                <button type="submit" class="btn btn-primary" style="vertical-align: middle;display: table-cell">Submit</button>
+                            </div>
                         </div>
                     </div>
+                </div>
             </form>
         </div>
     </div>
     <div id="diff-rep-container" class="row clearfix">
         <div class="col-md-12 column">
-            <label for="diff-rep">Result:</label>
+            <label for="diff-rep">Result</label>
             <div id="diff-rep" class="panel-default"></div>
             <button id="back-button" class="btn btn-default pull-right">Back</button>
         </div>
@@ -84,7 +89,6 @@ <h1>
         <div class="row">
             <div class="col-md-12">
                 <hr/>
-                <a href="" class="pull-right">Shortcuts</a>
                 <p>All rights reserved @ 2015</p>
             </div>
         </div>

js/index.js

@@ -105,7 +105,7 @@ ModeDropdown = {
             $('#strategy').text('Compare by Key');
             $('#strategy').val('1');
         } else {
-            $('#strategy').text('Compare by Value');
+            $('#strategy').text('Compare by Key and Value');
             $('#strategy').val('0');
         }
     },
@@ -132,8 +132,8 @@ BackButton = {
 
 function setHotkeys() {
     $(document).bind('keydown', 'ctrl+return', function(e) {
-        submitForm(e);
-        $("#back-button").focus();
+        ComparisonForms._submitForm(e);
+        BackButton.backButton().focus();
     });
     $(document).bind('keydown', 'ctrl+m', function(e) {
         e.preventDefault();