FossilRepo

Add keyboard shortcuts help modal (press ? to toggle)

lmata 2026-04-07 00:35 trunk
Commit da6291744d98e5f5ad85451d2062f1e49c28453bef9a4d4f6eeb820844dfdf82
Parent 2d30fd873a2031a…
2 files changed +1 +37
~ templates/base.html + templates/fossil/_keyboard_help.html
M templates/base.html
+1
--- templates/base.html
+++ templates/base.html
@@ -153,7 +153,8 @@
153153
 {% block content %}{% endblock %}
154154
 </div>
155155
 </main>
156156
 </div>
157157
 </div>
158
+ {% include "fossil/_keyboard_help.html" %}
158159
 </body>
159160
 </html>
160161
161162
ADDED templates/fossil/_keyboard_help.html
--- templates/base.html
+++ templates/base.html
@@ -153,7 +153,8 @@
153 {% block content %}{% endblock %}
154 </div>
155 </main>
156 </div>
157 </div>
 
158 </body>
159 </html>
160
161 DDED templates/fossil/_keyboard_help.html
--- templates/base.html
+++ templates/base.html
@@ -153,7 +153,8 @@
153 {% block content %}{% endblock %}
154 </div>
155 </main>
156 </div>
157 </div>
158 {% include "fossil/_keyboard_help.html" %}
159 </body>
160 </html>
161
162 DDED templates/fossil/_keyboard_help.html
A templates/fossil/_keyboard_help.html
+37
--- a/templates/fossil/_keyboard_help.html
+++ b/templates/fossil/_keyboard_help.html
@@ -0,0 +1,37 @@
1
+<!-- Keyboard shortcuts help modal -->
2
+<div x-data="{ show: false }" @keydown.shift.?.window="if (document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') show = !show" @keydown.escape.window="show = false">
3
+ <div x-show="show" x-transition class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click="show = false">
4
+ <div class="rounded-lg bg-gray-800 border border-gray-700 shadow-xl p-6 max-w-md w-full" @click.stop>
5
+ <h3 class="text-lg font-semibold text-gray-100 mb-4">Keyboard Shortcuts</h3>
6
+ <div class="space-y-2 text-sm">
7
+ <div class="flex items-center justify-between">
8
+ <span class="text-gray-400">Open search</span>
9
+ <kbd class="px-2 py-0.5 rounded bg-gray-700 text-gray-300 text-xs font-mono">/</kbd>
10
+ </div>
11
+ <div class="flex items-center justify-between">
12
+ <span class="text-gray-400">Next entry (timeline)</span>
13
+ <kbd class="px-2 py-0.5 rounded bg-gray-700 text-gray-300 text-xs font-mono">j</kbd>
14
+ </div>
15
+ <div class="flex items-center justify-between">
16
+ <span class="text-gray-400">Previous entry (timeline)</span>
17
+ <kbd class="px-2 py-0.5 rounded bg-gray-700 text-gray-300 text-xs font-mono">k</kbd>
18
+ </div>
19
+ <div class="flex items-center justify-between">
20
+ <span class="text-gray-400">Open focused entry</span>
21
+ <kbd class="px-2 py-0.5 rounded bg-gray-700 text-gray-300 text-xs font-mono">Enter</kbd>
22
+ </div>
23
+ <div class="flex items-center justify-between">
24
+ <span class="text-gray-400">Show this help</span>
25
+ <kbd class="px-2 py-0.5 rounded bg-gray-700 text-gray-300 text-xs font-mono">?</kbd>
26
+ </div>
27
+ <div class="flex items-center justify-between">
28
+ <span class="text-gray-400">Toggle theme</span>
29
+ <span class="text-gray-500 text-xs">Top nav button</span>
30
+ </div>
31
+ </div>
32
+ <div class="mt-4 text-right">
33
+ <button @click="show = false" class="text-sm text-gray-500 hover:text-white">Close</button>
34
+ </div>
35
+ </div>
36
+ </div>
37
+</div>
--- a/templates/fossil/_keyboard_help.html
+++ b/templates/fossil/_keyboard_help.html
@@ -0,0 +1,37 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
--- a/templates/fossil/_keyboard_help.html
+++ b/templates/fossil/_keyboard_help.html
@@ -0,0 +1,37 @@
1 <!-- Keyboard shortcuts help modal -->
2 <div x-data="{ show: false }" @keydown.shift.?.window="if (document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') show = !show" @keydown.escape.window="show = false">
3 <div x-show="show" x-transition class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click="show = false">
4 <div class="rounded-lg bg-gray-800 border border-gray-700 shadow-xl p-6 max-w-md w-full" @click.stop>
5 <h3 class="text-lg font-semibold text-gray-100 mb-4">Keyboard Shortcuts</h3>
6 <div class="space-y-2 text-sm">
7 <div class="flex items-center justify-between">
8 <span class="text-gray-400">Open search</span>
9 <kbd class="px-2 py-0.5 rounded bg-gray-700 text-gray-300 text-xs font-mono">/</kbd>
10 </div>
11 <div class="flex items-center justify-between">
12 <span class="text-gray-400">Next entry (timeline)</span>
13 <kbd class="px-2 py-0.5 rounded bg-gray-700 text-gray-300 text-xs font-mono">j</kbd>
14 </div>
15 <div class="flex items-center justify-between">
16 <span class="text-gray-400">Previous entry (timeline)</span>
17 <kbd class="px-2 py-0.5 rounded bg-gray-700 text-gray-300 text-xs font-mono">k</kbd>
18 </div>
19 <div class="flex items-center justify-between">
20 <span class="text-gray-400">Open focused entry</span>
21 <kbd class="px-2 py-0.5 rounded bg-gray-700 text-gray-300 text-xs font-mono">Enter</kbd>
22 </div>
23 <div class="flex items-center justify-between">
24 <span class="text-gray-400">Show this help</span>
25 <kbd class="px-2 py-0.5 rounded bg-gray-700 text-gray-300 text-xs font-mono">?</kbd>
26 </div>
27 <div class="flex items-center justify-between">
28 <span class="text-gray-400">Toggle theme</span>
29 <span class="text-gray-500 text-xs">Top nav button</span>
30 </div>
31 </div>
32 <div class="mt-4 text-right">
33 <button @click="show = false" class="text-sm text-gray-500 hover:text-white">Close</button>
34 </div>
35 </div>
36 </div>
37 </div>

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button