Requested gui improvements

app/assets/stylesheets/layout.scss

@@ -1,3 +1,6 @@
+$tertiary: $gray-300;
+$tertiary-dark: $gray-700;
+
 .action-row {
   @extend .d-flex;
   @extend .p-2;
@@ -155,17 +158,7 @@ details.tree {
   }
 
   >summary.active {
-    border-left: solid 8px $primary;
-
-    .content {
-      padding-right: 16px;
-      border-right: solid 8px $primary;
-    }
-
-    // border: solid 1px $primary;
-    // background-color: $gray-800;
-    padding-left: 8px;
-    // padding-top: 8px;
+    background-color: $tertiary;
   }
 
   >summary::before {
@@ -197,7 +190,7 @@ details.tree {
     }
 
     li:has(a.active) {
-      border-left: solid 2px $primary;
+      border-left: solid 2px $tertiary;
       padding-left: 36px;
       // background-color: $gray-900;
     }
@@ -205,8 +198,18 @@ details.tree {
 }
 
 @include color-mode(dark) {
-  details.tree summary::before {
-    @include details-icon(to-rgb(map-get($theme-colors, "light")));
+  details.tree {
+    summary::before {
+      @include details-icon(to-rgb(map-get($theme-colors, "light")));
+    }
+
+    summary.active {
+      background-color: $tertiary-dark;
+    }
+
+    ul li:has(a.active) {
+      border-left: solid 2px $tertiary-dark;
+    }
   }
 }
 
@@ -233,39 +236,68 @@ details.tree[open]>summary::before {
 }
 
 .sc-level {
-  font-size: 0.5rem;
+  // font-size: 0.5rem;
 }
 
 details.success_criterion {
-
   summary:hover {
-    background-color: $secondary;
+    background-color: $tertiary;
+
+
     // border-right: solid 4px $primary;
   }
 
   // padding-left: 22px;
   .result-icon {
     width: 3rem;
-    margin-right: 1rem;
   }
 
   >.content {
-    padding-left: 4rem;
+    padding-left: 1rem;
     padding-right: 1rem;
   }
 }
 
-// details.success_criterion::details-content {
-//   padding-left: 4rem;
-// }
+
+@include color-mode(dark) {
+  details.success_criterion {
+    summary:hover {
+      background-color: $tertiary-dark;
+    }
+  }
+}
 
 
 details.success_criterion[open] {
   // padding-left: 8px;
-  border-right: solid 16px $primary;
+  border: solid 1px $tertiary;
   margin-bottom: 2rem;
   padding-bottom: 1rem;
-  border-bottom: solid 1px $secondary;
+
+  summary {
+    background-color: $tertiary;
+  }
+
+  summary:hover {
+    background-color: shade-color($tertiary, 30%);
+    // border-right: solid 4px $primary;
+  }
+}
+
+@include color-mode(dark) {
+  details.success_criterion[open] {
+    // padding-left: 8px;
+    border: solid 1px $tertiary-dark;
+
+    summary {
+      background-color: $tertiary-dark;
+    }
+
+    summary:hover {
+      background-color: shade-color($tertiary-dark, 30%);
+      // border-right: solid 4px $primary;
+    }
+  }
 }
 
 details.success_criterion.passed {

app/controllers/reports_controller.rb

@@ -10,6 +10,7 @@ class ReportsController < ApplicationController
 
   # GET /reports/1
   def show
+    @page_nav_mode = params[:pnm] == "c" ? :comment : :nav_tree
     respond_to do |format|
       format.html do
         @current_page = page_param && @report.pages.find(page_param) || @report.pages.first

app/helpers/success_criteria_helper.rb

@@ -39,6 +39,10 @@ module SuccessCriteriaHelper
     end
     link_to tag.i(class: "bi bi-pencil"),
             path,
-            class: "btn btn-#{edit_mode ? 'link text-warning' : 'link text-secondary'}"
+            class: "btn btn-#{edit_mode ? 'link text-warning' : 'link text-body'}"
+  end
+
+  def success_criterion_badge(content, extra_classes: "")
+    tag.span(content, class: "badge #{extra_classes}")
   end
 end

app/views/elements/_page_nav_row.html.slim

@@ -0,0 +1,9 @@
+li 
+  - if current_page
+    =< link_to("##{dom_id(element)}", data: { "turbo": false }) do
+      i.bi.bi-boxes.me-1
+      =< "#{element.number} #{element.title}"
+  - else 
+    =< link_to(report_path(element.report, page_id: element.page.id, anchor: dom_id(element)), data: { "turbo": false }) do
+      i.bi.bi-boxes.me-1
+      =< "#{element.number} #{element.title}"

app/views/elements/create.turbo_stream.slim

@@ -1,5 +1,3 @@
 = turbo_stream.update "new_element_frame", partial: "pages/new_element_button", locals: { page: @element.page }
 = turbo_stream.append "element_list", @element
-= turbo_stream.append dom_id(@element.page, :page_nav_elements) do 
-  i.bi.bi-boxes.me-1
-  = link_to("#{@element.number} #{@element.title}", "##{dom_id(@element)}", data: { "turbo": false })
+= turbo_stream.append dom_id(@element.page, :page_nav_elements), partial: "elements/page_nav_row", locals: { element: @element, current_page: true }

app/views/elements/new.html.erb

@@ -1,9 +1,7 @@
 <h1><%= t("scaffold.pagetitle_new", model: Element.model_name.human) %></h1>
 
 <%= turbo_frame_tag "new_element_frame" do %>
-  <div class="border border-info p-3">
-    <%= render "form", element: @element %>
-  </div>
+  <%= render "form", element: @element %>
 <% end %>
 
 <div class="action-row">

app/views/pages/_notes.html.slim

@@ -1,4 +1,3 @@
-.mt-5
-  = bootstrap_form_with(model: page) do |form|
-    = form.text_area :notes, rows: [(page.notes&.count("\n") || 0) + 1, 10].max, placeholder: "Hier kannst du Notizen speichern. \n\nJeder Pfad hat seine eigenen Notizen.", hide_label: true
-    = form.submit "Speichern"
+= bootstrap_form_with(model: page, class: "mt-3") do |form|
+  = form.text_area :notes, rows: [(page.notes&.count("\n") || 0) + 1, 10].max, placeholder: "Hier kannst du Notizen speichern. \n\nJeder Pfad hat seine eigenen Notizen.", hide_label: true
+  = form.submit "Speichern"

app/views/pages/_page.html.erb

@@ -1,4 +1,4 @@
-<div id="<%= dom_id page %>" class="mb-3"data-bs-scrollspy-target="#<%= dom_id(page.report, :page_nav) %>" data-controller="bs-scrollspy">
+<div id="<%= dom_id page %>" class="mb-3"data-bs-scrollspy-target="#<%= dom_id(page.report, :page_nav_spy) %>" data-controller="bs-scrollspy">
   <h2>
     <i class="bi bi-file-earmark-check"></i>
     <%= page.position %> <%= page.path %></h2>

app/views/pages/new.html.erb

@@ -1,9 +1,7 @@
 <h1><%= t("scaffold.pagetitle_new", model: Page.model_name.human) %></h1>
 
 <%= turbo_frame_tag "new_page_frame" do %>
-  <div class="border border-info p-3">
     <%= render "form", page: @page %>
-  </div>
 <% end %>
 
 <div class="action-row">

app/views/pages/show.html.slim

@@ -3,9 +3,6 @@ h1
 
 = render @page
 
-= turbo_frame_tag(dom_id(@page, :notes)) do 
-  = render partial: "pages/notes", locals: { page: @page }
-
 .action-row
   = link_to t("scaffold.link_edit", model: @page.model_name.human), edit_page_path(@page)
   = link_to t("scaffold.link_index", model: @page.model_name.human(count: 2)), report_pages_path(@page.report)

app/views/reports/_page_nav.html.slim

@@ -1,9 +1,12 @@
 div id=dom_id(report, :page_nav)
-  - if report.pages.any?
-    details.switch open=true 
-      summary.justify-content-end
-        span Pfade
-      nav
+  ul.nav.nav-underline 
+    li.nav-item 
+      = link_to("Baum", url_for(pnm: :n), class: "nav-link #{@page_nav_mode == :nav_tree ? "active david" : nil}")
+    li.nav-item 
+      = link_to("Notizen", url_for(pnm: :c), class: "nav-link #{@page_nav_mode == :comment ? "active" : nil}")
+  - if @page_nav_mode == :nav_tree
+    - if report.pages.any?
+      nav.mt-3 id=dom_id(report, :page_nav_spy)
         ul
           - report.pages.each do |page|
             - is_current = current_page == page
@@ -18,7 +21,8 @@ div id=dom_id(report, :page_nav)
                       =< link_to("#{page.position} #{page.path}", report_path(report, page_id: page.id), data: { "turbo-frame": :_top })
                 ul id=dom_id(page, :page_nav_elements)
                   - page.elements.each do |element| 
-                    li 
+                    = render partial: "elements/page_nav_row", locals: { element: element, current_page: current_page == element.page }
+                    /li 
                       - if current_page == page
                         =< link_to("##{dom_id(element)}", data: { "turbo": false }) do
                           i.bi.bi-boxes.me-1
@@ -27,5 +31,8 @@ div id=dom_id(report, :page_nav)
                         =< link_to(report_path(report, page_id: page.id, anchor: dom_id(element)), data: { "turbo": false }) do
                           i.bi.bi-boxes.me-1
                           =< "#{element.number} #{element.title}"
-  = turbo_frame_tag "new_page_frame" do
-    = render partial: "reports/new_page_button", locals: { report: report }
+    = turbo_frame_tag "new_page_frame" do
+      = render partial: "reports/new_page_button", locals: { report: report }
+  - else
+    = turbo_frame_tag(dom_id(current_page, :notes)) do 
+      = render partial: "pages/notes", locals: { page: current_page }

app/views/reports/show.html.slim

@@ -14,7 +14,7 @@ h1
   .col-lg-4.col-md-6.col-sm-12
     .page_nav.sticky-top
       = render partial: "reports/page_nav", locals: { report: @report, current_page: @current_page }
-      - if @current_page
+      - if @current_page && false
         = turbo_frame_tag(dom_id(@current_page, :notes)) do 
           = render partial: "pages/notes", locals: { page: @current_page }
   .col-lg-8.col-md-6.col-sm-12

app/views/success_criteria/_body.html.slim

@@ -3,45 +3,49 @@
     .row
       .col
         = bootstrap_form_with(model: success_criterion, data: { controller: "autosubmit" }) do |form|
-          span.float-end
-            = success_criterion_edit_button(success_criterion, false)
-          .my-3.btn-group[role="group" aria-label="Resultat"]
-            = form.radio_button_without_bootstrap :result, :passed, class: "btn-check", autocomplete: "off", id: dom_id(success_criterion, :result_passed)
-            label.btn.btn-outline-success for=dom_id(success_criterion, :result_passed) Bestanden 
-            = form.radio_button_without_bootstrap :result, :failed, class: "btn-check", autocomplete: "off", id: dom_id(success_criterion, :result_failed)
-            label.btn.btn-outline-danger for=dom_id(success_criterion, :result_failed) Durchgefallen 
-            = form.radio_button_without_bootstrap :result, :not_applicable, class: "btn-check", autocomplete: "off", id: dom_id(success_criterion, :result_not_applicable)
-            label.btn.btn-outline-secondary for=dom_id(success_criterion, :result_not_applicable) Nicht anwendbar 
-            /= form.radio_button_without_bootstrap :result, nil, class: "btn-check", autocomplete: "off", id: dom_id(success_criterion, :result_not_applicable)
-            /label.btn.btn-outline-secondary for=dom_id(success_criterion, :nil) Reset
-    .row 
-      .col-md-4.col-lg-3 
-        'WCAG/ID
-      .col-md-8.col-lg-9
-        = link_to("#{success_criterion.check.external_number}/#{success_criterion.check.id}", success_criterion.check, data: { turbo_frame: "_top"}, target: :_blank)
-    .row 
-      .col-md-4.col-lg-3 
-        = SuccessCriterion.human_attribute_name(:quick_criterion)
-      .col-md-8.col-lg-9
-        = success_criterion.quick_criterion
-    .row 
-      .col-md-4.col-lg-3 
-        = SuccessCriterion.human_attribute_name(:quick_fail)
-      .col-md-8.col-lg-9
-        = success_criterion.quick_fail
-    .row 
-      .col-md-4.col-lg-3 
-        = SuccessCriterion.human_attribute_name(:quick_fix)
-      .col-md-8.col-lg-9
-        = success_criterion.quick_fix
-    - safe_display(success_criterion.check.test_instructions) do |i|
-      .row
-        .col-md-4.col-lg-3 
-          = SuccessCriterion.human_attribute_name(:test_instructions)
-        .col-md-8.col-lg-9
-          = i
+          .position-relative
+            .position-absolute.top-0.end-0.fw-bold
+              = success_criterion_edit_button(success_criterion, false)
+            .my-3.btn-group[role="group" aria-label="Resultat"]
+              = form.radio_button_without_bootstrap :result, :passed, class: "btn-check", autocomplete: "off", id: dom_id(success_criterion, :result_passed)
+              label.btn.btn-outline-success for=dom_id(success_criterion, :result_passed) Bestanden 
+              = form.radio_button_without_bootstrap :result, :failed, class: "btn-check", autocomplete: "off", id: dom_id(success_criterion, :result_failed)
+              label.btn.btn-outline-danger for=dom_id(success_criterion, :result_failed) Durchgefallen 
+              = form.radio_button_without_bootstrap :result, :not_applicable, class: "btn-check", autocomplete: "off", id: dom_id(success_criterion, :result_not_applicable)
+              label.btn.btn-outline-secondary for=dom_id(success_criterion, :result_not_applicable) Nicht anwendbar 
+              /= form.radio_button_without_bootstrap :result, nil, class: "btn-check", autocomplete: "off", id: dom_id(success_criterion, :result_not_applicable)
+              /label.btn.btn-outline-secondary for=dom_id(success_criterion, :nil) Reset
     .row 
       .col
-        = bootstrap_form_with(model: success_criterion) do |form|
-          = form.rich_text_area :test_comment
-          = form.submit :speichern
+        - if success_criterion.test_comment?
+          .comment = success_criterion.test_comment
+        - else 
+          = bootstrap_form_with(model: success_criterion) do |form|
+            = form.rich_text_area :test_comment, placeholder: "Test Kommentar", hide_label: true
+            = form.submit "Kommentar speichern", class: "btn btn-secondary float-end"
+
+    .row.mb-4
+      .col-md-4.col-lg-3
+        .text-end.fw-bold WCAG/ID
+      .col-md-8.col-lg-9
+        = link_to("#{success_criterion.check.external_number}/#{success_criterion.check.id}", success_criterion.check, data: { turbo_frame: "_top"}, target: :_blank)
+    .row.mb-4
+      .col-md-4.col-lg-3
+        .text-end.fw-bold = SuccessCriterion.human_attribute_name(:quick_criterion)
+      .col-md-8.col-lg-9
+        = success_criterion.quick_criterion
+    .row.mb-4
+      .col-md-4.col-lg-3
+        .text-end.fw-bold = SuccessCriterion.human_attribute_name(:quick_fail)
+      .col-md-8.col-lg-9
+        = success_criterion.quick_fail
+    .row.mb-4
+      .col-md-4.col-lg-3
+        .text-end.fw-bold = SuccessCriterion.human_attribute_name(:quick_fix)
+      .col-md-8.col-lg-9
+        = success_criterion.quick_fix
+    .row
+      .col-md-4.col-lg-3
+        .text-end.fw-bold   = SuccessCriterion.human_attribute_name(:test_instructions)
+      .col-md-8.col-lg-9
+        = success_criterion.check.test_instructions

app/views/success_criteria/_header.html.slim

@@ -1,16 +1,22 @@
 - 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.d-flex.justify-content-center class=[success_criterion_result_color_classes(success_criterion)]
+    .result-icon.d-flex.justify-content-center.mt-1 class=[success_criterion_result_color_classes(success_criterion)]
       span.h1.bi class=[success_criterion_result_icon_classes(success_criterion)]
-    h4
+    h4.mt-2
       = success_criterion.page.position
       | .
       = success_criterion.element.position
       | .
       = success_criterion.position
-      =< success_criterion.title
-  .small.badge.rounded-pill.ms-2.mt-2.sc-level class="sc-level-#{success_criterion.level.to_s.downcase}"
-    = success_criterion.level
-  - if success_criterion.test_comment.present?
-    i.bi.bi-chat.ms-2
+      span.me-2
+        =< success_criterion.title
+      
+      - if success_criterion.test_comment.present?
+        == tag.i(class: "bi bi-chat-fill me-2")
+        
+      = success_criterion_badge(success_criterion.check.external_number, extra_classes: "text-bg-info me-1")
+      
+      = success_criterion_badge(success_criterion.level, extra_classes: "sc-level sc-level-#{success_criterion.level.to_s.downcase} me-1")
+  
+