Hotkeys ux

app/assets/stylesheets/layout.scss

@@ -254,8 +254,6 @@ details.success_criterion {
 
 details.success_criterion[open] {
   border: solid 1px $tertiary;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
 
   summary {
     background-color: $tertiary;

app/javascript/controllers/details_list_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="details-list"
+export default class extends Controller {
+  connect() {
+  }
+
+  openAll(e) {
+    console.log(e)
+    e.preventDefault();
+    this.element.querySelectorAll("details").forEach(el => {
+      el.setAttribute("open", "")
+    })
+  }
+
+  closeAll(e) {
+    console.log(e)
+    e.preventDefault();
+    this.element.querySelectorAll("details").forEach(el => {
+      el.removeAttribute("open")
+    })
+  }
+}

app/javascript/controllers/index.js

@@ -16,6 +16,9 @@ application.register("check-link", CheckLinkController)
 import CollapseChevronTogglerController from "./collapse_chevron_toggler_controller"
 application.register("collapse-chevron-toggler", CollapseChevronTogglerController)
 
+import DetailsListController from "./details_list_controller"
+application.register("details-list", DetailsListController)
+
 import DragController from "./drag_controller"
 application.register("drag", DragController)
 

app/views/home/show.html.slim

@@ -11,3 +11,20 @@ p
   i.bi.bi-journal-text
   =< Report.count
   =< link_to Report.model_name.human(count: Report.count), :reports
+
+h3 Hotkeys
+p Auf der Bericht-Ausfüllen Seite können folgende Shortcuts verwendet werden: 
+dl
+  dt t
+  dd Springe zum Anfang des Contents (Skip-Link, kann auf allen Seiten verwendet werden)
+  dt a
+  dd Alle auf
+  dt z
+  dd Alle zu
+  dt b
+  dd Baum
+  dt n
+  dd Notizen
+  dt e
+  dd Springe zu erstem Check
+  

app/views/layouts/application.html.slim

@@ -8,7 +8,7 @@ html data-bs-theme="#{cookies[:"modeTheme"] || "light"}" data-controller="set-th
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
   body
-    a.visually-hidden href="#main-content" data={ hotkey: "t", controller: "hotkey" } Direkt zum Inhalt
+    a.visually-hidden href="#main-content" data={ hotkey: "t", controller: "hotkey", turbo: false } Direkt zum Inhalt
     = render partial: "layouts/navigation"
     .container-fluid
       .row
@@ -16,5 +16,5 @@ html data-bs-theme="#{cookies[:"modeTheme"] || "light"}" data-controller="set-th
         main.col.ps-md-2.pt-2
           #main-content[data-controller="rich-text-link-targets"]
             = yield
-    footer.container-fluid.mt-auto.border-top
+    /footer.container-fluid.mt-auto.border-top
       = Rails.configuration.build_version && "Version: #{Rails.configuration.build_version}"

app/views/pages/_page.html.erb

@@ -1,5 +1,9 @@
 <div id="<%= dom_id page %>" class="mb-3" data-bs-scrollspy-target="#<%= dom_id(page.report, :page_nav_spy) %>" data-controller="bs-scrollspy">
-  <div id="element_list">
+  <div id="element_list" data-controller="details-list">
+    <div class="text-end">
+      <a href="#" data-action="click->details-list#closeAll" data-controller="hotkey" data-hotkey="z">Alle zu [z]</a>
+      <a href="#" data-action="click->details-list#openAll" data-controller="hotkey" data-hotkey="a">Alle auf [a]</a>
+    </div>
     <% page.elements.each do |element| %>
       <%= render element %>
     <% end %>
@@ -11,5 +15,5 @@
     <% end %>
   </div>
 
-  <%= link_to("Zum ersten Element", "##{dom_id(page.elements.first)}", class: "visually-hidden", data: {controller: :hotkey, hotkey: "a"}) if page.elements.first %>
+  <%= link_to("Sprinte zum ersten Element", "##{dom_id(page.elements.first)}", class: "visually-hidden", data: {controller: :hotkey, hotkey: "e", turbo: false}) if page.elements.first %>
 </div>

app/views/reports/show.html.slim

@@ -18,7 +18,6 @@ h1
   p 
     'URL: 
     = @current_page.url
-/ .border-top.my-3
 .row
   .col-lg-3.col-md-4.col-sm-12
     .page_nav.sticky-top

app/views/success_criteria/_body.html.slim

@@ -46,7 +46,7 @@
         .text-end.fw-bold = SuccessCriterion.human_attribute_name(:quick_fix)
       .col-md-8.col-lg-9
         = success_criterion.quick_fix
-    .row
+    .row.mb-3
       .col-md-4.col-lg-3
         .text-end.fw-bold   = SuccessCriterion.human_attribute_name(:test_instructions)
       .col-md-8.col-lg-9

app/views/success_criteria/_header.html.slim

@@ -1,9 +1,9 @@
 - edit_mode = action_name == "edit"
 summary.d-flex.align-items-start id=dom_id(success_criterion, :header)
   .content.d-flex.align-items-center
-    .result-icon.flex-shrink-0.d-flex.justify-content-center.mt-1 class=[success_criterion_result_color_classes(success_criterion)]
+    .result-icon.flex-shrink-0 class=[success_criterion_result_color_classes(success_criterion)]
       span.h1.bi class=[success_criterion_result_icon_classes(success_criterion)]
-    h4.h5.mt-2
+    .fs-5
       = success_criterion.page.position
       | .
       = success_criterion.element.position