Mastodon
/
Pinafore-Web-Client-Frontend
mirror of https://github.com/nolanlawson/pinafore
1
0
Fork 0
Code Issues Releases Wiki Activity

perf: reduce size of ShortcutHelpInfo.html (#1068)

This commit is contained in:
Nolan Lawson 2019-03-02 20:06:56 -08:00 committed by GitHub
parent 880bc7a38a
commit 1f5606c65e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/routes/_components/ShortcutHelpInfo.html
View File

@ -1,4 +1,7 @@
<div class="shortcut-help-info {inDialog ? 'in-dialog' : ''}"> <div class="shortcut-help-info {inDialog ? 'in-dialog' : ''}">
<!-- Svelte makes this file kind of ridiculously large for a static page (~17kB),
so just use raw HTML here to make it smaller -->
{@html `
<h2>Global</h2> <h2>Global</h2>
<div class="hotkey-group"> <div class="hotkey-group">
<ul> <ul>
@ -35,6 +38,7 @@
<li><kbd>&#8592;</kbd> - <kbd>&#8594;</kbd> to go to next or previous</li> <li><kbd>&#8592;</kbd> - <kbd>&#8594;</kbd> to go to next or previous</li>
</ul> </ul>
</div> </div>
`}
</div> </div>
<style> <style>
.shortcut-help-info { .shortcut-help-info {
@ -45,23 +49,23 @@
.shortcut-help-info::-webkit-scrollbar { .shortcut-help-info::-webkit-scrollbar {
display: none; display: none;
} }
li { :global(.shortcut-help-info li) {
list-style-type: none; list-style-type: none;
} }
.in-dialog li { :global(.shortcut-help-info.in-dialog li) {
color: var(--muted-modal-text); color: var(--muted-modal-text);
font-size: 0.9em; font-size: 0.9em;
} }
.in-dialog h2 { :global(.shortcut-help-info.in-dialog h2) {
color: var(--muted-modal-text); color: var(--muted-modal-text);
} }
.hotkey-group { :global(.shortcut-help-info.hotkey-group) {
margin: 0 0 10px 10px; margin: 0 0 10px 10px;
} }
.shortcut-help-info h2 { :global(.shortcut-help-info h2) {
margin: 10px 0; margin: 10px 0;
} }
kbd { :global(.shortcut-help-info kbd) {
color: #333; color: #333;
display: inline-block; display: inline-block;
border: 1px solid #333; border: 1px solid #333;