feat: further keyboard shortcuts and info about them

web/static/style.scss

@@ -109,7 +109,38 @@ a.dropdown-item[disabled] {
 }
 
 @keyframes progressBar {
-    0% { width: 0; }
+  0% {
-    100% { width: 100%; }
+    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">