diff --git a/app/javascript/controllers/tasklist_controller.js b/app/javascript/controllers/tasklist_controller.js new file mode 100644 index 000000000..be94797f8 --- /dev/null +++ b/app/javascript/controllers/tasklist_controller.js @@ -0,0 +1,8 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + addHighlight() { + let section_to_highlight = this.element.dataset.info; + document.getElementById(section_to_highlight).classList.add('tasklist_item_highlight'); + } +} diff --git a/app/javascript/styles/_task-list.scss b/app/javascript/styles/_task-list.scss index d0f929f86..755836e3f 100644 --- a/app/javascript/styles/_task-list.scss +++ b/app/javascript/styles/_task-list.scss @@ -85,3 +85,9 @@ // display: block; // border: 1px solid blue // } + +.app-task-list__item:target, +.tasklist_item_highlight{ + background-color: $govuk-focus-colour; + box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; +} diff --git a/app/views/case_logs/edit.html.erb b/app/views/case_logs/edit.html.erb index 074c8ff90..f4e2d346d 100644 --- a/app/views/case_logs/edit.html.erb +++ b/app/views/case_logs/edit.html.erb @@ -8,11 +8,15 @@ <%= @case_log.status %>

You've completed <%= get_sections_count(@form, @case_log, :completed) %> of <%= get_sections_count(@form, @case_log, :all) %> sections.

- Skip to next incomplete section + <% next_incomplete_section=get_next_incomplete_section(@form, @case_log) %> + > + Skip to next incomplete section +

- <%= render "tasklist", locals: { form: @form } %> - <% end %>