From 0198a222784f0594bb9be2f3215209d52cd9f181 Mon Sep 17 00:00:00 2001 From: david Date: Thu, 7 Nov 2024 01:24:55 +0100 Subject: [PATCH] GUI overhaul --- app/assets/stylesheets/layout.scss | 93 ++++++++++++++++++- .../success_criteria_controller.rb | 7 +- app/helpers/success_criteria_helper.rb | 13 +++ app/views/elements/_element.html.erb | 16 ++-- app/views/reports/_page_nav.html.slim | 11 ++- app/views/success_criteria/_body.html.slim | 47 ++++++++++ app/views/success_criteria/_form.html.erb | 51 ++-------- ...{_header.html.erb => _header.html.erb.dis} | 0 app/views/success_criteria/_header.html.slim | 16 ++++ ...ml.erb => _success_criterion.html.erb.dis} | 0 .../_success_criterion.html.slim | 5 + .../success_criteria/update.turbo_stream.slim | 2 + config/locales/activerecord.yml | 11 +-- test/system/success_criteria_test.rb | 2 +- 14 files changed, 209 insertions(+), 65 deletions(-) create mode 100644 app/views/success_criteria/_body.html.slim rename app/views/success_criteria/{_header.html.erb => _header.html.erb.dis} (100%) create mode 100644 app/views/success_criteria/_header.html.slim rename app/views/success_criteria/{_success_criterion.html.erb => _success_criterion.html.erb.dis} (100%) create mode 100644 app/views/success_criteria/_success_criterion.html.slim create mode 100644 app/views/success_criteria/update.turbo_stream.slim diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 1a502ba..e8ae741 100644 --- a/app/assets/stylesheets/layout.scss +++ b/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)); -// } \ No newline at end of file +// } + +.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; +} \ No newline at end of file diff --git a/app/controllers/success_criteria_controller.rb b/app/controllers/success_criteria_controller.rb index 2233ac7..00dde20 100644 --- a/app/controllers/success_criteria_controller.rb +++ b/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 diff --git a/app/helpers/success_criteria_helper.rb b/app/helpers/success_criteria_helper.rb index 81cedeb..ac5855c 100644 --- a/app/helpers/success_criteria_helper.rb +++ b/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 diff --git a/app/views/elements/_element.html.erb b/app/views/elements/_element.html.erb index 566dd7d..2b8b7be 100644 --- a/app/views/elements/_element.html.erb +++ b/app/views/elements/_element.html.erb @@ -1,24 +1,22 @@
- <%= turbo_frame_tag dom_id(element, :frame) do %>
-

+

<%= element.page.position %>.<%= element.position %> <%= element.title %> -

- <%= link_to [:edit, element], class: "btn btn-link text-secondary" do %> + + <%= link_to [:edit, element], class: "btn btn-link text-secondary" do %> - - <% end %> -
+ + <% end %> +
<% if element.description %>
<%= element.description %>
<% end %> - <% end %>
@@ -30,7 +28,7 @@ <% end %>
-
+
<%= turbo_frame_tag dom_id(element, "new_success_criterion_frame") do %> <%= render partial: "elements/new_success_criterion_button", locals: { element: element } %> <% end %> diff --git a/app/views/reports/_page_nav.html.slim b/app/views/reports/_page_nav.html.slim index a2c946d..49d3399 100644 --- a/app/views/reports/_page_nav.html.slim +++ b/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 ? "" : "" }" - - if is_current - =< "#{page.position} #{page.path}" - - else - =< link_to("#{page.position} #{page.path}", report_path(report, page_id: page.id), data: { "turbo-frame": :_top }) + .content + i.bi.me-1 class="bi-file-earmark-check#{is_current ? "" : "" }" + - if is_current + =< "#{page.position} #{page.path}" + - 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 diff --git a/app/views/success_criteria/_body.html.slim b/app/views/success_criteria/_body.html.slim new file mode 100644 index 0000000..26d7281 --- /dev/null +++ b/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 diff --git a/app/views/success_criteria/_form.html.erb b/app/views/success_criteria/_form.html.erb index 6e871ed..daad523 100644 --- a/app/views/success_criteria/_form.html.erb +++ b/app/views/success_criteria/_form.html.erb @@ -1,42 +1,11 @@ -
- <%== render partial: "success_criteria/header", locals: { success_criterion: success_criterion } %> - -
-
- <%= bootstrap_form_with(model: success_criterion.persisted? ? success_criterion : [:element, success_criterion], data: { controller: "unsaved-changes" }) do |form| %> -
-
-
- <%= form.radio_button_without_bootstrap :result, :passed, class: "btn-check", autocomplete: "off" %> - - <%= form.radio_button_without_bootstrap :result, :failed, class: "btn-check", autocomplete: "off" %> - - <%= form.radio_button_without_bootstrap :result, :not_applicable, class: "btn-check", autocomplete: "off" %> - -
- <%# 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 %> -
-
- <%= form.select :level, SuccessCriterion.levels.keys, hide_label: true %> -
-
- <%= 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 %> -
-
- <%# <%= link_to "edit", url_for([:edit, success_criterion]) %> -
+ <%= 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 %> diff --git a/app/views/success_criteria/_header.html.erb b/app/views/success_criteria/_header.html.erb.dis similarity index 100% rename from app/views/success_criteria/_header.html.erb rename to app/views/success_criteria/_header.html.erb.dis diff --git a/app/views/success_criteria/_header.html.slim b/app/views/success_criteria/_header.html.slim new file mode 100644 index 0000000..3b64289 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/app/views/success_criteria/_success_criterion.html.erb b/app/views/success_criteria/_success_criterion.html.erb.dis similarity index 100% rename from app/views/success_criteria/_success_criterion.html.erb rename to app/views/success_criteria/_success_criterion.html.erb.dis diff --git a/app/views/success_criteria/_success_criterion.html.slim b/app/views/success_criteria/_success_criterion.html.slim new file mode 100644 index 0000000..8fd047d --- /dev/null +++ b/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 } \ No newline at end of file diff --git a/app/views/success_criteria/update.turbo_stream.slim b/app/views/success_criteria/update.turbo_stream.slim new file mode 100644 index 0000000..32d74ff --- /dev/null +++ b/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 } \ No newline at end of file diff --git a/config/locales/activerecord.yml b/config/locales/activerecord.yml index 01ca2e4..d2e6dae 100644 --- a/config/locales/activerecord.yml +++ b/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 diff --git a/test/system/success_criteria_test.rb b/test/system/success_criteria_test.rb index 1ca8ed0..9ca298e 100644 --- a/test/system/success_criteria_test.rb +++ b/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"