feat: further keyboard shortcuts and info about them

web/static/style.scss

@@ -3,7 +3,7 @@ $crimson: #00d1b2; //#B80F0A;
 
 // Override global Sass variables from the /utilities folder
 @use "bulma/sass/utilities" with ($family-primary: '"Nunito", sans-serif',
-$primary: $crimson,
+  $primary: $crimson,
 );
 // $grey-dark: $brown,
 // $grey-light: $beige-light,
@@ -82,9 +82,9 @@ section.htmx-request {
 }
 
 a.dropdown-item[disabled] {
-    color: hsl(221, 14%, 48%); // $grey;
-    cursor: default;
-    pointer-events: none;
+  color: hsl(221, 14%, 48%); // $grey;
+  cursor: default;
+  pointer-events: none;
 }
 
 #toast {
@@ -100,16 +100,47 @@ a.dropdown-item[disabled] {
 }
 
 #toast-progress {
-    height: 5px;
-    position: relative;
-    animation: progressBar 3s ease-in-out;
-    animation-iteration-count: infinite;
-    animation-fill-mode:both;
-    border-radius: 20px 20px 0 0;
+  height: 5px;
+  position: relative;
+  animation: progressBar 3s ease-in-out;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  border-radius: 20px 20px 0 0;
 }
 
 @keyframes progressBar {
-    0% { width: 0; }
-    100% { width: 100%; }
+  0% {
+    width: 0;
+  }
+
+  100% {
+    width: 100%;
+  }
 }
 
+// took from https://github.com/auth0/kbd
+kbd {
+  font-family: Consolas, "Lucida Console", monospace;
+  display: inline-block;
+  border-radius: 3px;
+  padding: 0px 4px;
+  box-shadow: 1px 1px 1px #777;
+  margin: 2px;
+  font-size: small;
+  vertical-align: text-bottom;
+  background: #eee;
+  font-weight: 500;
+  color: #555;
+  font-variant: small-caps;
+  font-weight: 600;
+
+  letter-spacing: 1px;
+
+  /* Prevent selection */
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

web/templates/calendar.html

@@ -18,7 +18,9 @@
 
         <div class="control level-item is-flex-grow-0">
           <input class="input" type="date" name="date" value="{{ date }}" hx-target="closest body"
-                 hx-get="/calendar{{ selected_area|show_area_query(true) }}" hx-push-url="true">
+                 hx-get="/calendar{{ selected_area|show_area_query(true) }}" hx-push-url="true"
+                 _="on keyup[key is 'D'] from elsewhere showPicker() on me end
+                    on keyup[key is 'S'] from elsewhere focus() on me">
 
           {% if user.role == Role::Admin %}
           <div class="select ml-2">
@@ -34,6 +36,22 @@
             </select>
           </div>
           {% endif %}
+
+          <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'
+               })">
+            <svg class="icon">
+              <use href="/static/feather-sprite.svg#info" />
+            </svg>
+          </button>
         </div>
 
         <div class="level-right">