GUI overhaul

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">
-  <%== render partial: "success_criteria/header", locals: { success_criterion: success_criterion } %>
-  
-  <div class="collapse show" id="collapseSuccessCriterion_<%= success_criterion.id %>">
-    <div class="card-body">
-      <%= bootstrap_form_with(model: success_criterion.persisted? ? success_criterion : [:element, success_criterion], data: { controller: "unsaved-changes" }) do |form| %>
-        <div class="row">
-          <div class="col">
-            <div class="btn-group" role="group" aria-label="Resultat">
-              <%= form.radio_button_without_bootstrap :result, :passed, class: "btn-check", autocomplete: "off" %>
-              <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>
+  <%= bootstrap_form_with(model: success_criterion.persisted? ? success_criterion : [:element, success_criterion], data: { controller: "unsaved-changes" }) do |form| %>
+    <%= 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)" %>
+    <%= 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 %>

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 }