mirrors/mycorrhiza
1
0
Fork 0
mirror of https://github.com/osmarks/mycorrhiza.git synced 2025-01-21 07:46:52 +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;
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;
}

21
static/shortcuts.js
View File

@ -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();