Merge pull request thelounge#941 from thelounge/astorije/help-window

Help window with supported commands and shortcuts
matburnham · Mar 11, 2017 · d340810 · d340810
2 parents 530c495 + 9163c73
commit d340810
Show file tree

Hide file tree

Showing 3 changed files with 426 additions and 30 deletions.
diff --git a/client/css/style.css b/client/css/style.css
@@ -57,7 +57,8 @@ a:hover {
 }
 
 h1,
-h2 {
+h2,
+h3 {
 	font: inherit;
 	line-height: inherit;
 	margin: 0;
@@ -79,6 +80,33 @@ button {
 	padding: 0;
 }
 
+code,
+kbd {
+	font-family: Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
+}
+
+code {
+	font-size: 12px;
+	padding: 2px 4px;
+	color: #e74c3c;
+	background-color: #f9f2f4;
+	border-radius: 2px;
+}
+
+kbd {
+	display: inline-block;
+	font-size: 11px;
+	line-height: 10px;
+	padding: 3px 5px;
+	color: #555;
+	vertical-align: middle;
+	background-color: #fcfcfc;
+	border: solid 1px #ccc;
+	border-bottom-color: #bbb;
+	border-radius: 3px;
+	box-shadow: inset 0 -1px 0 #bbb;
+}
+
 .btn {
 	border: 2px solid #84ce88;
 	border-radius: 3px;
@@ -185,6 +213,7 @@ button {
 #footer .sign-in:before { content: "\f023"; /* http://fontawesome.io/icon/lock/ */ }
 #footer .connect:before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
 #footer .settings:before { content: "\f013"; /* http://fontawesome.io/icon/cog/ */ }
+#footer .help:before { content: "\f059"; /* http://fontawesome.io/icon/question/ */ }
 #footer .sign-out:before { content: "\f011"; /* http://fontawesome.io/icon/power-off/ */ }
 
 #form #cycle-nicks:before { content: "\f007"; /* http://fontawesome.io/icon/user/ */ }
@@ -656,6 +685,12 @@ button {
 	padding-bottom: 7px;
 }
 
+#windows .window h3 {
+	color: #7f8c8d;
+	font-size: 18px;
+	margin: 20px 0 10px;
+}
+
 #windows .active {
 	display: block;
 }
@@ -1254,15 +1289,10 @@ button {
 	margin: 4px 10px 0 0;
 }
 
-#settings .about,
 #settings #play {
 	color: #7f8c8d;
 }
 
-#settings .about small {
-	margin-left: 2px;
-}
-
 #settings #play {
 	font-size: 14px;
 	transition: opacity .2s;
@@ -1272,12 +1302,6 @@ button {
 	opacity: .8;
 }
 
-#settings .about {
-	font-size: 14px;
-	padding-top: 2px;
-	line-height: 1.8;
-}
-
 #settings #change-password .error,
 #settings #change-password .success {
 	margin-bottom: 1em;
@@ -1296,6 +1320,32 @@ button {
 	margin-top: .2em;
 }
 
+#help .help-item {
+	display: table-row;
+}
+
+#help .help-item .subject,
+#help .help-item .description {
+	display: table-cell;
+	padding-bottom: 15px;
+}
+
+#help .help-item .subject {
+	white-space: nowrap;
+	padding-right: 10px;
+	min-width: 150px;
+}
+
+#help .help-item .description p {
+	font-size: 14px;
+	margin-bottom: 0;
+}
+
+#help .about {
+	font-size: 14px;
+	line-height: 1.8;
+}
+
 #form {
 	background: #eee;
 	border-top: 1px solid #ddd;
@@ -1813,6 +1863,15 @@ button {
 	#chat .unread-marker {
 		margin: 0;
 	}
+
+	#help .help-item .subject {
+		display: inline-block;
+		padding-bottom: 4px;
+	}
+
+	#help .help-item .description {
+		display: block;
+	}
 }
 
 ::-webkit-scrollbar {