From f88d759209e9042240bb0b4813024c78c1ed86bf Mon Sep 17 00:00:00 2001
From: Max Hohlfeld <maxhohlfeld@posteo.de>
Date: Thu, 24 Jul 2025 15:04:07 +0200
Subject: [PATCH] style: shortcut manual

---
 web/static/style.scss       | 10 ++++++++++
 web/templates/calendar.html | 30 ++++++++++++++++++++----------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/web/static/style.scss b/web/static/style.scss
index c9766bae..486b0b77 100644
--- a/web/static/style.scss
+++ b/web/static/style.scss
@@ -128,3 +128,13 @@ kbd {
   -ms-user-select: none;
   user-select: none;
 }
+
+div.shortcuts-info {
+  display: inline-grid;
+  grid-template-columns: 90px 1fr;
+  column-gap: 1em;
+
+  p {
+    text-align: initial;
+  }
+}
diff --git a/web/templates/calendar.html b/web/templates/calendar.html
index a3d1debe..4bcc9716 100644
--- a/web/templates/calendar.html
+++ b/web/templates/calendar.html
@@ -37,17 +37,27 @@
           </div>
           {% endif %}
 
+          <template id="shortcuts-info">
+            <swal-title>
+              Bedieninformationen
+            </swal-title>
+            <swal-icon type="info"></swal-icon>
+            <swal-param name="allowEscapeKey" value="true" />
+            <swal-html>
+              <div class="shortcuts-info">
+                <div> <kbd>Shift</kbd> + <kbd>S</kbd> </div>
+                <p>Datumsfeld zur Texteingabe fokussieren</p>
+                <div><kbd>Shift</kbd> + <kbd>D</kbd></div>
+                <p>Datumsauswahlfenster einblenden</p>
+                <div><kbd>&leftarrow;</kbd></div>
+                <p>zum vorherigen Tag navigieren</p>
+                <div><kbd>&rightarrow;</kbd></div>
+                <p>zum nächsten Tag navigieren</p>
+              </div>
+            </swal-html>
+          </template>
           <button class="button ml-2" title="Bedieninformationen"
-                  _="on click call Swal.fire({
-                  title: 'Bedieninformationen',
-                  icon: 'info',
-                  showCloseButton: true,
-                  showConfirmButton: false,
-                  html: '<kbd>S</kbd> Datumsfeld zur Texteingabe fokussieren<br/>
-                  <kbd>D</kbd> Datumsauswahlfenster einblenden<br/>
-                  <kbd>&leftarrow;</kbd> zum vorherigen Tag navigieren<br/>
-                  <kbd>&rightarrow;</kbd> zum nächsten Tag navigieren'
-               })">
+                  _="on click call Swal.fire({ template: '#shortcuts-info' })">
             <svg class="icon">
               <use href="/static/feather-sprite.svg#info" />
             </svg>