ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add "Help" dialog which shows available keyboard shortcuts

Browse source 
Dialog can be toggled via button in "About" or via keyboard shortcut "?"
This commit is contained in:
Marcus Jaschen 2023-06-11 09:21:13 +02:00
parent bdb7d1f650
commit 4c276428a6
3 changed files with 235 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

40
css/style.css
View file

@ -527,6 +527,46 @@ button.deactivate-beeline-active.disabled {
margin: -6px 0 6px 20px;
}
/* help dialog */
ul.keyboard-shortcuts {
margin: 0;
padding: 0;
border: 1px solid #ccc;
border-radius: 6px;
}
ul.keyboard-shortcuts li {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0.4rem 1em;
font-size: 0.85rem;
border-top: 1px solid #ccc;
}
ul.keyboard-shortcuts li:first-of-type {
border-top: transparent;
}
.keyboard-shortcuts-key {
margin-left: 8px;
white-space: nowrap;
}
kbd {
display: inline-block;
padding: 3px 5px;
border: solid 1px rgba(175, 184, 193, 0.2);
border-radius: 6px;
line-height: 10px;
vertical-align: middle;
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
color: #1f1f1f;
background-color: rgba(0, 123, 255, 0.07);
box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2);
}
/* Share Dialog */
#share-qrcode-img img {