From 6120e3b27fd4b39d0d58b890cc7c9dd8144fad09 Mon Sep 17 00:00:00 2001
From: handlerug <umar@handlerug.me>
Date: Mon, 14 Jun 2021 10:40:15 +0700
Subject: [PATCH] Split shortcuts help into columns if enough space

---
 static/default.css  | 16 +++++++++++++---
 static/shortcuts.js | 21 ++++++++++++++++++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/static/default.css b/static/default.css
index c148758..b5ccf70 100644
--- a/static/default.css
+++ b/static/default.css
@@ -332,7 +332,7 @@ kbd {
 	position: relative;
 
 	width: 100%;
-	max-width: 400px;
+	max-width: 700px;
 	margin: 96px auto;
 	padding: 24px;
 
@@ -341,6 +341,10 @@ kbd {
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 }
 
+.dialog__header {
+	grid-column: 1 / -1;
+}
+
 .dialog__title {
 	margin: 0;
 	font-size: 1.5em;
@@ -364,17 +368,23 @@ kbd {
 	opacity: .7;
 }
 
+.shortcuts-modal {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-column-gap: 32px;
+}
+
 .shortcuts-group-heading {
 	margin: 1em 0 0.5em;
 	font-size: 1.2em;
 }
 
-.shortcuts-group {
+.shortcuts-list {
 	margin: 0;
 	padding: 0;
 }
 
-.shortcuts-group + .shortcuts-group {
+.shortcuts-list + .shortcuts-list {
 	margin-top: 1.5em;
 }
 
diff --git a/static/shortcuts.js b/static/shortcuts.js
index 35fc941..a5d2333 100644
--- a/static/shortcuts.js
+++ b/static/shortcuts.js
@@ -220,16 +220,26 @@
             closeButton.setAttribute('aria-label', 'Close this dialog');
             dialogHeader.appendChild(closeButton);
 
+            let shortcutsGroupTemplate = document.createElement('div');
+            shortcutsGroupTemplate.className = 'shortcuts-group';
+
+            let shortcutsGroup = shortcutsGroupTemplate.cloneNode();
+
             for (let item of allShortcuts) {
                 if (item.description && !item.shortcut) {
+                    if (shortcutsGroup.children.length > 0) {
+                        dialog.appendChild(shortcutsGroup);
+                        shortcutsGroup = shortcutsGroupTemplate.cloneNode();
+                    }
+
                     let heading = document.createElement('h2');
                     heading.className = 'shortcuts-group-heading';
                     heading.textContent = item.description;
-                    dialog.appendChild(heading);
+                    shortcutsGroup.appendChild(heading);
 
                 } else {
                     let list = document.createElement('ul');
-                    list.className = 'shortcuts-group';
+                    list.className = 'shortcuts-list';
 
                     for (let shortcut of item) {
                         let listItem = document.createElement('li');
@@ -249,10 +259,15 @@
                         listItem.appendChild(shortcutColumn);
                     }
 
-                    dialog.appendChild(list);
+                    shortcutsGroup.appendChild(list);
                 }
             }
 
+            if (shortcutsGroup.children.length > 0) {
+                dialog.appendChild(shortcutsGroup);
+                shortcutsGroup = shortcutsGroupTemplate.cloneNode();
+            }
+
             let handleClose = (event) => {
                 event.preventDefault();
                 event.stopPropagation();