feat: Document shortcuts in org-check und documentation

src/fellchensammlung/static/fellchensammlung/css/main.scss

@@ -352,3 +352,12 @@ AN Cards
 .embed-main-content {
   padding: 20px 10px 20px 10px;
 }
+
+// FLOATING BUTTON
+
+.floating {
+  position: fixed;
+  border-radius: 0.3rem;
+  bottom: 4.5rem;
+  right: 1rem;
+}

src/fellchensammlung/static/fellchensammlung/js/toggles.js

@@ -67,6 +67,51 @@ document.addEventListener('DOMContentLoaded', () => {
       $el.classList.remove("is-active");
     });
   }
+
+  // MODALS //
+
+  function openModal($el) {
+        $el.classList.add('is-active');
+        send("Modal.open", {
+            modal: $el.id
+        });
+    }
+
+    function closeModal($el) {
+        $el.classList.remove('is-active');
+    }
+
+    function closeAllModals() {
+        (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+            closeModal($modal);
+        });
+    }
+
+    // Add a click event on buttons to open a specific modal
+    (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+        const modal = $trigger.dataset.target;
+        const $target = document.getElementById(modal);
+
+        $trigger.addEventListener('click', () => {
+            openModal($target);
+        });
+    });
+
+    // Add a click event on various child elements to close the parent modal
+    (document.querySelectorAll('.modal-background, .modal-close, .delete, .nf-modal-close') || []).forEach(($close) => {
+        const $target = $close.closest('.modal');
+
+        $close.addEventListener('click', () => {
+            closeModal($target);
+        });
+    });
+
+    // Add a keyboard event to close all modals
+    document.addEventListener('keydown', (event) => {
+        if (event.key === "Escape") {
+            closeAllModals();
+        }
+    });
 });
 
 

src/fellchensammlung/templates/fellchensammlung/partials/modal-shortcuts.html

@@ -0,0 +1,30 @@
+{% load i18n %}
+<div id="modal-shortcuts" class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <p class="modal-card-title">{% trans 'Shortcuts' %}</p>
+            <button class="delete" aria-label="{% trans 'Schließen' %}"></button>
+        </header>
+        <section class="modal-card-body">
+            <div class="content">
+                <ul>
+                    <li>{% trans 'Website öffnen' %}: <code>O</code></li>
+                    <li>{% trans 'Website schließen' %}: <code>{% trans 'STRG' %} + W</code></li>
+                    <li>{% trans 'Organisation als geprüft markieren' %}: <code>{% trans 'STRG' %} + W</code></li>
+                </ul>
+            </div>
+        </section>
+        <footer class="modal-card-foot">
+            <div class="buttons">
+                <button class="button is-success nf-modal-close">{% translate 'Verstanden' %}</button>
+                <button class="button">{% translate 'Details' %}</button>
+            </div>
+        </footer>
+    </div>
+</div>
+
+
+<button class="button is-info floating js-modal-trigger" data-target="modal-shortcuts">
+    <i class="fa-solid fa-keyboard fa-fw"></i> {% trans 'Shortcuts' %}
+</button>

src/fellchensammlung/templates/fellchensammlung/rescue-organization-check.html

@@ -23,9 +23,11 @@
             </div>
             <div class="column">
                 {% if dq %}
-                    <a class="button is-info" href="{% url 'organization-check' %}">{% translate 'Datenergänzung deaktivieren' %}</a>
+                    <a class="button is-info"
+                       href="{% url 'organization-check' %}">{% translate 'Datenergänzung deaktivieren' %}</a>
                 {% else %}
-                    <a class="button is-info is-light" href="{% url 'organization-check-dq' %}">{% translate 'Datenergänzung aktivieren' %}</a>
+                    <a class="button is-info is-light"
+                       href="{% url 'organization-check-dq' %}">{% translate 'Datenergänzung aktivieren' %}</a>
                 {% endif %}
             </div>
         </div>
@@ -65,4 +67,5 @@
             {% endfor %}
         </div>
     </div>
+    {% include "fellchensammlung/partials/modal-shortcuts.html" %}
 {% endblock %}