mirrors/mycorrhiza
1
0
Fork 0
mirror of https://github.com/osmarks/mycorrhiza.git synced 2025-02-01 11:59:08 +00:00
Code Issues Releases Wiki Activity

Split shortcuts help into columns if enough space

Browse Source
This commit is contained in:
handlerug 2021-06-14 10:40:15 +07:00
parent 50dfabe279
commit 6120e3b27f
No known key found for this signature in database
GPG Key ID: 38009F0605051491
2 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
static/default.css
View File

@ -332,7 +332,7 @@ kbd {
position: relative; position: relative;
width: 100%; width: 100%;
max-width: 400px; max-width: 700px;
margin: 96px auto; margin: 96px auto;
padding: 24px; padding: 24px;
@ -341,6 +341,10 @@ kbd {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
} }
.dialog__header {
grid-column: 1 / -1;
}
.dialog__title { .dialog__title {
margin: 0; margin: 0;
font-size: 1.5em; font-size: 1.5em;
@ -364,17 +368,23 @@ kbd {
opacity: .7; opacity: .7;
} }
.shortcuts-modal {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-column-gap: 32px;
}
.shortcuts-group-heading { .shortcuts-group-heading {
margin: 1em 0 0.5em; margin: 1em 0 0.5em;
font-size: 1.2em; font-size: 1.2em;
} }
.shortcuts-group { .shortcuts-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.shortcuts-group + .shortcuts-group { .shortcuts-list + .shortcuts-list {
margin-top: 1.5em; margin-top: 1.5em;
} }

21
static/shortcuts.js
View File

@ -220,16 +220,26 @@
closeButton.setAttribute('aria-label', 'Close this dialog'); closeButton.setAttribute('aria-label', 'Close this dialog');
dialogHeader.appendChild(closeButton); dialogHeader.appendChild(closeButton);
let shortcutsGroupTemplate = document.createElement('div');
shortcutsGroupTemplate.className = 'shortcuts-group';
let shortcutsGroup = shortcutsGroupTemplate.cloneNode();
for (let item of allShortcuts) { for (let item of allShortcuts) {
if (item.description && !item.shortcut) { if (item.description && !item.shortcut) {
if (shortcutsGroup.children.length > 0) {
dialog.appendChild(shortcutsGroup);
shortcutsGroup = shortcutsGroupTemplate.cloneNode();
}
let heading = document.createElement('h2'); let heading = document.createElement('h2');
heading.className = 'shortcuts-group-heading'; heading.className = 'shortcuts-group-heading';
heading.textContent = item.description; heading.textContent = item.description;
dialog.appendChild(heading); shortcutsGroup.appendChild(heading);
} else { } else {
let list = document.createElement('ul'); let list = document.createElement('ul');
list.className = 'shortcuts-group'; list.className = 'shortcuts-list';
for (let shortcut of item) { for (let shortcut of item) {
let listItem = document.createElement('li'); let listItem = document.createElement('li');
@ -249,10 +259,15 @@
listItem.appendChild(shortcutColumn); listItem.appendChild(shortcutColumn);
} }
dialog.appendChild(list); shortcutsGroup.appendChild(list);
} }
} }
if (shortcutsGroup.children.length > 0) {
dialog.appendChild(shortcutsGroup);
shortcutsGroup = shortcutsGroupTemplate.cloneNode();
}
let handleClose = (event) => { let handleClose = (event) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();