update hotkey help dialog a bit

classes/backend.php

@@ -31,12 +31,13 @@ class Backend extends Handler {
 			__("Other interface tips are available in the Tiny Tiny RSS wiki.") .
 			"</a>");
 
-		print "<ul class='helpKbList' id='helpKbList'>";
+		print "<ul class='panel panel-scrollable hotkeys-help' style='height : 300px'>";
 
 		print "<h2>" . __("Keyboard Shortcuts") . "</h2>";
 
 		foreach ($info as $section => $hotkeys) {
 
+			print "<li><hr></li>";
 			print "<li><h3>" . $section . "</h3></li>";
 
 			foreach ($hotkeys as $action => $description) {
@@ -72,8 +73,8 @@ class Backend extends Handler {
 						}
 
 						print "<li>";
-					 	print "<span class='hksequence'>$sequence</span>";
-					  	print $description;
+					 	print "<div class='hk'><code>$sequence</code></div>";
+					  	print "<div class='desc'>$description</div>";
 						print "</li>";
 					}
 				}

css/default.css

@@ -865,23 +865,18 @@ body.ttrss_main ul#filterDlg_Matches li .dijitCheckBox,
 body.ttrss_main ul#filterDlg_Actions li .dijitCheckBox {
   margin-right: 4px;
 }
-body.ttrss_main ul.helpKbList {
-  max-height: 300px;
-  overflow: auto;
-  list-style-type: none;
-  border: 1px solid #dddddd;
-  margin: 0px 0px 5px 0px;
-  padding: 5px;
+body.ttrss_main ul.hotkeys-help li {
+  display: flex;
 }
-body.ttrss_main ul.helpKbList span.hksequence {
-  width: 6em;
-  margin-left: 20px;
+body.ttrss_main ul.hotkeys-help li.desc {
+  flex-grow: 2;
+}
+body.ttrss_main ul.hotkeys-help .hk {
   color: #257aa7;
-  font-weight: bold;
-  display: inline-block;
+  width: 100px;
 }
-body.ttrss_main ul.helpKbList h2 {
-  margin-top: 0px;
+body.ttrss_main ul.hotkeys-help h3 {
+  margin: 8px 0px;
 }
 body.ttrss_main select.attachments {
   display: block;

css/tt-rss.less

@@ -1013,24 +1013,22 @@ body.ttrss_main {
 		margin-right: 4px;
 	}
 
-	ul.helpKbList {
-		max-height : 300px;
-		overflow : auto;
-		list-style-type : none;
-		border : 1px solid @border-default;
-		margin : 0px 0px 5px 0px;
-		padding : 5px;
+	ul.hotkeys-help {
+		li {
+			display : flex;
+		}
+
+		li.desc {
+			flex-grow : 2;
+		}
 
-		span.hksequence {
-			width : 6em;
-			margin-left : 20px;
+		.hk {
 			color : @color-accent;
-			font-weight : bold;
-			display : inline-block;
+			width : 100px;
 		}
 
-		h2 {
-			margin-top : 0px;
+		h3 {
+			margin : 8px 0px;
 		}
 	}
 

themes/night.css

@@ -865,23 +865,18 @@ body.ttrss_main ul#filterDlg_Matches li .dijitCheckBox,
 body.ttrss_main ul#filterDlg_Actions li .dijitCheckBox {
   margin-right: 4px;
 }
-body.ttrss_main ul.helpKbList {
-  max-height: 300px;
-  overflow: auto;
-  list-style-type: none;
-  border: 1px solid #222222;
-  margin: 0px 0px 5px 0px;
-  padding: 5px;
+body.ttrss_main ul.hotkeys-help li {
+  display: flex;
 }
-body.ttrss_main ul.helpKbList span.hksequence {
-  width: 6em;
-  margin-left: 20px;
+body.ttrss_main ul.hotkeys-help li.desc {
+  flex-grow: 2;
+}
+body.ttrss_main ul.hotkeys-help .hk {
   color: #b87d2c;
-  font-weight: bold;
-  display: inline-block;
+  width: 100px;
 }
-body.ttrss_main ul.helpKbList h2 {
-  margin-top: 0px;
+body.ttrss_main ul.hotkeys-help h3 {
+  margin: 8px 0px;
 }
 body.ttrss_main select.attachments {
   display: block;