GUI overhaul

app/assets/stylesheets/layout.scss

@@ -156,7 +156,12 @@ details.tree {
 
   >summary.active {
     border-left: solid 8px $primary;
-    border-right: solid 8px $primary;
+
+    .content {
+      padding-right: 16px;
+      border-right: solid 8px $primary;
+    }
+
     // border: solid 1px $primary;
     // background-color: $gray-800;
     padding-left: 8px;
@@ -213,4 +218,88 @@ details.tree[open]>summary::before {
 
 // summary.active::before {
 //   @include details-icon(to-rgb($primary));
-// }
+// }
+
+.sc-level-a {
+  background-color: $purple;
+}
+
+.sc-level-aa {
+  background-color: $orange;
+}
+
+.sc-level-aaa {
+  background-color: $teal;
+}
+
+.sc-level {
+  font-size: 0.5rem;
+}
+
+details.success_criterion {
+
+  summary:hover {
+    background-color: $secondary;
+    // border-right: solid 4px $primary;
+  }
+
+  // padding-left: 22px;
+  .result-icon {
+    width: 3rem;
+    margin-right: 1rem;
+  }
+
+  >.content {
+    padding-left: 4rem;
+    padding-right: 1rem;
+  }
+}
+
+// details.success_criterion::details-content {
+//   padding-left: 4rem;
+// }
+
+
+details.success_criterion[open] {
+  // padding-left: 8px;
+  border-right: solid 16px $primary;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: solid 1px $secondary;
+}
+
+details.success_criterion.passed {
+  // border-left: solid 2px $success;
+}
+
+
+details.success_criterion.failed {
+  // border-left: solid 2px $danger
+}
+
+
+details.success_criterion.not_applicable {
+  // border-left: solid 2px $secondary;
+}
+
+details.success_criterion[open] {
+  // border-left: solid 16px $warning;
+  // padding-left: 8px;
+}
+
+details.success_criterion[open].passed {
+  // border-left: solid 16px $success;
+  // padding-left: 8px;
+}
+
+
+details.success_criterion[open].failed {
+  // border-left: solid 16px $danger;
+  // padding-left: 8px;
+}
+
+
+details.success_criterion[open].not_applicable {
+  // border-left: solid 16px $secondary;
+  // padding-left: 8px;
+}

app/controllers/success_criteria_controller.rb

@@ -49,7 +49,12 @@ class SuccessCriteriaController < ApplicationController
   # PATCH/PUT /success_criteria/1
   def update
     if @success_criterion.update(success_criterion_params)
-      redirect_to @success_criterion, notice: "Erfolgskriterium was successfully updated.", status: :see_other
+      respond_to do |format|
+        format.turbo_stream
+        format.html do
+          redirect_to @success_criterion, notice: "Erfolgskriterium was successfully updated.", status: :see_other
+        end
+      end
     else
       render :edit, status: :unprocessable_entity
     end

app/helpers/success_criteria_helper.rb

@@ -13,6 +13,19 @@ module SuccessCriteriaHelper
     end
   end
 
+  def success_criterion_result_color_classes(sc)
+    if sc.passed?
+      "success"
+    elsif sc.failed?
+      "danger"
+    elsif sc.not_applicable?
+      "muted"
+    else
+      "warning"
+    end
+  end
+
+
   def success_criterion_edit_button(success_criterion, edit_mode)
     path = if success_criterion.persisted?
              if edit_mode

app/views/elements/_element.html.erb

@@ -1,24 +1,22 @@
 <div id="<%= dom_id element %>" class="mb-5">
-  <a id="<%= dom_id(element, :scroll) %>"></a>
   <%= turbo_frame_tag dom_id(element, :frame) do %>
     <div class="d-flex">
-      <h2 class="h4">
+      <h3 class="">
           <i class="bi bi-boxes">
           </i>
         <%= element.page.position %>.<%= element.position %>
         <%= element.title %>
-    </h2>
+      </h3>
-        <%= link_to [:edit, element], class: "btn btn-link text-secondary" do %>
+      <%= link_to [:edit, element], class: "btn btn-link text-secondary" do %>
         <i class="bi bi-pencil">
-          </i>
+        </i>
-        <% end %>
+      <% end %>
-      </div>
+    </div>
     <% if element.description %>
       <div class="mb-3">
         <%= element.description %>
       </div>
     <% end %>
-
   <% end %>
 
   <div id="<%= dom_id(element, :success_criteria_list) %>" class="mb-3">
@@ -30,7 +28,7 @@
     <% end %>
   </div>
 
-  <div>
+  <div class="mb-3">
     <%= turbo_frame_tag dom_id(element, "new_success_criterion_frame") do %>
       <%= render partial: "elements/new_success_criterion_button", locals: { element: element } %>
     <% end %>

app/views/reports/_page_nav.html.slim

@@ -10,11 +10,12 @@ div id=dom_id(report, :page_nav)
             li
               details.tree open=current_page_displayed(page) class=""
                 summary class=(is_current ? "active" : nil)
-                  i.bi.me-1 class="bi-file-earmark-check#{is_current ? "" : "" }"
+                  .content
-                  - if is_current
+                    i.bi.me-1 class="bi-file-earmark-check#{is_current ? "" : "" }"
-                      =< "#{page.position} #{page.path}" 
+                    - if is_current
-                  - else
+                        =< "#{page.position} #{page.path}" 
-                    =< link_to("#{page.position} #{page.path}", report_path(report, page_id: page.id), data: { "turbo-frame": :_top })
+                    - else
+                      =< 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 

app/views/success_criteria/_body.html.slim

@@ -0,0 +1,47 @@
+.content id="#{dom_id(success_criterion, :body)}"
+  = turbo_frame_tag(dom_id(success_criterion, :frame)) do
+    .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
+    .row 
+      .col
+        = bootstrap_form_with(model: success_criterion) do |form|
+          = form.rich_text_area :test_comment
+          = form.submit :speichern

app/views/success_criteria/_form.html.erb

@@ -1,42 +1,11 @@
 
-<div id="<%= dom_id success_criterion %>" class="card mb-3">
+  <%= bootstrap_form_with(model: success_criterion.persisted? ? success_criterion : [:element, success_criterion], data: { controller: "unsaved-changes" }) do |form| %>
-  <%== render partial: "success_criteria/header", locals: { success_criterion: success_criterion } %>
+    <%= form.text_field :title %>
-  
+    <%= form.collection_select :result, SuccessCriterion.results.keys.map { [_1, t("activerecord.attributes.success_criterion.results/#{_1}")] }, :first, :second, include_blank: success_criterion.result ? "(Resultat zurücksetzen)" : "(unbeantwortet)" %>
-  <div class="collapse show" id="collapseSuccessCriterion_<%= success_criterion.id %>">
+    <%= form.rich_text_area :quick_criterion %>
-    <div class="card-body">
+    <%= form.rich_text_area :quick_fail %>
-      <%= bootstrap_form_with(model: success_criterion.persisted? ? success_criterion : [:element, success_criterion], data: { controller: "unsaved-changes" }) do |form| %>
+    <%= form.rich_text_area :quick_fix %>
-        <div class="row">
+    <%= form.rich_text_area :test_comment %>
-          <div class="col">
+    <%= form.submit class: "btn btn-warning" %>
-            <div class="btn-group" role="group" aria-label="Resultat">
+    <%= link_to "Abbrechen", success_criterion.persisted? ? success_criterion : success_criterion.element, class: "btn btn-outline-secondary" %>
-              <%= form.radio_button_without_bootstrap :result, :passed, class: "btn-check", autocomplete: "off" %>
+  <% end %>
-              <label class="btn btn-outline-success" for="success_criterion_result_passed">
-                Bestanden
-              </label>
-              <%= form.radio_button_without_bootstrap :result, :failed, class: "btn-check", autocomplete: "off" %>
-              <label class="btn btn-outline-danger" for="success_criterion_result_failed">
-                Durchgefallen
-              </label>
-              <%= form.radio_button_without_bootstrap :result, :not_applicable, class: "btn-check", autocomplete: "off" %>
-              <label class="btn btn-outline-secondary" for="success_criterion_result_not_applicable">
-                Nicht anwendbar
-              </label>
-            </div>
-            <%# form.collection_select :result, SuccessCriterion.results.map{ |k, v| [k, t("activerecord.attributes.success_criterion.results/#{k}")] }, :first, :second, include_blank: true, hide_label: true %>
-            <%# form.select :category, SuccessCriterion.categories.keys  %>
-          </div>
-          <div class="col">
-            <%= form.select :level, SuccessCriterion.levels.keys, hide_label: true %>
-          </div>
-        </div>
-        <%= form.text_field :title %>
-        <%= form.rich_text_area :quick_criterion %>
-        <%= form.rich_text_area :quick_fail %>
-        <%= form.rich_text_area :quick_fix %>
-        <%= form.rich_text_area :test_comment %>
-        <%= form.submit class: "btn btn-warning" %>
-        <%= link_to "Abbrechen", success_criterion.persisted? ? success_criterion : success_criterion.element, class: "btn btn-outline-secondary" %>
-      <% end %>
-    </div>
-  </div>
-  <%# <%= link_to "edit", url_for([:edit, success_criterion]) %>
-</div>

app/views/success_criteria/_header.html.slim

@@ -0,0 +1,16 @@
+- 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)]
+      span.h1.bi class=[success_criterion_result_icon_classes(success_criterion)]
+    h4
+      = 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

app/views/success_criteria/_success_criterion.html.slim

@@ -0,0 +1,5 @@
+/ = turbo_frame_tag(dom_id(success_criterion, :frame)) do
+- expanded = false unless defined?(expanded)
+details.success_criterion id="#{dom_id(success_criterion)}" class="#{success_criterion.result}"
+  == render partial: "success_criteria/header", locals: {success_criterion: success_criterion }
+  == render partial: "success_criteria/body", locals: {success_criterion: success_criterion }

app/views/success_criteria/update.turbo_stream.slim

@@ -0,0 +1,2 @@
+= turbo_stream.replace dom_id(@success_criterion, :header), partial: "success_criteria/header", locals: {success_criterion: @success_criterion }
+= turbo_stream.replace dom_id(@success_criterion, :body), partial: "success_criteria/body", locals: {success_criterion: @success_criterion }

config/locales/activerecord.yml

@@ -10,6 +10,11 @@ de-CH:
         results/passed: Bestanden
         results/failed: Nicht bestanden
         results/not_applicable: Nicht anwendbar
+        test_comment: Testkommentar
+        quick_criterion: Quick Kriterium
+        quick_fail: Quick Fail
+        quick_fix: Quick Fix
+        title: Titel
       check:
         id: ID
         number: Nummer
@@ -76,12 +81,6 @@ de-CH:
         path: Name
         url: Url
         notes: Notizen
-      success_criterion:
-        test_comment: Testkommentar
-        quick_criterion: Quick Kriterium
-        quick_fail: Quick Fail
-        quick_fix: Quick Fix
-        title: Titel
     models:
       account:
         one: Konto

test/system/success_criteria_test.rb

@@ -42,7 +42,7 @@ class SuccessCriteriaTest < ApplicationSystemTestCase
 
     fill_in_rich_text_area "Testkommentar", with: @success_criterion.test_comment
     fill_in_rich_text_area "Quick Kriterium", with: @success_criterion.quick_criterion
-    find("label", text: "Bestanden", visible: true).click
+    select("Bestanden", from: "Testergebnis")
     fill_in "Titel", with: "new"
     click_on "Erfolgskriterium aktualisieren"